I'm using colorBox to show up a dynamically populated Image. I need to show one image as the Thumbnail & when this thumbnail is clicked a lightbox opens and a group of images slide inside it..

ColorBox uses rel tag to group the images that are displayed, I need to generate this REL tag dynamically..which is a challenge for me as I'm not good at JS at all

I checked fancybox too, it uses rel too... so pls help me

I tried generating JS with PHP but I think I'm not able to PLACE it properly

<script src="js/jquery.colorbox-min.js"></script>
	<script>
	function zz(t) {
		$(document).ready(function(){
			//Examples of how to assign the ColorBox event to elements
			$("a[rel='example3']").colorbox({transition:"fade"});
		
		});
	}

	</script>
<!--End ** Color Box -->

</head>
<body>

<!-- Thumbnail Image -->	
	<!--<a href="uploads/img1.jpg" rel="example3"><img src="uploads/img1.JPG" width="288" height="190"></a>-->
<!-- Hidden container -->
<?php


$uploadimgpath = "admin/ImageUploader/uploads";
    
$sqlquery = mysql_query("SELECT * FROM dogs_table WHERE dog_visible = 'yes' ORDER BY dog_id");
while($row = mysql_fetch_array($sqlquery))
{
  $ex=$row["dog_id"];
    echo "<a href='$uploadimgpath/img1.jpg' rel='".$row["dog_id"] ."'>". $row["dog_id"] ."---". $row["dog_name"] ."</a><br>";

		//echo "<div style='display:none'>";
	  $sqlquery2 = mysql_query("SELECT dog_image,image_id from dog_images WHERE dog_id='". $row["dog_id"] ."'");   
        while($row1 = mysql_fetch_array($sqlquery2))
        {	
			echo $row1["dog_image"]."<br>";
			echo "<a href='$uploadimgpath/". $row1["dog_image"] ."' rel='".$row["dog_id"] ."' title='". $row1["dog_image"] ."'></a>";
        }// 2nd while loop Ends
    //echo "</div>";
}// while loop Ends
/////
  echo "<script src=\"js/jquery.colorbox-min.js\"></script>
	<script>
		$(document).ready(function(){
			//Examples of how to assign the ColorBox event to elements
			$(\"a[rel='$ex']\").colorbox({transition:\"fade\"});
		
		});
	</script>";
  /////	
?>

Can u pls help on this ???
Member Avatar
diafol

I need to generate this REL tag dynamically..which is a challenge for me as I'm not good at JS at all

Dynamic setting will be PHP?
If not, why did you post here?

Anyway - have the ready bit on the outside - place the js functions inside it. You've got a function in the head that is duplicated in the php output. Doesn't make sense to me.

I know, I left it in the PHP & outside for reader's reference...
Can u pls explain what u mean by "ready bit outside" ??

is the JS placed at the right place in the PHP code??

Here is code that I used to dynamically assign 'rel' value for my photos - see attached Notepad copy of code.