0

私はphp、CSS TricksのAnything Slider jQueryプラグイン、およびjQuery AJAXを使用して、ディレクトリに画像を追加してスライダーを自動的に更新できるスライダーを作成しようとしています。以下に、PHP、Javascript、HTML を掲載し、問題点を説明します。

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

?>

これは完全に機能し、次のコード ブロックによって完全に呼び出される image.php というファイルにあります。

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

ここから問題が始まります。これにより、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>

これは...何もしません！適切に機能する Anything Slider には<li>、設定された間隔で変更されるタグのクラスがあります...これにはクラスがまったくありません。何か助けはありますか？私の問題はどこですか？このjsFiddle、 http: //jsfiddle.net/Cm479/248/のために、このようなことが可能であることは知っていますが、問題を解決する方法がわかりません

4

1 に答える 1

1

JavaScriptに部分的に競合状態があります。スライダーはまだ存在しない写真を探しています。

これを試して：

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

    });

});
于 2012-05-22T15:00:20.443 に答える