DISPLAYING IMAGES BLOCKS IN A RANDOM ORDER - Sep 19th, 2010
|
A client of mine wanted to have 4 groups of images and a navigation menu display in a single row, 5 column table on their home page. They wanted the images to change in a random fashion and the navigation menu to appear in a different cell each time the page was visited.
I was able to help them by combining the random display concept above with a simple javascript program that I found on the vBulletin support forum.
http://forum.vbulletinsetup.com/f62/display-content-random-order-xhtml-valid-2355.html
I created 4 section editors like the ones above, and then created a web page with the following code: The class=ā€¯group1" is used by the randomizing script to swap the contents of the cells.
<?php header('Content-type: text/html; charset=utf-8'); ?> <?php require_once "/path_to_your/cmsAdmin/lib/viewer_functions.php";
list($images_1Records, $images_1MetaData) = getRecords(array( 'Table name' => 'images_1', 'orderBy' => 'RAND()', 'limit' => '1', ));
list($images_2Records, $_images_2MetaData) = getRecords(array( 'Table name' => 'images_2', 'orderBy' => 'RAND()', 'limit' => '1', ));
list($images_3Records, $images_3MetaData) = getRecords(array( 'Table name' => 'images_3', 'orderBy' => 'RAND()', 'limit' => '1', ));
list($images_4Records, $images_4MetaData) = getRecords(array( 'Table name' => 'images_4', 'orderBy' => 'RAND()', 'limit' => '1',
));
?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="scripts/random.js"></script>
<title>Random Blocks</title> </head>
<body > <table border="0" align="center" cellpadding="0"> <tr> <td valign="top"> <?php foreach ($images_1Records as $record): ?> <div class="group1"> <?php foreach ($record['image'] as $upload): ?> <a href="<?php echo $upload['info1'] ?>"> <img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" style="border:hidden" alt="" /></a> <?php endforeach ?> <?php endforeach ?> </div></td>
<td valign="top"> <?php foreach ($images_2Records as $record): ?> <div class="group1"> <?php foreach ($record['image'] as $upload): ?> <a href="<?php echo $upload['info1'] ?>"> <img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" style="border:hidden" alt="" /></a> <?php endforeach ?> <?php endforeach ?> </div></td>
<td valign="top"> <?php foreach ($images_3Records as $record): ?> <div class="group1"> <?php foreach ($record['image'] as $upload): ?> <a href="<?php echo $upload['info1'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" style="border:hidden" alt="" /></a> <?php endforeach ?> <?php endforeach ?> </div></td>
<td valign="top"> <?php foreach ($images_4Records as $record): ?> <div class="group1"> <?php foreach ($record['image'] as $upload): ?> <a href="<?php echo $upload['info1'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" style="border:hidden" alt="" /></a> <?php endforeach ?> <?php endforeach ?> </div></td>
<td valign="top"><div class="group1"> <table align="center" width="90%" border="0" cellpadding="0"> <tr> <td valign="top" ><a class="your-class" href="your_index.php">Home</a></td> </tr> <tr> <td valign="top" ><a class="your-class" href="page_1.php">Menu Item 1</a></td> </tr> <tr> <td ><a class="your-class" href="page_2.php">Menu Item 2</a></td> </tr> <tr> <td ><a class="your-class" href="page_3.php">Menu Item 3</a></td> </tr> <tr> <td ><a class="your-class" href="page_4.php">Menu Item 4</a></td> </tr> </table>
</div></td>
</tr> </table>
<script type="text/javascript"> //randomize order of contents with DIV class="group1" randomizeContent("group1") </script>
</body> </html>
|
The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact
Interactive Tools for information on the downloading of the software or the purchasing of licenses.