Page 1 of 1

dynamically assign REL tag to JS ColorBox

Posted: Sat Sep 17, 2011 11:20 pm
by mehargags
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
--------

Code: Select all

<?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>";
  /////	
?>
the Javascript which calls color BOX looks like

Code: Select all

<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>