Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 853

Oct 2nd, 2009

-1

Photo Gallery Caption Won't Change

Expand Post »

Im not sure if this is a php problem or javascript, but since the actual photo gallery is run by javascript I'll post it here, sorry if its not though.

Everything works fine but when I click on another image to change the main image the caption wont change with it.

javascript Syntax (Toggle Plain Text)
<script type="text/javascript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004-08 [url]www.cryer.co.uk[/url].
// Script is free to use provided this copyright header is included.function LoadGallery(pictureName,imageFile,titleCaption,captionText)
function LoadGallery(pictureName,imageFile)
{
	var picture = document.getElementById(pictureName);
	if (picture.filters)
	{
		picture.style.filter="blendTrans(duration=1)";
		picture.filters.blendTrans.Apply();
	}
	picture.src = imageFile;
	if (picture.filters)
	{
		picture.filters.blendTrans.Play();
	}
	document.getElementById(titleCaption).innerHTML=captionText;
}
            </script>
            <?
 
$con = mysql_connect('','','') or die('Error: ' . mysql_error());
mysql_select_db('') or die('Error: ' . mysql_error());
 
$colNum = 1;
 
$sql = "SELECT * FROM `` ORDER BY `id` DESC LIMIT 0, 1";
$query = mysql_query($sql,$con) or die('Error: ' . mysql_error());
$table = '<table align="center" border="0" width="20px" cellpadding="0" cellspacing="0">';
$table .= '<tr>';
$num = 1;
while ($r = mysql_fetch_array($query)) {
	$id=$r['id'];
	$name=$r['name'];
	$image=$r['image'];
	$caption=$r['caption'];
$table .=<<<HTML
<td>
<table border=0 width=20px cellpadding=2 cellspacing=0>
	<tr>
		<td align=center>
			<img src=$image height=400px alt=$name id=showreel>
			<div id="showcaption">$caption</div>
		</td>
	</tr>
</table>
</td>
HTML;
	if ($num == $colNum) {
		$table .= '</tr><tr>';
		$num = 0;
	}
$num++;
}
$table .= '</table>';
 
echo $table;
 
mysql_close($con);
 
?>
            </p>
 
                    <p class="century-gothic"><?
 
$con = mysql_connect('','','') or die('Error: ' . mysql_error());
mysql_select_db('') or die('Error: ' . mysql_error());
 
$colNum = 12;
 
$sql = "SELECT * FROM `` ORDER BY `id` DESC LIMIT 0, 100";
$query = mysql_query($sql,$con) or die('Error: ' . mysql_error());
$table = '<table align="center" border="0" width="20px" cellpadding="0" cellspacing="0">';
$table .= '<tr>';
$num = 1;
while ($r = mysql_fetch_array($query)) {
	$id=$r['id'];
	$name=$r['name'];
	$image=$r['image'];
	$caption=$r['caption'];
$table .=<<<HTML
<td>
<table border=0 width=20px cellpadding=2 cellspacing=0>
	<tr>
		<td align=center>
			<a href="#_self" onclick="LoadGallery('showreel','$image','showcaption','$caption')"><img src=$image height=30px alt=$name></a>
		</td>
	</tr>
</table>
</td>
HTML;
	if ($num == $colNum) {
		$table .= '</tr><tr>';
		$num = 0;
	}
$num++;
}
$table .= '</table>';
 
echo $table;
 
mysql_close($con);
 
?>
<script type="text/javascript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004-08 [url]www.cryer.co.uk[/url].
// Script is free to use provided this copyright header is included.function LoadGallery(pictureName,imageFile,titleCaption,captionText)
function LoadGallery(pictureName,imageFile)
{
	var picture = document.getElementById(pictureName);
	if (picture.filters)
	{
		picture.style.filter="blendTrans(duration=1)";
		picture.filters.blendTrans.Apply();
	}
	picture.src = imageFile;
	if (picture.filters)
	{
		picture.filters.blendTrans.Play();
	}
	document.getElementById(titleCaption).innerHTML=captionText;
}
            </script>
            <?

