Cómo crear y AJAX Anything Slider (Publicación larga)

Estoy usando php, el complemento Anything Slider jQuery de CSS Tricks y jQuery AJAX para intentar crear un control deslizante donde puedo agregar imágenes a un directorio y hacer que el control deslizante se actualice automáticamente. A continuación, publicaré PHP, Javascript y HTML, luego explicaré los problemas.

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

?>

Esto funciona perfectamente y está en un archivo llamado image.php, el cual es llamado perfectamente por el siguiente bloque de código.

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

Ahora aquí es donde empiezan los problemas. Esto representa el siguiente bloque de código de 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>

¡Esto... no hace nada! Un Anything Slider que funcione correctamente tendrá clases en el <li> etiquetas que cambian en un intervalo establecido... esto no tiene clases en absoluto. ¿Alguna ayuda? ¿Dónde está mi problema? Sé que algo como esto es posible debido a este jsFiddle, http://jsfiddle.net/Cm479/248/ pero no estoy seguro de cómo solucionar mi problema

preguntado el 22 de mayo de 12 a las 14:05

1 Respuestas

Tiene una condición de carrera en parte en JavaScript. Slider está buscando imágenes que aún no existen.

Prueba esto:

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

    });

});

contestado el 22 de mayo de 12 a las 16:05

¡Gracias! ¡Eso funcionó brillantemente! Ahora tendré que examinar esas funciones para ver qué hacen. La verdad es que soy bastante nuevo en todo esto. - Jonathan

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.