Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: display a text under each image in OO_CMotion Image Gallery

  1. #1
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default display a text under each image in OO_CMotion Image Gallery

    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.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    You can add a span element inside the a tag:
    Code:
    <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:
    Code:
    #motiongallery a span{
    display:block;
    float:left;
    }
    ...you can style it the way you want.

    Hope that helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    ...and where's your ammendment?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    nuwaninfo (12-17-2008)

  6. #5
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    $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>';

  7. #6
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

  8. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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).
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  9. #8
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

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

  10. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  11. The Following User Says Thank You to rangana For This Useful Post:

    nuwaninfo (12-17-2008)

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's an alternative method:

    Code:
    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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    nuwaninfo (12-17-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •