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.