How to load images from posts on Slider 'Smooth div scroll'

Question

I want to use the 'Smooth Div Scroll' Slider Slider Website

In my custom Wordpress theme, i already have one slider there, but my issue is that i don't need just to load images as i've found on other posts here on stack overflow, but the images must be loaded from a category of posts in wordpress.

Here's my website Diario Metropolis

How can i accomplish this? I'm using the "simple slider" at the moment, and the parameters of this are stored in a .php file.

This is the code that loads the content on my actual slider (Simple slider)

On index.php

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

On 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();
?>

And the classic timthumb script

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

How can i adapt the smoothdivscroll slider to accomplish this behavior? I don't need as i said before, to just load images from a specified folder, i need to load images dynamically from posts in my website.

Any help would be of great help, thanks in advance.

---

Robert Lee My wp-enqueue-script code is as follows:

<?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');
?>

I modified the effects.js as you told me, but still nothing :(

Answer 1

Try this.

Download the Smooth Div Scroll and add it to your theme JS

Inside of Functions.php of your theme, replace the enqueue script for js/slides.min.jquery.js and replace it with the Smooth Div Scroll JS you downloaded.

From that point you need to edit wp-content/themes/Metropolis_/js/effects.js

Replace

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

with this

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

Update:

You need to Upload all the images, JS, & CSS to your theme's folder.

Update to my answer again:

In your functions.php you have or wherever you are enqueue your scripts

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

Also based on the smooth div scroll site, it shows that the images should be listed in this manner

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

Update based on your Pastbin answer:

Line 9 should /css instead of /js unless you put the css in the js folder.

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

Remove line 19

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

Line 20, 21 you are missing .js extension

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