Member Avatar for 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

<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 ???
  • 3 Contributors
  • 3 Replies
  • 269 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by KickingHorse
Member Avatar for 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.

Member Avatar for mehargags

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

Member Avatar for KickingHorse

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

<div id="news">		
  <h2>News</h2>
	<?php
	if (mysqli_num_rows($result) < 1) 	
	{
	?>
		<p>Sorry - No News to Report!<p/>
	<?php
	}
	else
	{
		while ($row = mysqli_fetch_array($result))
		{
			// Assign values from a row to variables
			$news_id = $row['news_id'];
			$mth = date("M", strtotime($row['news_date']));
			$day = date("j", strtotime($row['news_date']));
			$yr = date("Y", strtotime($row['news_date']));				
			//echo nl2br($mth . ". " . $day . ", " .$yr . " " ."\n");
			$header = $row['header'];
			$desc1 = $row['desc1'];
			$desc2 =$row['desc2'];
			$desc3 =$row['desc3'];
			$pdf_txt1 =$row['pdf_txt1'];
			$pdf_1 =$row['pdf_1'];
			$pdf_txt2 =$row['pdf_txt2'];
			$pdf_2 =$row['pdf_2'];
			$link_txt1 =$row['link_txt1'];
			$link_1 =$row['link_1'];
			$link_txt2 =$row['link_txt2'];
			$link_2 =$row['link_2'];
			$link_txt3 =$row['link_txt3'];
			$link_3 =$row['link_3'];
			$photo_txt1 = $row['photo_txt1'];
			$photo1 = $row['photo1'];
			$photo_txt2 = $row['photo_txt2'];
			$photo2 = $row['photo2'];
			$photo_txt3 = $row['photo_txt3'];
			$photo3 = $row['photo3'];
			?>
			<h6 class="right_arrow"><?php echo $mth . ". " . $day . ", " .$yr . " " . $row['header'] ?></h6>
			<ul>
			<?php
				if ($photo1 != '' || $photo2 != '' || $photo3 != '')
				{?>					
				<li>
					<?php 
					if ($photo1 != '') { ?>
					<a target="_blank" rel="<?php print $news_id ?>" href="images/horses/<?php print $photo1 ?>" title="<?php print $photo_txt1 ?>"><img src="images/horses/<?php print $photo1 ?>" alt="<?php print $photo1 ?>" title="<?php print $photo_txt1 ?>"/></a>
					<?php }
					if ($photo2 != ''){?>					
					<a target="_blank" rel="<?php print $news_id ?>" href="images/horses/<?php print $photo2 ?>" title="<?php print $photo_txt2 ?>"><img src="images/horses/<?php print $photo2 ?>" alt="<?php print $photo2 ?>" title="<?php print $photo_txt2 ?>"/></a>
					<?php }
					if ($photo3 != ''){?>					
					<a target="_blank" rel="<?php print $news_id ?>" href="images/horses/<?php print $photo3 ?>" title="<?php print $photo_txt3 ?>"><img src="images/horses/<?php print $photo3 ?>" alt="<?php print $photo3 ?>" title="<?php print $photo_txt3 ?>"/></a>
					<?php }?>
					</li>
					<script type="text/javascript">
						$(document).ready(function(){
							$("a[rel='<?php print $news_id ?>']").colorbox({
							  current: "{current} of {total}",
							  transition: 'fade', speed:300,
							  scalePhotos: true,
							  maxWidth: "600px",
							  maxHeight: "700px"							  
							});		
						});
					</script>						
				<?php }?>
				<?php if ($desc1 != ''){?>
					<li><?php print $desc1 ?></li>
				<?php }?>
				<?php if ($desc2 != ''){?>
					<li><?php print $desc2 ?></li>
				<?php }?>
				<?php if ($desc3 != ''){?>
					<li><?php print $desc3 ?></li>
				<?php }?>
			</ul>
		<?php
		}				
	}
	?>
</div><!--news-->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.