DOM weirdness with jQuery Cycle

Question

I'm getting images from directories dynamically for some slideshows in a WordPress site I'm building. Sometimes they show up on pages, sometimes they don't.

Looking at this I'm sure I need some sort of preloader to initialize my images into the DOM before the cycle plugin does what it does, but I just don't know where to shoehorn the pertinent code. My code is as follows:

<?php
        function show_gallery($path){
            if($path == ""){
                return;
            }
            // Fix the path to be usable
            $path = "wp-content/themes/mytheme" . "$path";

            // Ignore files/paths that aren't usable
            $img_list = array_diff(scandir($path), array('.', '..', '.DS_Store'));
            $imgcount = count($img_list);
            if($imgcount > 1){
                echo "<div id=\"overlay-prev\"><img src='/wp-content/themes/grisedale/assets/gallery/prev.png' class='prev'></div>";
                echo "<div id=\"overlay-next\"><img src='/wp-content/themes/grisedale/assets/gallery/next.png' class='next'></div>";
            } else {
                echo "";
            }
            echo "<div id=\"current-image\">";
            // Spit out the images to be controlled by cycle
            foreach ($img_list as $img){
                echo "<img class='gallery-images' src='../../../$path$img'>\n";
            }
            echo "</div>";
        }
    ?>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#current-image').cycle({
            fx: 'fade',
            speed:  'fast', 
            timeout: 0,
            prev:    '#overlay-prev',
            next:    '#overlay-next', 
            containerResize: true
        });
    });
    </script>

Honestly, the images are all small and if there were some kind of sanity test I could do with PHP that would probably suffice. In any case, I just needs the images to load predictably into any page that has a gallery without having to do three or four reloads to see them. Cheers.

Answer 1

UPDATE

So, the trick with the jQuery cycle plugin is to set a specific width and height for your images. I was setting a width, and apparently for most browsers that just isn't enough. I set a minimum height as well and now everything works as expected.