Royalslider и Picturefill.js

Я создаю сайт, который имеет HTML-версию Royal Slider. Я хочу использовать picturefill для загрузки изображения, оптимизированного для текущего просматриваемого разрешения. Но у меня проблемы с тем, чтобы заставить его работать. Это работает, пока я работаю с изображениями через обычный WP_Query.

Я читал эту ветку, но это мне не помогло, кто-нибудь задумался?

Спасибо / Пол

<div id="featuredAdv" class="royalSliderAdv rsMinW">

    <?php 

        $args_featured_adv = array(
            'posts_per_page' => -1,
            'orderby' => 'rand',
            'post_type' => 'advertenties',
            'meta_key' => 'advertentiepositie',
            'meta_value' => 'Featured'
        );

        $adv_featured = new WP_Query( $args_featured_adv );

        if( $adv_featured->have_posts() ): while ( $adv_featured->have_posts() ) : $adv_featured->the_post();

    ?>

    <a href="<?php the_field('link'); ?>" target="_blank" onClick="return recordOutboundLink(this, ['<?php the_title(); ?>', '<?php the_field('link'); ?>']);">

        <div class="rsContent">

                <?php

                    $attachment_id_ft = get_field('afbeelding');
                    $small_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-small' ); // returns an array
                    $default_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-default' ); // returns an array
                    $large_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-large' ); // returns an array

                ?>

                <span data-picture data-alt="<?php the_title_attribute( array( 'before' => 'Photoq.nl: ', 'after' => '' ) ); ?>">
                    <span data-src="<?php echo $default_ft[0]; ?>"></span>
                    <span data-src="<?php echo $small_ft[0]; ?>" data-media="(min-width: 400px)"></span>
                    <span data-src="<?php echo $default_ft[0]; ?>" data-media="(min-width: 768px)"></span>
                    <span data-src="<?php echo $large_ft[0]; ?>" data-media="(min-width: 1200px)"></span>

                    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
                    <noscript>
                        <img src="<?php echo $default_ft[0]; ?>" alt="">
                    </noscript>
                </span>

        </div>

    </a>

    <?php endwhile; endif; wp_reset_query(); ?>

</div> <!-- end #featuredAdv -->

<script>
    jQuery(document).ready(function($) {
        $('#featuredAdv').royalSlider({
            arrowsNav: false,
            loop: false,
            controlsInside: false,
            imageScaleMode: 'none',
            imageScalePadding: 0,
            arrowsNavAutoHide: false,
            autoScaleSlider: true,
            autoScaleSliderWidth: 270,
            autoScaleSliderHeight: 572,
            controlNavigation: 'bullets',
            numImagesToPreload: 1,
            thumbsFitInViewport: false,
            navigateByClick: true,
            startSlideId: 0,
            autoPlay: false,
            transitionType: 'move',
            globalCaption: true
        });
    });
</script>

редактировать: 28-06 09:40

Связаться с разработчиком... поэтому он дал несколько советов. Одним из них было убедиться, что picturefill инициализируется перед слайдером. При этом он подразумевает, по крайней мере, я думаю, что файл picturefill.js должен быть загружен перед файлами royalslider.

Все же не повезло, хотя. Oh en сделал небольшое изменение в коде из-за:

<div class="rsIMG">

не соответствует синтаксису слайдера.

1 ответ

Мне удалось заставить RoyalSlider работать с Picturefill2 сегодня, но вам нужно отредактировать раздел файла picturefill.js, чтобы он не пересчитывался при изменении размера окна. Я только что напечатал некоторые инструкции на форуме RoyalSlider, но я скопирую их и здесь, если это поможет кому-то еще.

Сначала вы должны получить файл picturefill.js с http://scottjehl.github.io/picturefill/. Затем загрузите файл сценария в заголовок документа, а не перед тегом body. Если вам требуется поддержка старых браузеров, то есть браузеров, которые не поддерживают элементы HTML5, вам необходимо следовать приведенным здесь инструкциям, чтобы создать picture элемент. В качестве альтернативы, вы можете включить Modernizr в ваш проект (я уже использовал modernizr, вот как я это сделал).

Разметка RoyalSlider: вот код, который я использовал

<div class="royalSlider rsDefault"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="img/gsa-01.jpg" media="(min-width: 768px)"> <source srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest@2x.jpg 2x"> <!--[if IE 9]></video><![endif]--> <img class="rsImg" srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest2x.jpg 2x" alt="GSA Est. 1935"> </picture> <!-- etc... --> </div>

Сначала это выглядит немного беспорядочно, но довольно легко понять, и все это объясняется на веб-странице picturefill, но в основном это первое <source> Элемент должен всегда быть версией изображения самого высокого качества, которое вы перемещаете, указанным в медиазапросах, когда оно должно быть загружено. Таким образом, в приведенном выше примере при < 768px загружается gsa-01-smalllest. Если устройство имеет соотношение пикселей устройства> 1, то загружается gsa-01-smalllest2x.jpg, пока, наконец, если соотношение пикселей устройства не будет равно 1, то не будет загружен gsa-01-smalllest.jpg. Оболочка IE9 - всего лишь уловка для поддержки IE9.

Теперь, чтобы использовать RoyalSlider и picturefill вместе, вы должны убедиться, что picturefill прошел через страницу и добавил правильные src Присвойте тегу img, прежде чем позволить RoyalSlider сделать это. Для этого поместите свой обычный код для royalslider (jQuery(document).ready(function($) { $(".royalSlider").royalSlider({...) в файл с именем defer.js, Теперь перед самым последним тегом вашего документа, но, очевидно, после тегов js jQuery и Royalslider, используйте этот код (известный как js-скрипт Google Defer):

<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "js/defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Это говорит: подождите, пока страница загрузит все остальное, затем примените этот скрипт (загруженный из js / defer.js).

Это работает фантастически хорошо, пока вы не поймете, что при изменении размера окна все ломается (FML!). Это связано с тем, что в picturefill есть фрагмент кода, который заставляет его снова менять изображение при каждом изменении размера окна, что совсем не работает с RoyalSlider. Итак, чтобы остановить это, откройте файл picturefill.js, найдите этот блок кода и закомментируйте его (около строки 250):

if( w.addEventListener ){ var resizeThrottle; w.addEventListener( "resize", function() { w.clearTimeout( resizeThrottle ); resizeThrottle = w.setTimeout( function(){ picturefill({ reevaluate: true }); }, 60 ); }, false ); }

Вот как я заставил его работать, и это фантастический способ подачи слайдера на телефон - особенно слайдер на всю ширину. Мне не нужно загружать изображение шириной ~400 КБ на телефон 3G, вместо этого я могу подать изображение размером ~80 КБ:)

Другие вопросы по тегам