CODEWITHSUNDEEP
phpjqueryajaxslider
Jonathan
Jonathan

Reputation: 539

How to create and AJAX Anything Slider (Long post)

I'm using php, the Anything Slider jQuery plugin from CSS Tricks, and jQuery AJAX to try to create a slider where I can just add images to a directory and have the slider update automatically. Below, I'll post the PHP, Javascript and HTML, then I'll explain the issues.

<?php
function hello(){
$dir ='../images';
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
           if ($file != "." && $file != ".." && $file != ".DS_Store"&& $file != "../images") {
            echo "<li><img src=\"http://localhost:8888/wordpress/wp-content/themes/perpetualC/images/$file\" class=\"image\"></li> \n"; 
//add <li> tags, trying to fix the problem...
            }
        }
          closedir($dh);
        }
    } 
}
hello();

?>

This functions perfectly and is in a file called image.php, which is called perfectly by the following block of code.

$(document).ready(function() {
$.get('images.php', function(data) {    
    var lines = data.split("\n");
    $.each(lines, function(n, elem) {
       $('#slider').append( elem );
       //comment out an attempt to fix the issue, the <li> tags here were replaced by tags in the PHP.
       //$('.image').wrap('<li>'); 
    });
});
$('#slider').anythingSlider({
    resizeContents: true,
    addWmodeToObject: 'transparent',
    autoPlay: true,
    delay: 1500
});
}); // end ready

Now here's where the problems start. This renders the following block of code from Firebug

<section class="stuff">
 <div style="width: 860px; height: 200px;" class="anythingSlider anythingSlider-default activeSlider">
<div class="anythingWindow">
  <ul style="width: 0px;" class="anythingBase horizontal" id="slider">
    <li><img src="http://localhost:8888/images/bg.jpg" class="image"></li>
    <li><img src="http://localhost:8888/images/bg.psd" class="image"></li>
    <li><img src="http://localhost:8888/images/bg1.jpg" class="image"></li>
    <li><img src="http://localhost:8888images/bg2.jpg" class="image"></li>
    <li><img src="http://localhost:8888/images/blackTransGradient.png" class="image"></li>
    <li><img src="http://localhost:8888/images/whiteTransGradient.png" class="image"></li>
  </ul>
</div>
<div style="display: none;" class="anythingControls">
  <ul style="display: none;" class="thumbNav">
  </ul>
  <a style="display: none;" href="#" class="start-stop playing"><span>Stop</span></a></div>
<span style="display: none;" class="arrow back"><a href="#"><span>«</span></a></span><span style="display: none;" class="arrow forward"><a href="#"><span>»</span></a></span></div>

This... does nothing! A properly working Anything Slider will have classes on the <li> tags that change at a set interval... this has no classes at all. Any help? Where's my problem? I know something like this is possible because of the this jsFiddle, http://jsfiddle.net/Cm479/248/ but I'm not sure how to go about fixing my problem

Upvotes: 0

Views: 925

Answers (1)

ShaaD
ShaaD

Reputation: 626

You have a race condition in part on JavaScript. Slider is looking pictures they do not exist yet.

Try this:

 $(document).ready(function() {

    $.get('images.php', function(data) {    
        var lines = data.split("\n");

        $.each(lines, function(n, elem) {
           $('#slider').append( elem );
           //comment out an attempt to fix the issue, the <li> tags here were replaced by tags in the PHP.
           //$('.image').wrap('<li>'); 
        });

        $('#slider img').promise().done(function() {
            $('#slider').anythingSlider({
                resizeContents: true,
                addWmodeToObject: 'transparent',
                autoPlay: true,
                delay: 1500
            });
        });

    });

});

Upvotes: 1

Related Questions