$con = mysql_connect('','','') or die('Error: ' . mysql_error());
mysql_select_db('') or die('Error: ' . mysql_error());

$colNum = 1;

$sql = "SELECT * FROM `` ORDER BY `id` DESC LIMIT 0, 1";
$query = mysql_query($sql,$con) or die('Error: ' . mysql_error());
$table = '<table align="center" border="0" width="20px" cellpadding="0" cellspacing="0">';
$table .= '<tr>';
$num = 1;
while ($r = mysql_fetch_array($query)) {
	$id=$r['id'];
	$name=$r['name'];
	$image=$r['image'];
	$caption=$r['caption'];
$table .=<<<HTML
<td>
<table border=0 width=20px cellpadding=2 cellspacing=0>
	<tr>
		<td align=center>
			<img src=$image height=400px alt=$name id=showreel>
			<div id="showcaption">$caption</div>
		</td>
	</tr>
</table>
</td>
HTML;
	if ($num == $colNum) {
		$table .= '</tr><tr>';
		$num = 0;
	}
$num++;
}
$table .= '</table>';

echo $table;

mysql_close($con);

?>
            </p>
                    
                    <p class="century-gothic"><?

$con = mysql_connect('','','') or die('Error: ' . mysql_error());
mysql_select_db('') or die('Error: ' . mysql_error());

$colNum = 12;

$sql = "SELECT * FROM `` ORDER BY `id` DESC LIMIT 0, 100";
$query = mysql_query($sql,$con) or die('Error: ' . mysql_error());
$table = '<table align="center" border="0" width="20px" cellpadding="0" cellspacing="0">';
$table .= '<tr>';
$num = 1;
while ($r = mysql_fetch_array($query)) {
	$id=$r['id'];
	$name=$r['name'];
	$image=$r['image'];
	$caption=$r['caption'];
$table .=<<<HTML
<td>
<table border=0 width=20px cellpadding=2 cellspacing=0>
	<tr>
		<td align=center>
			<a href="#_self" onclick="LoadGallery('showreel','$image','showcaption','$caption')"><img src=$image height=30px alt=$name></a>
		</td>
	</tr>
</table>
</td>
HTML;
	if ($num == $colNum) {
		$table .= '</tr><tr>';
		$num = 0;
	}
$num++;
}
$table .= '</table>';

echo $table;

mysql_close($con);

?>

The website Page: http://collmillsg.com/showreel.php

Similar Threads

Photoshop, Javascript Photo Gallery Help in JavaScript / DHTML / AJAX
Photo Gallery in PHP
Photoshop web photo gallery to dreamweaver in Site Layout and Usability
Photo Gallery. in PHP
ecommerce online photo gallery in eCommerce

Scottmandoo

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

61 posts
since Feb 2008

Permalink

Oct 2nd, 2009

Re: Photo Gallery Caption Won't Change

Hi there,

At first glance I notice the original function is function LoadGallery(pictureName,imageFile,titleCaption,captionText) while yours is function LoadGallery(pictureName,imageFile) . Yet on line 88 you call the LoadGallery function with 4 parameters <a href="#_self" onclick="LoadGallery('showreel','$image','showcaption','$caption')"> .

The JavaScript errors you keep getting on your site do mention the lack of a 'titleCaption' variable so perhaps it's a quick fix.

Again, try replacing

JavaScript Syntax (Toggle Plain Text)
function LoadGallery(pictureName,imageFile)
function LoadGallery(pictureName,imageFile)

with

JavaScript Syntax (Toggle Plain Text)
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
function LoadGallery(pictureName,imageFile,titleCaption,captionText)

Hope that helps.

Good luck,

Traevel

Traevel

Reputation Points: 16

Solved Threads: 16

Light Poster

Offline

38 posts
since May 2009

Permalink

Oct 3rd, 2009

Re: Photo Gallery Caption Won't Change

Hey thanks, yeah that was it.

Scottmandoo

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

61 posts
since Feb 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: document.getElementById not working in IE. Why?

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Jscript Session time out

DaniWeb Message

Cancel Changes

User Name
Password