Как загрузить изображения из постов на Slider 'Smooth div scroll'

Question

Я хочу использовать слайдер Robert Lee"Smooth Div Scroll".

В моей пользовательской теме Wordpress у меня уже есть один слайдер, но моя проблема в том, что мне не нужно просто загружать изображения, как я нашел в других сообщениях здесь, из-за переполнения стека, но изображения должны быть загружены из категории сообщения в WordPress.

Вот мой сайт Диарио Метрополис

Как я могу сделать это? В данный момент я использую "простой слайдер", параметры которого хранятся в файле.php.

Это код, который загружает контент на мой фактический слайдер (Простой слайдер)

На index.php

<?php include (TEMPLATEPATH . '/slide.php'); ?> 

На Slide.php

<?php $slide = get_option('repo_slide_cat'); `$count = get_option('repo_slide_count');
$slide_query = new WP_Query( 'category_name='.$slide.'&posts_per_page='.$count.'' );
while ( $slide_query->have_posts() ) : $slide_query->the_post();
?>

И классический сценарий Timthumb

<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>"><img class="slidimg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&amp;h=350&amp;w=655&amp;zc=1" alt=""/></a> <?php } else { ?>
<a href="<?php the_permalink() ?>"><img class="slidimg" src="<?php bloginfo('template_directory'); ?>/images/dummy.png" alt="" /></a>

Как я могу адаптировать ползунок smoothdivscroll для выполнения этого поведения? Мне не нужно, как я уже говорил, просто загружать изображения из указанной папки, мне нужно загружать изображения динамически из постов на моем сайте.

Любая помощь будет очень полезна, спасибо заранее.

---

Robert Lee Мой код wp-enqueue-script выглядит следующим образом:

<?php wp_enqueue_script('jquery'); 
wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');
wp_enqueue_script('jqui', get_stylesheet_directory_uri() .'/js/jquery-ui-1.8.23.custom.min');
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.smoothdivscroll-1.3.js'); 
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.kinetic'); 
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min'); 
wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
wp_enqueue_script('liscroll', get_stylesheet_directory_uri() .'/js/liscroll.js');
?>

Я изменил эффекты.js, как вы сказали мне, но все равно ничего:(

Answer 1

Попробуй это.

Скачайте Smooth Div Scroll и добавьте его в свою тему JS

Внутри Functions.php вашей темы замените скрипт enqueue для js/slides.min.jquery.js и замените его на Smooth Div Scroll JS, который вы скачали.

С этого момента вам нужно отредактировать wp-content/themes/Metropolis_/js/effect.js

замещать

jQuery('#slides').slides({

            play: 5000,
            crossfade: true,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
                jQuery('.caption').animate({
                    bottom:-35
                },100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function(current){
                jQuery('.caption').animate({
                    bottom:0
                },200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function() {
                jQuery('.caption').animate({
                    bottom:0
                },200);
            }
        }); 

с этим

$("#slides").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });

Обновить:

Вам нужно загрузить все изображения, JS и CSS в папку вашей темы.

Обновите мой ответ снова:

В вашем functions.php у вас есть или где бы вы ни ставили свои скрипты

wp_enqueue_style('smoothdivcss', get_stylesheet_directory_uri() .'/css/smoothDivScroll.css');
wp_enqueue_script('jquery'); 
wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');
wp_enqueue_script('jqui', get_stylesheet_directory_uri() .'/js/jquery-ui-1.8.23.custom.min.js');
wp_enqueue_script('smoothdivscroll', get_stylesheet_directory_uri() .'/js/jquery.smoothdivscroll-1.3.js'); 
wp_enqueue_script('kinetic', get_stylesheet_directory_uri() .'/js/jquery.kinetic.js'); 
wp_enqueue_script('mousewheel', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min.js'); 
wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
wp_enqueue_script('liscroll', get_stylesheet_directory_uri() .'/js/liscroll.js');

Также на основе сайта с плавной прокруткой div он показывает, что изображения должны быть перечислены таким образом

    <div id="slides">
        <img src="images/demo/field.jpg" alt="Field" id="field" />
        <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
        <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
</div>

Обновление на основе вашего ответа Pastbin:

Строка 9 должна /css вместо / js, если вы не поместите css в папку js.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/smoothDivScroll.css" media="screen" /> 

Удалить строку 19

wp_enqueue_script('style', get_stylesheet_directory_uri() .'css/smoothDivScroll.css'); 

Строка 20, 21 у вас отсутствует расширение.js

wp_enqueue_script('kinetic', get_stylesheet_directory_uri() .'/js/jquery.kinetic');
wp_enqueue_script('mousewheel', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min');