I am while using Smooth Div Scroll jQuery Plugin to possess a moving filmstrip online. The pictures loaded in to the film strip are of the custom publish type and every possess a title and have a single image. The wordpress plugin scrolls flat across a lengthy div that contains anywhere of images. My issue is will be able to scroll for any apparently infinite period of time despite the pictures have left.

Here's the my introduction to the issue:

  • I have attempted using plain images rather from the publish loop, and everything labored not surprisingly (no infinite scrolling).
  • I have attempted setting scripts between document.ready and window.load, with document.ready they do not load whatsoever.
  • I have attempted calling a public function "recalculateScrollableArea" to ensure that the region might be calculated following the images are loaded with no success, then by calling a reminder box in jQuery within the script I saw it had been known as prior to the images were loaded.

The way it need to look usually: How it should look usually The way it looks if this over-scrolls: How it looks when it over-scrolls

The Graceful Div Scroll code and also the following initializing code are generally known as at the end from the footer:

jQuery(window).load(function() {
    jQuery("div#makeMeScrollable").smoothDivScroll({ 
        autoScroll: "onstart" , 
        autoScrollDirection: "backandforth", 
        autoScrollStep: 1, 
        autoScrollInterval: 15, 
        visibleHotSpots: "always"
    });

This is exactly what Used to do to fix the resizing:

jQuery(document).ready(function() {
    jQuery("#makeMeScrollable").smoothDivScroll("disable");
});

I ought to also mention, the pictures for that posts are encircled by "p" tags however i aren't seeing why that might be the problem.

Thank you for reading through!

EDIT: Here's more code, the majority of it's stock and dealing when simply IMGs are place rather than the loop.

The bottom CSS and jQuery files overlap with those within this simple demo: http://www.smoothdivscroll.com/basicDemo.htm

jQuery and jQuery UI Imports (Working)

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

Imports occur at the end from the footer:

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

Here is a snippet of code for just one section which utilizes a loop for content:

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

Here's a good example of adding a picture in WordPress: enter image description here