14 replies to this topic

[Hooch]

Hello all.

I'm not sure if this is possible, plus it will be very hard to explain.

I have a gallery started and have 7 random images above the image to be shown.
I'm using the ever popular lightbox JSV2
This is working smoothly via a DB.
Now what I would like to do is when the thumbnail is moused on and over a variable is set further down the script.

Here is what I have so far (simplified for show)

<table>
  <tr>
	<td>
	<?PHP
	$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 ORDER BY RAND() LIMIT 7") or die(mysql_error());
 	while ($r = mysql_fetch_assoc($query))
		{
		?>
		<a href="<?PHP echo $file_full ?>" rel="lightbox[all]" title="<?PHP echo $r['info'];?>" onmouseover="document.main.src='<?PHP echo $file_m; ?>;<?PHP $text = $r['info'];?>'" onmouseout="document.main.src='<?PHP echo $file_m; ?>;<?PHP $text = $r['info'];?>'"><img src="<?PHP echo $file_t; ?>" class="pic_border" /></a>
		<?PHP } ?>   
	</td>
  </tr>
  <tr>
	<td align="center" valign="top">	
	<img src="images/users/bg.jpg"  name="main" id="main" style="height:<?PHP echo $r['height']; ?>;" class="pic_border_larger" />
	<br />
	   <!-- ####Line below is what we are trying to make dynamic####-->
	<?PHP echo $text;?>
	</td>
  </tr>
</table>

Notice on the onmouseover and onmouseout I added an extra element

onmouseover="document.main.src='<?PHP echo $file_m; ?>;<?PHP $text = $r['info'];?>'" onmouseout="document.main.src='<?PHP echo $file_m; ?>;<?PHP $text = $r['info'];?>'"

I was hoping the $text variable would change, but of course how could it. The page needs to refresh.

Here's a link to my work in progress
Linky

You will see on mouseover the larger image change. Below that is where I would like the $text changed each image.
The $text variable will show the last thumbnail text.

Thank you for your time

Edited by Hooch, 31 July 2008 - 08:01 AM.

[Tyson D]

Hi Hooch,

