is it possible to: use a image pop-up/iframe in a PHP loop ?

codlife · January 29, 2009

Thanks for having a look at my problem - I'm sure to a php genius it's really straight forward but to me it has been an afternoons head scratching!

What I'm trying to do:

The site i'm building populates the page with event entries from an SQL db.

On each of these entries I want a link that can be clicked to open a remote image. I want the images to open in some lind of jquery lightbox / iframe (http://dolem.com/lytebox/ for example)

I can get the images to open as a link no problem but can't get any lightbox-action working.

Here is my code (sorry if not tidy I'm a newbie):


	<script type="text/javascript" language="javascript" src="lytebox.js"></script>
	<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


		<!------------------------ CSS styles -----------------------!>
		<style type="text/css">
		<?php include "style.php" ?>
		</style>





<html>
<body>

<div id="header">
<br />The Calendar           Add Event             Archive
</div><!---close header---!>

<div class="hyper_wrapper">		
<div class="wrapper">



<!--------------------------- PHP ---------------------------!>
<?php
//------- connect to the sql server --------//

$connection = mysql_connect("localhost", "root");
if (!$connection)
{die('Could not connect: ' . mysql_error());
}


//------- select all events from the db and group by date --------//

mysql_select_db("headfirst", $connection);

$query= "SELECT * FROM events WHERE date>=NOW() ORDER BY date";
$allFutureEvents= mysql_query($query);




//------- set the loop to occur the correct amount of times --------//

$numFutureEvents=mysql_numrows($allFutureEvents);
$loopNum=0;


echo "<div class='left_wrapper'>";
while ($loopNum < $numFutureEvents) {

				//---set variables from db data---//  write this into function later //

				$entry_id= 			mysql_result($allFutureEvents, $loopNum, "entry_id");
				$nameofnight= 		mysql_result($allFutureEvents, $loopNum, "nameofnight");
				$venue= 			mysql_result($allFutureEvents, $loopNum, "venue");
				$headliners=		mysql_result($allFutureEvents, $loopNum, "headliners");
				$gig_club= 			mysql_result($allFutureEvents, $loopNum, "gig_club");
				$details= 			mysql_result($allFutureEvents, $loopNum, "details");
				$flyer_url= 		mysql_result($allFutureEvents, $loopNum, "flyer_url");

				$price_raw= 		mysql_result($allFutureEvents, $loopNum, "price");
				$price= 			str_replace($price_raw, 'Â£', '&pound');

				$date_raw= 			mysql_result ($allFutureEvents, $loopNum, "date");
				$date_numerical=  	strtotime($date_raw);
				$date=				date("l d F", $date_numerical);
				?>








		<?php
			echo "<div class='event_container'>";


			//------ ONLY SHOW THE DATE ONCE -----//	
			if ($date_raw != $last_date_raw)echo "<div class='date_container'>" . $date . "</div>";	
			//------------------------------------//	
		?>
			<a class="<?php echo $entry_id;?>" href="#">

		<?php
			echo "<div class='namenight_container'>";
			echo $nameofnight . " @ " . $venue . "<div class='headliners'>(" . $headliners . ")</div>";
			echo "</div>";
		?>
			</a>

			</div><!---close event_container---!>




			<!---------- TEMPORARY HOLDING DIV (HIDDEN) ------------!>
			<div class="hidden">

			<div class="nameofnight<?php echo $entry_id; ?>"><?php echo $nameofnight; ?>
			</div>		

			<div class="headliners<?php echo $entry_id; ?>"><?php echo $headliners; ?>
			</div>

			<div class="details<?php echo $entry_id; ?>"><?php echo $details; ?>
			</div>

							<!-------------FLYER LIGHTBOX-----------------!>
							<div class="flyer_url<?php echo $entry_id; ?>">
							<a href="<?php echo $flyer_url ?>" rel="lytebox" title="Image Description">Image #1</a>
							</div>
							<!--------------------------------------------!>


			</div><!--close hidden div--!>
			<!-----------------------------------------------!>








						<!----------------------- JQUERY:  EMPTY, CLONE & APPEND ---------------------!>
						<script src="http://code.jquery.com/jquery-latest.js"></script><script>

						$(function() {
						$('a.<?php echo $entry_id;?>').click(function () {
						$('.right_side').children().empty();
						$('.nameofnight<?php echo $entry_id; ?>').clone().appendTo('.rs_nameofnight');
						$('.headliners<?php echo $entry_id; ?>').clone().appendTo('.rs_headliners');
						$('.details<?php echo $entry_id; ?>').clone().appendTo('.rs_details');
						$('.flyer_url<?php echo $entry_id; ?>').clone().appendTo('.rs_flyer_url');

						});									
						});
						</script> 
						<!------------------------------------------------------------------!>


<?php

//------- state changes to affect loop next time round --------//
$last_date_raw = $date_raw;
$loopNum++;

}
?>

</div> <!--close left_wrapper



			<!------------------------------- RIGHT SIDE INFO BOX ----------------------------!>
			<div class='right_side'>

			<div class='rs_nameofnight'>
			</div>

			<div class='rs_headliners'>
			</div>

			<div class='rs_details'>
			</div>

			<div class='rs_flyer_url'>
			</div>


			</div><!---close right side---!>
			<!-----------------------------------------------------------------------------------!>






</div> <!--close wrapper*/
</div> <!--close hyper_wrapper*/

</body>
</html>

Sign In

is it possible to: use a image pop-up/iframe in a PHP loop ?

Recommended Posts

codlife

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information