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 КБ:)