1

I'm creating a website which has the Royal Slider HTML version. I want to use picturefill to load the image optimized for the current resolution viewed. But I have problems getting it to work. It works while I serve the images via a normal WP_Query.

I've read this thread, but that did not help me, anybody an idea?

Thanks, /Paul

<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>

edit: 28-06 09:40

Got in contact with developer... so he gave some tips. One of them was to make sure picturefill initializes before the slider. With that he means, at least I think, that picturefill.js needs to be loaded before the royalslider files.

Still no luck though. Oh en made a little change in the code due:

<div class="rsIMG">

does not follow the slider syntax.

4

1 回答 1

1

我今天设法让 RoyalSlider 与 Picturefill2 一起工作，但您需要编辑 picturefill.js 文件的一部分以阻止它在调整窗口大小时重新计算。我刚刚在RoyalSlider 论坛中输入了一些说明，但我也会在这里复制，以防它帮助其他人。

首先，您必须从http://scottjehl.github.io/picturefill/#download获取 picturefill.js 。然后在文档的HEAD中加载脚本文件，而不仅仅是在 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>

一开始看起来有点乱，但它很容易理解，并且在图片填充网页上都有解释，但基本上第一个<source>元素应该始终是您平移服务的图像的最高质量版本，通过媒体查询指定什么时候应该加载。因此，在上面 < 768px 的示例中，加载了 gsa-01-smallest。如果设备的设备像素比 > 1，则加载 gsa-01-smallest2x.jpg，直到最终如果设备像素比为 1，则加载 gsa-01-smallest.jpg。IE9 包装器只是 IE9 支持的一个技巧。

现在，为了同时使用 RoyalSlider 和 picturefill，您必须确保src在让 RoyalSlider 执行此操作之前，picturefill 已遍历页面并为 img 标签添加了正确的属性。为了做到这一点，将您常用的royalslider ( jQuery(document).ready(function($) { $(".royalSlider").royalSlider({...) 代码放入一个名为defer.js. 现在，就在文档的最终标记之前，但显然在 jQuery 和 Royalslider js 脚本标记之后，使用以下代码（称为 Google Defer js 脚本）：

<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 ); }

这就是我让它工作的方式，它是一种为手机提供滑块的绝妙方式——尤其是全宽滑块。我不必在 3G 手机上加载约 400kb 的全宽图像，我可以提供约 80kb 的图像 :)

于 2014-05-12T16:47:20.887 回答