Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Randomizing Images on Glider

Recently, a friend and reader of mine, Trina, asked me on Facebook on how did I manage to get the images you see in the current design’s header to load randomly upon page load. The images in the header are loaded into a glider container, which I used Glider.js to allow for smooth transitioning among the images.

In this tutorial, I will not be covering the details of constructing a glider groundup because that has been covered in a previous tutorial, Compacting contents using Glider script. I will be covering more on how we will be loading in images using php.

There are many other gallery/glider scripts that use different javascript libraries out there – Glider.js relies on scriptaculous and prototype, which I know have fallen out of favour as jQuery becomes more widely adopted. However, the basic construction remains the same and the steps below will still remain relevant to those using

Setting up the Glider

The basic construct of a typical glider will be as follow, according to the Glider tutorial:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. </div>
  8. </div>
  9. </div>
  10. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

Instead of placing texts within each individual sections in the previous tutorial, we will be inserting images into the <div> elements instead:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">
  5. <img src="..." alt="..." title="..." />
  6. </div>
  7. <div id="section2" class="section">
  8. <img src="..." alt="..." title="..." />
  9. </div>
  10. <div id="section3" class="section">
  11. <img src="..." alt="..." title="..." />
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

But then of course, we will be inserted images dynamically into the glider, and not by copy and pasting every single line. We will be using the for loop for this – keep this in view, we’ll come back to the for loop later.

Rotating the images

My strategy was very rudimentary and perhaps imperfect, so if you have any improvements, feel free to voice up in the comments section below. The strategy is simple – to ensure a wide variety of images, I cluster my images into different folders based on the theme. Let’s say we want to rotate photos of different types – architecture, food, street and people. I would love to display a random image from each type. What I do is to place the images in different folders located in a main folder called /gallery/ – let’s say 10 photos in a folder named /ach/ (so it’s location will be /gallery/ach/), and so on and so forth for the remaining categories.

Now we will need to make a request to the server as the page loads – asking it to serve us a random image from each category. This is achieved by using the lightweight 4kb image rotation script (view PHP source) written by Dan Benjamin for A List Apart. Place the file rotate.php into each folder, and when we load the PHP file as an image source, we will be served a random image by the php file, for example:

<img src="/ach/rotate.php" alt="Photo - Architecture" title="Photo - Architecture" />

However, we will also need to jumble up the sequence of which the category are loaded. Therefore, randomity of the images come in 2 forms – an image is randomly loaded from a category, and the order of the images are further randomized.

Jumbling up the order of images

What we need to do to jumble up the order of the image will be as follow:

  1. Create an array with a strings
  2. Shuffle the array so that each string will be called in random order
  3. Execute a for loop so that we run the loop as many times as the size of the array
  4. In the for loop, load rotate.php from each category folder

And the ideas above can be translated into php as seen below:

  1. <?php
  2. $gliderdata = array(
  3. 'ach|Architecture',
  4. 'fod|Food',
  5. 'str|Street'
  6. 'ppl|People',
  7. );
  8. shuffle($gliderdata);
  9. for ($i = 0; $i < count($gliderdata); $i++)
  10. {
  11. $gliderimg = explode('|', $gliderdata[$i]);
  12. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" /></div>';
  13. }
  14. ?>

In the for loop, what I did was to explode the string in $gliderdata with ‘|’ as the delimiter – for example, if we explode ach|Architecture, we will separate them into ach and Architecture – they will be referenced as $gliderimg[0] and $gliderimg[1] respectively.

After that, we will echo the individual sections of the glider which will house the image elements. The sections will be assigned a unique identifier, section'.($i+1).', will mean that for each iteration of the for loop, the identifier will reflect the number of iterations. The reason why $i+1 is used is because $i starts from zero but the section identifier has to start from “section1″ and more.

I have placed the /gallery/ folder into my WordPress theme folder, but of course you can use a static URL in its place. Instead of using '.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php, we can use http://yoursite.com/gallery'.$gliderimg[0].'/rotate.php. Remember that $gliderimg[0] refers to the name of the folder while $gliderimg[1] refers to the description.

In short, the elements in the array should be formatted with this in mind: '[foldername]|[description]',. Whenever you add a new directory to the gallery folder, remember to add a new line to the array with the new subfolder name and a description if you feel like it. Each subfolder should contain photos and the rotate.php file.

Final code

We compile everything together into a decent glider with does not only jumble the sequence of images, but also loads a random image from a folder.

  1. <div id="glider">
  2. <div class="scroller">
  3. <?php
  4. $gliderdata = array(
  5. 'ach|Architecture',
  6. 'fod|Food',
  7. 'str|Street'
  8. 'ppl|People',
  9. );
  10. shuffle($gliderdata);
  11. for ($i = 0; $i < count($gliderdata); $i++)
  12. {
  13. $gliderimg = explode('|', $gliderdata[$i]);
  14. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" width="270" height="180" /></div>';
  15. }
  16. ?>
  17. </div>
  18. </div>
  19. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

If you have any questions, feel free to contact me, or ask in the comments section.

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

10 responses to “Randomizing Images on Glider” » Leave a response

  1. LatrinaResponse

    Woohoo! *HUGS* You are brilliantly awesome. Thanks, Teddy. And you wrote it up so quick too. I really appreciate it… lots and lots. Now I can’t wait to go and try it out!

    Btw, I love your tutorials. You make something that would normally sound a little overwhelming… simple. Always very easy to understand. Thanks!!

  2. LatrinaResponse

    Hehe, the bug I was referring to is the stomach flu that I had. Which kept me in bed most of the week so I was unable to work on the coding. :P

  3. LatrinaResponse

    I have a question, Teddy. The line you have included up there ^ starting with:

    <img src="/ach/rotate.php" alt="Photo - Architecture" title="Photo - Architecture" />

    Is that actually included somewhere in the code? If so, where?

  4. david

    Hi Teddy,

    I appreciate the tutorial and wondered if it was possible to get a continuous loop on the slider rather than the rewind to the beginning slide?

    Many thanks

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching How long can you hold your breath. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence