display a text under each image in OO_CMotion Image Gallery

[nuwaninfo]

1) Script Title: OO_CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem: I want to display a text(image name) under each image

I shall be much appreciate if any one can help to solve this.

Thanks.

[rangana]

You can add a span element inside the a tag:

<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1><span>Caption for Image</span></a>

...and add this on your CSS:

#motiongallery a span{
display:block;
float:left;
}

...you can style it the way you want.

Hope that helps.

[nuwaninfo]

Thank you for your solution. But it did not work.

Following is the part of the motion gallary i am using

/***********************************************
* OO_CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/s...ad.php?t=11839 by jschuer1 8/5/06
* Object Oriented update 9/19/06
***********************************************/

// Set message to show at end of gallery(s). Enter "" to disable message.
var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';

function get_galary_1() {
//declare gallery's name:
var gallery=new Array();
// Use a space character between each image for this gallery? (use 1 for yes, 0 for no):
gallery.usespace=1;
//define gallery's image train:
gallery[0]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a>';
gallery[1]='<a href="dynamicbook1.gif" onclick="return enlargeimage(this.href, 300, 300);"><img src="photo2.jpg" border="1"></a>';
gallery[2]='<a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a>';

gallery[3]='<a href="#"><img src="photo4.jpg" border="1"></a>';
gallery[4]='<a href="#"><img src="photo5.jpg" border="1"></a>';
gallery[5]='<a href="#"><img src="photo6.jpg" border="1"></a>';
gallery[6]='<a href="#"><img src="photo7.jpg" border="1"></a>';
gallery[7]='<a href="#"><img src="photo8.jpg" border="1"></a>';
gallery[8]='<a href="#"><img src="photo9.jpg" border="1"></a>';
}
//optional additional gallery names, image trains, and usespace properties may be used:
//declare gallery's name:
var gallery2=new Array();
// Use a space character between each image for this gallery? (use 1 for yes, 0 for no):
gallery2.usespace=0;
//define gallery's image train:
gallery2[0]='<a href="photo9_lrg.jpg" onclick="return enlargeimage(this.href, 319, 494);"><img src="photo9.jpg" border="1"></a>';
gallery2[1]='<a href="photo8_lrg.jpg" onclick="return enlargeimage(this.href, 335, 577);"><img src="photo8.jpg" border="1"></a>';
gallery2[2]='<a href="http://www.dynamicdrive.com"><img src="photo7.jpg" border="1"></a>';
gallery2[3]='<a href="#"><img src="photo6.jpg" border="1"></a>';
gallery2[4]='<a href="#"><img src="photo5.jpg" border="1"></a>';
gallery2[5]='<a href="#"><img src="photo4.jpg" border="1"></a>';
gallery2[6]='<a href="#"><img src="photo3.jpg" border="1"></a>';
gallery2[7]='<a href="#"><img src="photo2.jpg" border="1"></a>';
gallery2[8]='<a href="#"><img src="photo1.jpg" border="1"></a>';

//function used optionally to enlarge an image. Change as desired:
function enlargeimage(path, optWidth, optHeight){
if(!document.body.filters)
if(thewin&&thewin.name=='cwin'&&window==thewin.opener)thewin.close();
var actualWidth=typeof optWidth!="undefined" ? optWidth : 600; //set 600 to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : 500; //set 500 to default height
actualWidth+=window.opera? 0 : 20, actualHeight+=window.opera? 0 : 20;
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable,status";
thewin=window.open(path,"cwin", winattributes);
if(document.body.filters)
thewin.resizeTo(actualWidth+12, actualHeight+70);
thewin.focus();
onunload=function(){if(thewin&&thewin.name=='cwin')thewin.close();};
return false;
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById, cgals=[], thewin=null;

function cmotiongallery(gallery, rest, maxs, maxw, startp, width, height, c){
if(!iedom)
return;
this.gallery=gallery;
this.usespace=this.gallery.usespace? ' ' : '';
this.width=/%/.test(width)? width : parseInt(width)+'px';
this.height=height;
this.c=c? 'margin:0 auto;' : '';
this.loadedyes=0;
this.movestate='';
this.scrollspeed=0;
this.galid=cgals.length;
cgals[cgals.length]=this;
this.rest=rest;
this.maxs=maxs;
this.maxw=maxw;
this.startpos=startp;

for (var i_tem = 0; i_tem < this.gallery.length; i_tem++)
this.gallery[i_tem]=!/on[cC]lick/.test(this.gallery[i_tem])? this.gallery[i_tem].replace(/href="#"/, 'href="#" onclick="return false;"') : this.gallery[i_tem];

document.write('<div class="motioncontainer" id="motioncontainer'+this.galid+'" style="'+this.c+'width:'+this.width+';height:'+this.height+'px;position:relative;left:0;top:0;overflow:hidden;">\n'+
'<div id="motiongallery'+this.galid+'" style="position:absolute;left:0;top:0;white-space: nowrap;">\n'+
'\n'+
'<nobr id="trueContainer'+this.galid+'">'+this.gallery.join(this.usespace)+'<\/nobr>\n'+
'\n'+
'<\/div>\n'+
'<\/div>')
this.fillup();
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

cmotiongallery.prototype.creatediv=function(){
this.statusdiv=document.createElement("div")
this.statusdiv.setAttribute("id","statusdiv"+this.galid)
this.statusdiv.className="statusdiv";
document.body.appendChild(this.statusdiv)
this.statusdiv=document.getElementById("statusdiv"+this.galid)
this.statusdiv.innerHTML=endofgallerymsg
}




Following is where i am using the above code

$get_thumb_sql = "SELECT portfolio_id,
portfolio_url
FROM portfolio
WHERE portfolio_status = 'Ongoing Portfolios'
ORDER BY portfolio_name ASC";

$get_thumb_res = mysql_query($get_thumb_sql);

$show_portfolio = '<div>';
$show_portfolio .= '<div> <nobr id="trueContainer">';

$count = 0;
?>
<script type="text/javascript">
var gallery1 = new Array();
var count = <?=$count?>;
var i = 0;
<?php
while ($get_thumb_row = mysql_fetch_assoc($get_thumb_res)) {
//$show_portfolio .= '<a href="get_portfolio_2.php?id=' . $get_thumb_row['portfolio_id'] . '" rel="lightbox[slide11]" caption="Visit Site - http://www.weblook.asia/sample/ua/"><img src="get_portfolio.php?id=' . $get_thumb_row['portfolio_id'] . '" /></a>';

$get_thumb_row['portfolio_url']='<a href=http://www.'.$get_thumb_row['portfolio_url'].' class=black target=_blank>'. 'www.' . $get_thumb_row['portfolio_url'].'</a>';
$ongoing = '<div><a href="get_portfolio_2.php?id=' . $get_thumb_row['portfolio_id'] . '" rel="lightbox[slide1]" caption="Visit Site - ' . $get_thumb_row['portfolio_url'] . '"><img src="get_portfolio.php?id=' . $get_thumb_row['portfolio_id'] . '" border="0" /></div><div><span>Caption for Image</span></div>';

?>

gallery1[<?php print($count) ?>] = <?=$ongoing?>;

<?php
$count++;
}

?>
new cmotiongallery(gallery1, 6, 7, 1000, 2, '50%', 225, 'c');
</script>

[rangana]

...and where's your ammendment?

[nuwaninfo]

$ongoing = '<a href="get_portfolio_2.php?id=' . $get_thumb_row['portfolio_id'] . '" rel="lightbox[slide1]" caption="Visit Site - ' . $get_thumb_row['portfolio_url'] . '"><img src="get_portfolio.php?id=' . $get_thumb_row['portfolio_id'] . '" border="0" /><span>Caption for Image</span></a>';

[nuwaninfo]

This is link to site:

http://www.weblook.com/demo/portfolio/our_portfolio.php

[rangana]

I'm seeing it. Try to add the CSS as instructed on post#2.

In case you were not able to see the caption, try to do a hard refresh (CTRL+F5).

[nuwaninfo]

i added css as you have instructed. but nothing has changed

[rangana]

Your page isn't well-formed (yet).

Try to visit it in firefox and view the page's source.

On line 225 and beyond, some scripts (Javascript) is not parsed correctly.

[jscheuer1]

Here's an alternative method:

var gallery=new Array();
 // Use a space character between each image for this gallery? (use 1 for yes, 0 for no):
gallery.usespace=1;
 //define gallery's image train:
gallery[0]='<table><tr><td><a href="dynamicbook1.gif" onclick="return enlargeimage(this.href);"><img src="photo1.jpg" border="1"></a><br>Hello!</td>';
gallery[1]='<td><a href="dynamicbook1.gif" onclick="return enlargeimage(this.href, 300, 300);"><img src="photo2.jpg" border="1"></a><br>How Are</td>';
gallery[2]='<td><a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a><br>You</td>';
gallery[3]='<td><a href="#"><img src="photo4.jpg" border="1"></a><br>You All</td>';
gallery[4]='<td><a href="#"><img src="photo5.jpg" border="1"></a><br>Doing</td>';
gallery[5]='<td><a href="#"><img src="photo6.jpg" border="1"></a><br>This</td>';
gallery[6]='<td><a href="#"><img src="photo7.jpg" border="1"></a><br>Fine</td>';
gallery[7]='<td><a href="#"><img src="photo8.jpg" border="1"></a><br>Day This</td>';
gallery[8]='<td><a href="#"><img src="photo9.jpg" border="1"></a><br>Morning</td></tr></table>';

You will also have to increase the height to allow room for the added line of text:

<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////////
/*                              Parameter Definitions:
/////////////////////////////////////////////////////////////////////////////////////////
* gallery_array_name - name of the array of the gallery's img train (object name, ex: gallery2)
* rest_area_size - size of the neutral area in the center of the gallery in pixels (integer, ex: 6)
* maxspeed - top speed of the gallery (integer)
* maxwidth - maximum width of the gallery in pixels (integer) must be less than the width of the image train
* startposition - 1 for left start, 0 for right, 2 for center (integer)
* width - width of the gallery in pixels(integer) or percent ('string' with % sign, ex: '75%')
* height - height of the gallery in pixels (integer)
* optional_centering - use [, 'c'] for centering, skip this parameter for no centering ('string')
*****************************************************************************************/

//new cmotiongallery(gallery_array_name, rest_area_size, maxspeed, maxwidth, startposition, width , height, optional_centering)
new cmotiongallery(gallery, 6, 7, 1000, 2, '50%', 255, 'c')
</script>