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.


Terms of Service