So to get this straight, you want images to change when you mouse over their thumbnail (which you seem to have working, I like it - it's pretty cool!) and you want to display the information about the current image below it?

Quote

The $text variable will show the last thumbnail text.

Or did you want to display the info about the previously viewed image?

[rc69]

I don't use lightbox myself, but what you are trying to do and what i did just a couple of months ago look to be the same in concept.

boiseexecutivesuites.net/office_3rd.html (not a url on purpose, just copy/paste it into your address bar).

Thats a site i had to make a couple of months ago. On that specific page, the images and text change when thumbnails are moused over. The source shouldn't be hard to make sense of, let me know if you need any help with it.

[Hooch]

Thats the very effect I want.

But the text for each image is coming from the database. This needs to be dynamic since new images
could be added daily.

[rc69]

Well then just change the code you have to the following:

<table>
  <tr>
	<td>
	<?PHP
	$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 ORDER BY RAND() LIMIT 7") or die(mysql_error());
	while ($r = mysql_fetch_assoc($query))
		{
		echo '<a href="'.$file_full.'" rel="lightbox[all]" title="'.$r['info'].'" onmouseover="document.main.src=\''.$file_m.'\'; document.getElementById(\'text\').innerHTML=\''.$r['info'].'\';"><img src="'.$file_t.'" class="pic_border" /></a>';
	   $text = $r['info'];
		} ?>   
	</td>
  </tr>
  <tr>
	<td align="center" valign="top">	
	<img src="images/users/bg.jpg"  name="main" id="main" style="height:<?PHP echo $r['height']; ?>;" class="pic_border_larger" />
	<br />
	   <!-- ####Line below is what we are trying to make dynamic####-->
	<span id="text"><?PHP echo $text;?></span>
	</td>
  </tr>
</table>

The two things of note:
1. The addition of the <span> tag around the echoing of $text.
2. Removal of onmouseout() and moving of $text = $r['info'] to it's own line.

[Hooch]

Jackpot!!!
Thank you.

P.S the thumbs do not show for some reason, but you have the dynamic text field working.
I'll get the thumbs up eventually.

WooHoo!!

**EDIT**
Found a small problem.
When the page 1st loads the text field shows the info from the very last
thumbnail. When in reality there should be nothing.

hmmm....this is fun stuff

For now I'll load the last image so it looks correct

Edited by Hooch, 31 July 2008 - 05:03 PM.

[Hooch]

Is is possible to have a variable set in the mouseover too?

Set $var=0 at the beginning of the script.
Then on mouse over that $var=1

Once the mouseover happens then that $text will have some value.

		if ($var == 1){
		$text = $r['info'];
		}else{
		$text = '';
		}

[rc69]

If you're suggesting that a PHP variable be modified via JS, no, it's not possible in the traditional sense. AJAX does allow for some communication between PHP and JS, but not in the sense you are talking about.

If you could describe what you are trying to accomplish with this, we could probably recommend an alternative method.

[Hooch]

Thanks rc.
The last bit of code you so kindly made me was what I wanted.
It changes the text each time I mouse over a thumbnail.
But when you 1st load the page, and the 7 random thumbs are
displayed. The text for the last thumbnail is also displayed
even though no image has been moused over. FYI - I have a darked
out image to fill in where the full images do go, on page load.
My question is how do we stop the text from that last thumbnail
showing on page load?

Again to see what I mean have a look at the webpage.
linky

Note alot of the images only have "-" as text. (without the quotes)

[rc69]

Simple.

<table>
  <tr>
	<td>
	<?PHP
	$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 ORDER BY RAND() LIMIT 7") or die(mysql_error());
	while ($r = mysql_fetch_assoc($query))
		{
		echo '<a href="'.$file_full.'" rel="lightbox[all]" title="'.$r['info'].'" onmouseover="document.main.src=\''.$file_m.'\'; document.getElementById(\'text\').innerHTML=\''.$r['info'].'\';"><img src="'.$file_t.'" class="pic_border" /></a>';
		} ?>   
	</td>
  </tr>
  <tr>
	<td align="center" valign="top">	
	<img src="images/users/bg.jpg"  name="main" id="main" style="height:<?PHP echo $r['height']; ?>;" class="pic_border_larger" />
	<br />
	   <!-- ####Line below is what we are trying to make dynamic####-->
	<span id="text">-</span>
	</td>
  </tr>
</table>

Remove all reference to $text

[Hooch]

Wow, thank you very much.
My script is now working 100% the way
I want it.
Thank you again for taking the time to help me out.

Hooch

[Hooch]

Well, I finally found another problem.
Everything was perfect until I added another user and uploaded an image.
The image is displayed, but when you mouse over, it does not change the
larger image below. plus it does not change the text field.
I assume it's in the following code that the problem exists.

echo '<a href="'.$file_full.'" rel="lightbox[all]" title="'.$r['info'].'" onmouseover="document.main.src=\''.$file_m.'\'; document.getElementById(\'text\').innerHTML=\''.$r['info'].'\';"><img src="'.$file_t.'" class="pic_border" /></a>';

I am at a loss with the javascript you so kindly scripted for me rc69.

To see what I mean try the new test page
linky
Select the "most recent" button and the image is the 1st thumbnail.
This is the only image I have uploaded with the new account. And it's
the only one that does not work properly.
FYI if you select an image sort by username and only images from that
user are shown, you still get the same problem.

I'm still looking over my PHP, but not finding anything yet.

[Hooch]

I'm going to post the whole code un-edited, this may help

<?PHP 

session_start(); 

require_once 'includes/config.php';

$limit = 5;//This is the limit of thumbnails per query.

include 'record_referrals.php';//Record referrals

$_SESSION['active'] = 'Gallery';//Set session for active/live link

unset($_SESSION['page']);//This needs to be on every page you want recording a hit
$_SESSION['page'] = "gallery.php";

//Record a hit (for each page view) but make sure you have waited 5 minutes before recording another, from the same visitor
if (!isset($_SESSION['time-gallery.php']) || time() - $_SESSION['time-gallery.php'] > 300)
	{
	  $_SESSION['time-gallery.php'] = time();
	include 'zen_page_stats.php';
	} else {
	}
?>	
<!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" />
<title>Gallery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<?PHP
echo '<table width="800" height="" border="0" align="center" cellpadding="0" cellspacing="0" background="" style="background-repeat:no-repeat" bgcolor="#212121">';
include 'main_links.php';
?>
<table width="800" border="0" align="center" cellpadding="3" cellspacing="0" bgcolor="#000000">
  <tr>
	<td>&nbsp;</td>
	<td width="684" align="center" class="text_c_20">
	<?php
	switch ($_POST['page_mode'])
	{
	  case "Random":
		echo 'Random Images';
		break;
	  
	  case "Most recent":
		echo 'Our last '.$limit.' submissions';
		break;
		
	  case "By User":
		echo 'Images from <b>'.$_POST['username'].'</b>';
		break;
	}
	?>		
	</td>
  </tr>
  <tr>
	<td width="116" rowspan="3" align="left" valign="top" class="text_c_20">
	<form action="<?PHP $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
	<input type="hidden" name="page_mode" value="Most recent">
	<input type="submit" name="submit_button" value="Most recent">
	</form>
	<form action="<?PHP $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
	<input type="hidden" name="page_mode" value="Random">
	<input type="submit" name="submit_button" value="Random">
	</form>
	<br /><br />
	<form action="<?PHP $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
	<input type="hidden" name="page_mode" value="By User">
	<input type="submit" name="submit_button" value="By User">
	  <select name="username" class="">
		<option value="">Select Username</option> 
		<?PHP
		$query = mysql_query("SELECT * FROM `users` WHERE `level` = 1") or die(mysql_error());	
		while ($r = mysql_fetch_array($query)){
		echo "<option value=\"".$r['username']."\">".$r['username']."</option>";
		}
		?>		 
	  </select>		
	</form>
	</td>
	<td height="80" align="center" valign="middle">
	<?php
	switch ($_POST['page_mode'])
	{
	  case "Random":
		//Select random images from the DB
			$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 ORDER BY RAND() LIMIT ".$limit."") or die(mysql_error());
			while ($r = mysql_fetch_assoc($query))
				{
				$file_t = 'images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-T.jpg';//Thumb
				if ( $r['height'] < 400 )
					{
					//If the image is less than 400 pixels there will no middle image uploaded, so use the main uploaded image
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';
					}else{
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-M.jpg';//Medium image
					}
				$file_full ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';//Un-shrunk image
				echo '&nbsp;&nbsp;';
				?>
				<a href="<?PHP echo $file_full ?>" rel="lightbox[all]" title="<?PHP echo $r['info'];?>" onmouseover="document.main.src='<?PHP echo $file_m; ?>';document.getElementById('text').innerHTML='<?PHP echo $r['info'];?>';" onclick=""><img src="<?PHP echo $file_t; ?>" class="pic_border" /></a>
				<?PHP
				}
				echo '&nbsp;&nbsp;';
		break;
	  
	  case "Most recent":
			//Select most recent images from the DB
			$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 ORDER BY date DESC LIMIT ".$limit."") or die(mysql_error());
			while ($r = mysql_fetch_assoc($query))
				{
				$file_t = 'images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-T.jpg';//Thumb
				if ( $r['height'] < 400 )
					{
					//If the image is less than 400 pixels there will no middle image uploaded, so use the main uploaded image
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';
					}else{
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-M.jpg';//Medium image
					}
				$file_full ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';//Un-shrunk image
				echo '&nbsp;&nbsp;';
				?>
				<a href="<?PHP echo $file_full ?>" rel="lightbox[all]" title="<?PHP echo $r['info'];?>" onmouseover="document.main.src='<?PHP echo $file_m; ?>';document.getElementById('text').innerHTML='<?PHP echo $r['info'];?>';" onclick=""><img src="<?PHP echo $file_t; ?>" class="pic_border" /></a>
				<?PHP
				}
				echo '&nbsp;&nbsp;';
		break;
		
	  case "By User":
		 $user = $_POST['username'];
		//Select images from a specific user in the DB
			$query=mysql_query("SELECT * FROM `upload` WHERE `active` = 1 AND `username` = '".$user."' LIMIT ".$limit."") or die(mysql_error());
			while ($r = mysql_fetch_assoc($query))
				{
				$file_t = 'images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-T.jpg';//Thumb
				if ( $r['height'] < 400 )
					{
					//If the image is less than 400 pixels there will no middle image uploaded, so use the main uploaded image
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';
					}else{
					$file_m ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'-M.jpg';//Medium image
					}
				$file_full ='images/user/'.$r['username'].'/'.$r['username'].'-'.$r['date'].'.jpg';//Un-shrunk image
				echo '&nbsp;&nbsp;';
				?>
				<a href="<?PHP echo $file_full ?>" rel="lightbox[all]" title="<?PHP echo $r['info'];?>" onmouseover="document.main.src='<?PHP echo $file_m; ?>';document.getElementById('text').innerHTML='<?PHP echo $r['info'];?>';" onclick=""><img src="<?PHP echo $file_t; ?>" class="pic_border" /></a>
				<?PHP
				}
				echo '&nbsp;&nbsp;';
		break;
	}
	?>
	</td>
  </tr>
  <tr>
	<td>&nbsp;</td>
  </tr>
  <tr>
	<td height="430" align="center" valign="top">	
	<img src="images/users/bg.jpg"  name="main" id="main" style="height:<?PHP echo $r['height']; ?>;" class="pic_border_larger" />
	<br />
	<span id="text"></span></td>
  </tr>
  <tr>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
</table>
<?PHP						
include 'copyright_main.php';
?>
</body>
</html>

[rc69]

Lol, i'm going to say one thing: addslashes()

The issue is not with adding another user or uploading another picture, but with what you titled the picture.

p.s. I'm not laughing at you, it's so late i actually had to look at what was happening for a minute

Edited by rc69, 06 August 2008 - 12:39 AM.

[Hooch]

Gotcha.
Thank you.