Я использую плагин jQuery Smooth Div Scroll , чтобы разместить на сайте движущуюся полоску. Изображения, загруженные в кинопленку, имеют пользовательский тип записи, и каждое из них имеет заголовок и содержит одно изображение. Плагин прокручивает горизонтально через длинный div, содержащий любое количество изображений. Моя проблема в том, что я могу прокручивать, казалось бы, бесконечное количество времени даже после того, как изображения пропали.
Вот мое решение проблемы:
- Я пробовал использовать вместо этого простые изображения
из цикла сообщений, и все
работал как положено (не бесконечно
прокрутка).
- Я попытался установить сценарии между document.ready и window.load, с document.ready, они вообще не загружаются.
- Я пытался вызвать публичную функцию "recalculateScrollableArea", чтобы площадь могла быть рассчитана после загрузки изображений безрезультатно, а затем, вызвав окно оповещения в jQuery в скрипте, я смог увидеть, что он все еще вызывается до загрузки изображений.
Как это должно выглядеть обычно:
Как это выглядит при чрезмерной прокрутке:
Код Smooth Div Scroll и следующий код инициализации вызываются в нижней части нижнего колонтитула:
jQuery(window).load(function() {
jQuery("div#makeMeScrollable").smoothDivScroll({
autoScroll: "onstart" ,
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 15,
visibleHotSpots: "always"
});
Это то, что я сделал, чтобы попытаться исправить изменение размера:
jQuery(document).ready(function() {
jQuery("#makeMeScrollable").smoothDivScroll("disable");
});
Я должен также упомянуть, изображения для постов окружены тегами "p", но я не понимаю, почему это будет проблемой.
Спасибо за чтение!
EDIT:
Вот еще немного кода, большая часть которого является стандартной и работает, когда вместо цикла помещаются простые IMG-файлы.
Базовые файлы CSS и jQuery такие же, как в этом простом демо: http://www.smoothdivscroll.com/basicDemo.htm
Импорт jQuery и jQuery UI (рабочий)
function jQuery_from_Google() {
if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
wp_deregister_script( 'jquery' ); // unregistered key jQuery
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', false, '1.5.2'); // register key jQuery with URL of Google CDN
wp_enqueue_script( 'jquery' ); // include jQuery
}
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQuery_from_Google' ); // Theme active, include function
function jQueryUI_from_Google() {
if ( !is_admin() ) { // actually not necessary, because the Hook only get used in the Theme
wp_register_script( 'jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'); // register key jQueryUI with URL of Google CDN
wp_enqueue_script( 'jqueryui' ); // include jQueryUI
}
}
// nur for Themes since WordPress 3.0
add_action( 'after_setup_theme', 'jQueryUI_from_Google' ); // Theme active, include function
Импорт осуществляется в нижней части нижнего колонтитула:
<?php // Smooth Div Scroll inport for filmstrip galleries ?>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/javascript/filmstrip.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/SmoothDivScroll-1.1/js/jquery.smoothDivScroll-1.1-min.js"></script>
</body>
</html>
Вот фрагмент кода для одного раздела, который использует цикл для содержимого:
<?php if(is_page('engagements')) { ?>
<div id="makeMeScrollable">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<?php
$args = array( 'post_type' => 'engagement_photos' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
<?php } else if(is_page('weddings')) { ?>
Вот пример добавления изображения в WordPress:
