Royal Slider HTML バージョンの Web サイトを作成しています。現在表示されている解像度に合わせて最適化された画像を読み込むために、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
開発者と連絡を取りました...それで彼はいくつかのヒントをくれました。それらの 1 つは、スライダーの前に、picturefill が確実に初期化されるようにすることでした。つまり、少なくとも私が思うに、royalslider ファイルの前に picturefill.js をロードする必要があるということです。
それでも運はありません。Oh en により、コードが少し変更されました。
<div class="rsIMG">
スライダーの構文に従いません。