0

こんにちは私は現在、フォルダから画像をプルしてページに表示するjquery画像スライダースクリプトを持っています。

動作中の画像スライダーのあるWebページは次のとおりです。http：//iseeit.no/slidertest/

私が望んでいて理解しようとしているのは、同じページに9つの個別のスライダーを配置することです。これは、どのように表示されるかを示す画像の例です。

灰色のボックスはそれぞれスライダーを表しています

スライドごとに新しいdivを作成しようとしていますが、その方法がわかりません...

index.phpスクリプトは次のとおりです。

スライドショー

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#myslides').cycle({
    fit: 1, pause: 2, timeout: 100
    });
});
</script>
<link rel="stylesheet" href="styles/dynamicslides.css" type="text/css" media="screen" />


</head>
<body>

<?php
$directory = 'images/slideshow';    
try {       
    // Styling for images   
echo "<div id=\"myslides\">";   
foreach ( new DirectoryIterator($directory) as $item ) {            
    if ($item->isFile()) {
        $path = $directory . "/" . $item;   
        echo "<img src=\"" . $path . "\" />";   
    }
}   
echo "</div>";
}   
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';   
}
?>

</body>
</html>

CSSコーディングは次のとおりです。

#myslides {

padding: -8px;
margin: -8px;

} 


#myslides img {

}

だから私はこれをどのように行うのだろうかと思っていましたか？私は新しいdivを作成しようとしましたが、phpの経験があまりないので、正しく実行しているとは思いません...

いくつかのフィードバックとこれに関するいくつかの助けを得たいと思います。

スクリプトに関係するすべてのファイルは次のとおりです。http： //iseeit.no/files/slidertest.rar

4

1 に答える 1

0

私があなたの質問を正しく理解した場合、あなたは1つの作業スライダーを持っており、それらを1ページに並べて表示したいと考えています。もしそうなら、あなたはそのようにそれを行うことができます：

PHP：

    // set the directories of the sliders you want
    $directories = array('images/slideshow', 
                         'images/slideshow2',
                         'images/slideshow3',
                         'images/slideshow4',
                         'images/slideshow5');    

    //create all the image sliders
    foreach($directories as $dir) {
        try {       
            echo '<div class="myslides">';   

            //add slides
            foreach( new DirectoryIterator($dir) as $item ) {            
                if ($item->isFile()) { 
                    echo '<img src="' . $dir . '/' . $item. '" />';   
                }
            }   

            echo '</div>';          
        } catch(Exception $e) {
            //do nothing, just skip the slider
        }
    }

そして、次のmyslidesようにクラスのスライダーのjQueryプラグインを設定します。

    <script>
        $(document).ready(function() {
            $('.myslides').cycle({
                fit: 1, pause: 2, timeout: 100
            });
        });
    </script>

floatsスライダーを並べて配置するために使用できます。ベストプラクティスはul、スライダーをとして使用することliです。しかし、私はdiv今のところそれを残しました。このCSSを使用して、それらを並べて表示できます。

.myslides {
    float: left;
    margin: 0 10px 10px 0; //top, right, bottom, left
    width: 200px; //set the width and height of the sliders (or maybe the slider is doing it?)
    height: 400px;
}

お役に立てれば！

更新：3x3を作成するためのサンプルコード

$directories = array(0, 1, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7);
$i = 0;
echo '<ul>';

foreach($directories as $dir) {
    // devide $i by 3, is the outcome 0?
    if($i % 3 == 0 && $i != 0) {
        //end row
        echo '</li>';

        //are there more items for the next row?
        if($i != count($directories)) {
            echo '<li>';
        }
    } elseif($i == 0) {
        echo '<li>';
    }

    // your code
    echo 'Jeah!';

    $i++; //add one 
}

//close last element and list
echo '</li></ul>';

出力：

<ul>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
</ul>
于 2012-11-23T10:30:39.547 に答える