Home/ Questions/Q 8872137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:09:13+00:00

Hi I currently have a jquery image slider script that pulls images from a

  • 0

Hi I currently have a jquery image slider script that pulls images from a folder and shows them on a page.

Here is the webpage with the working image slider: http://iseeit.no/slidertest/

What I want and have been trying to figure out is to have 9 individual sliders on the same page, here is an example picture that shows how it should look like:

each of the grey boxes represents the sliders

Now I’ve been trying to make a new div for each slides, but I can’t figure out how to do it…

Here is the index.php script:

Slideshow

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

Here is the CSS coding:

#myslides {

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

} 


#myslides img {

}

So I was wondering how I would do this? I’ve tried to make a new div but I don’t hvae so much experience with php, so I don’t think I’m doing it right…

Would love to get some feedback and some help with this.

Here is all the files that has to do with the script:
http://iseeit.no/files/slidertest.rar

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I get your question right, then you have one working slider and want more of them on one page next to each other. If so then you can do it like so:

    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
        }
    }

    And set the jQuery plugin for the slider on the class myslides like so:

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

    You can use floats to place the sliders next to each other. Best practice would be an ul with the sliders as an li. But i left it as an div for now. You can get them next to each other with this 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;
}

    Hope this helps!

    update: example code to create 3×3

    $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>';

    Output:

    <ul>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
    <li>Jeah!Jeah!Jeah!</li>
</ul>
    • 0