Home/ Questions/Q 6671877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:26:33+00:00

Here i have some code which is my slideshow and what i am wondering

  • 0

Here i have some code which is my slideshow and what i am wondering is whether you can randomize the images so it doesn’t start on the same image when you refresh the page.

Please provide me with useful info and if you wish to show me feel free.

THNAKS GUYS! 🙂

<html>
<head>
<title>JQuery Cycle Plugin Sample</title>
<link rel="stylesheet" type="text/css" media="screen" href="../screen.css" />
<script type="text/javascript" src="../js2/jquery-1.3.js"></script>
<script type="text/javascript" src="../js2/jquery.cycle.all.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#myslides').cycle({
            fx: 'fade',
            speed: 2000,
            timeout: 2000
        });
    }); 
</script>
</head>
<body>
<div id="myslides"> 
    <img src="../images/capitol.jpg" />
    <img src="../images/flowers.jpg" />
    <img src="../images/countryscene.jpg" />
    <img src="../images/heartkush.jpg"/>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may want to hold image urls in a variable (or retrieve them from your div and clear the div afterwards), say

    var images = ['x.jpg', 'y.jpg', 'z.jpg'];

    (or even better – do some preloading). Then do a random sort

    function randomOrd(a,b)
{
   return (Math.round(Math.random())-0.5);
}
images.sort(randomOrd);

    then dynamically add images

    for (var i in images)
{
   $('#myslides').append('<img src="'+images[i]+'" />');
}

    and then do the slideshow. The final script may look like this:

    <script>
    function randOrd(a,b)
    {
        return (Math.round(Math.random())-0.5);
    }
    $(document).ready(function(){
        var images = [];
        /* retrieve images */
        $('div#myslides img').each(function(){
            images.push($(this));
        });
        /* clear the div */
        $('div#myslides').empty();
        /* do the random sort of images */
        images.sort(randOrd);
        /* append to the div sorted images */
        for (var i in images)
        {
            $('div#myslides').append(images[i]);
        }
        /* do the slideshow */
        $('#myslides').cycle({
            fx: 'fade',
            speed: 2000,
            timeout: 2000
        });
    });
</script>
    • 0