Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Titles in iframe image galleries

    Hello all,

    I have created a static iframe image gallery for my website. You click on the thumbnails to see larger images in the target frame. Link to my site:

    http://www.catherinerondeau.com/phot...ie-enfants.php

    I would like to see the titles of my images appear UNDER the target frame. As it is, they only appear when you hover over the thumbnails.

    Does anyone know how to do this?

    Here's a sample of my iframe code :

    Code:
    <table style="width: 100%; height: 650px" "="" border-collapse:="" collapse"="" summary="photographie montreal" title="La porte, © 2011" align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    
    <tbody>
    <tr valign="top">
    <td width="100%">
    <iframe name="frmPhotos" src="photo-11.jpg" frameborder="no" height="650" scrolling="no" width="100%"></iframe><br />
    <div>&nbsp;</div></td>
    
    <td valign="top">
    <table style="border-collapse: collapse" summary="thumbnails" align="right" border="0" bordercolor="#000000" cellpadding="3" cellspacing="0">
    <tbody>
    
    <tr valign="top">
    <td width="50"><a href="photo-11.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La porte | © 2011"><img alt="" src="iphoto-11.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/photo.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Clair de lune | © 2011"><img alt="" src="images/photo.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="iphoto-7.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Invisibilité | © 2011"><img alt="" src="iphoto-7.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="iphoto-6.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Happy End? | © 2011"><img alt="" src="photo-6.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/photo-2.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La soupe | © 2011"><img alt="" src="iphoto-2.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="iphoto-8.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Saute-mouton | © 2011"><img alt="" src=photo-8.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    And so on...
    Until the final lines:

    Code:
    <td width="50"><a href="photo-12.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Petit Chaperon Rouge | © 2011"><img alt=" " =""="" src="photo.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a><br />
    </td></tr>
    <tr valign="top"></tr>
    <tr valign="top"></tr></tbody></table></td></tr></tbody></table></div></div></td></tr></tbody></table>&nbsp;</td></tr></tbody></table>&nbsp;</div></div></td></tr></tbody></table></div></div></td></tr></tbody></table>
    Many thanks in advance for your kind help!
    Miss C

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    I think you could use that empty <div>&nbsp;</div> located under your <iframe> to hold an image title (make sure that iframe height doesn't push this title to bottom). And add a quick and dirty javascript like below (in red text):
    Code:
    <a title="La porte | © 2011 Catherine Rondeau "
      onmouseup="self.scroll(0,0)" 
      target="frmPhotos" 
      oncontextmenu="return false" 
      href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" 
      onclick="window.frames['frmPhotos'].parentNode.getElementsByTagName('div').childNodes[0].nodeValue=this.title">
        <img ... />
    </a>
    But if I may suggest: unless you are creating a "spreadsheet" on your HTML page, avoid <table>.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hdewantara,

    Thank you for your response. However, when I inserted your suggested line, no title appears. In fact, there is no change at all.

    Other suggestions anyone?

    As for the tables, the program I use to help me build my pages is based on tables.

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Sorry Miss C,
    That additional red line should be like this:
    PHP Code:
    onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" 
    Hendra

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Dear Hendra,

    Thank you again for your new attempt at helping me. Howerver, it still doesn't work.

    I tried inserting the line at a few different places on the HTML side of my page, but it never shows up on the design side. Nothing new at all appears. And when I go back and check the HTML side after having saved, strangely, the line I inserted is doubled (appears twice side by side).

    Any clue as to what is going on?

    Cheers from a foggy Halloween morning in Montreal.

    Miss C.

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Okay, let's see if this page is what you're after:
    http://smokingscript.com/test/miss_c...ie-enfants.htm

    It's a clone of your page, and all I did was adding that onclick lines between line #195 to #211. Tested, and seems to work well on IE8, FF7, Safari5.

    Doubled? What editor or CMS are you using?

  • Users who have thanked hdewantara for this post:

    Miss Coucou (11-02-2011)

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hendra,

    Wow, what you achieved is pretty much what I am looking for! Ideally, I would prefer the title centered and not all that empty space between the image and the title for the horizontal images. Any way around that?

    But for now, I can't even achieve what you did. I am using an editor called RVGlobalSoft Site Builder. The program allows me to build pages, based on table layouts, withtout directly writing HTML code. But it also gives me access to the HTML code, allowing me to edit as I wish. But for some reason, your suggested lines are not taken into account.

    Here is what my entire HTML page looks like with your suggested lines included :

    Code:
    <table style="width: 1020px; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalisés " align="left" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr>
    <td valign="top">
    <table style="width: 600px; border-collapse: collapse" summary="Catherine Rondeau photographe Montreal portrait photomontage fantaisiste retouche restauration photo trucage" align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div><a style="text-decoration: none; cursor: default" href="e9a798a97157776ea6d0d7161d3202ef.php" title=""><img alt="" title="" src="/3rdparty/rvsitebuilder/project/6fe1f3f0de9955ddecf9d4ab4f3be4b2/images/Solos/Catherine-Rondeau-Photographe-Montreal-Portrait-Imaginaire-Fantaisie-Photomontage-Trucage-Retouche-600X108.jpg" oncontextmenu="return false" border="0" height="108" width="600" /></a></div></td></tr></tbody></table><br />
    </td></tr>
    <tr valign="top">
    <td>
    <div>
    <div>
    <table style="width: 1015px; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalisés" align="left" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="170">
    <div>
    <div>
    <table style="border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalises " align="left" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0" height="100%" width="170">
    <tbody>
    <tr valign="top">
    <td>
    <div><a href="3e39a4ee527d0960e3b1ed3c833f65ae.php" title=""><span><font style="font-size: small" face="Verdana"><strong>Accueil</strong></font></span></a></div></td></tr>
    <tr valign="top">
    <td>
    <div><font style="font-size: small"><strong><a href="a2edb08e012d8c413e37bbc484dae4be.php" title=""><span>À propos</span></a> <br />
    </strong></font></div></td></tr>
    <tr valign="top">
    <td>
    <div><font style="font-size: small"><a href="79d49557d1dd4fc87585f2fc5b4cee6b.php" title=""><font color="#9b9b9b"><span><strong>Portfolios</strong></span></font></a><strong> <br />
    </strong></font></div></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="ac0ea9cdcd5576a347da1bc1a4952f0d.php" title=""><font color="#9b9b9b">Portraits</font></a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <font color="#708f70"><strong>Enfance</strong></font><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="c40cb3a5f12e886b8c691baa96d80d92.php" title="">Cartes et faire-part</a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="73766feb36a4fa4f1b33b96535da6334.php" title="">Lieux et choses</a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="6a06a38de3a81b10b088c8d0255d091c.php" title="">Services</a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="1be4c332e5ec74ae35b64c2bb5c9cb98.php" title="">Tirages</a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="435f7a65bcec8781c212cc1f8badae4f.php" title=""><span>Me contacter</span></a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="http://www.catherinerondeau.com/photographer-montreal/" title=""><span>English</span></a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><br />
    </td></tr></tbody></table>&nbsp;</div></div>
    <div>
    <div>
    <div>&nbsp;</div></div></div></td>
    <td width="100%">
    <div>
    <div>
    <table style="width: 100%; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal quebec fantaisiste poetique portrait fantastique photomontage
    retouche artistique enfant restauration carte faire-part personnalisés " align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div>
    <table style="width: 99%; border-collapse: collapse" summary="Catherine Rondeau photographe montreal quebec photomontage poetique surrealiste retouche photo artistique" align="right" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div><strong><font style="font-size: large">La photographie d'enfants<br />
    </font></strong></div></td></tr>
    <tr align="justify">
    <td height="65" valign="top">
    <p><font style="font-size: medium">Empreintes de poésie et de candeur expressive, mes photographies d'enfants invitent à des plongées dans la rêverie
    grouillante et bigarrée de l'imaginaire enfantin.</font></p></td></tr></tbody></table></div></td></tr>
    <tr valign="top">
    <td>
    <div align="center"></div>
    <table style="width: 100%; border-collapse: collapse" summary="Catherine
    Rondeau photographie montreal quebec portrait fantaisiste photomontage
    poetique retouche photo restauration surrealiste " align="center" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0">
    <tbody></tbody>
    <tbody>
    <tr valign="top">
    <td>
    <div>
    <div>
    <table style="width: 100%; height: 650px" "="" border-collapse:="" collapse"="" summary="catherine rondeau photographie portrait montreal" title="La porte, © 2011 Catherine Rondeau" align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="100%">
    <iframe name="frmPhotos" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" frameborder="no" height="650" scrolling="no" width="100%"></iframe><br />
    <div>&nbsp;</div></td>
    <td valign="top">
    <table style="border-collapse: collapse" summary="catherine rondeau mini portraits" align="right" border="0" bordercolor="#000000" cellpadding="3" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La porte"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Clair de lune"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-7.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Invisibilité"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-7.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-6.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Happy End?"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-6.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-2.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La soupe"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-2.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-8.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Saute-mouton"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-8.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-5.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Papa loup"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-5.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-10.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Le pouvoir"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-10.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-13.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Les Bulles"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-13.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-14.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="L'interdit"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-14.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-3.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La balaçoire"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-3.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-4.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La fée"><img alt=" " =""="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-4.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-12.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Petit Chaperon Rouge"><img alt=" " =""="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-12.jpg" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title" border="0" height="50" width="50" /></a><br />
    </td></tr>
    <tr valign="top"></tr>
    <tr valign="top"></tr></tbody></table></td></tr></tbody></table></div></div></td></tr></tbody></table>&nbsp;</td></tr></tbody></table>&nbsp;</div></div></td></tr></tbody></table></div></div></td></tr></tbody></table>
    Could you possibly send me yours so I can compare?

    Thanks again!
    Warm wishes,
    Miss C.

  • #8
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    RVGlobalSoft Site Builder? Nice to know another CMS, beside Wordpress. I myself used to use Notepad++. It's more developer-friendly

    And by the way, that code you've posted isn't a complete HTML page. Have a look at attachment. It is the clone's source (for comparing) I have saved from my FF.

    As for centering and avoiding empty space, I couldn't do much as long that <iframe> stays there. This element is hard to be styled, compared to an <img>.

    Wait... I think I understand why RVGlobalSoft uses <iframe> instead of <img>. One possible reason is to make your page browse-able for guests/ visitors whose browser isn't equipped with javascript capability.

    It's tough choice, but AFAIK most popular, modern browsers today has its javascript enabled.

    Warm regards,
    Hendra
    Last edited by hdewantara; 05-29-2013 at 08:36 AM.

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi again Hendra,

    I wasn't able to completely open your file. The page opened in Firefox but without the source code in the center. I would send you a screen shot but I don't see a way to include an attachment to this post. Perhaps you could copy the source code in your next reply?

    BTW, do you happen to know another way I could achieve the same look for my image gallery without using iframes? I don't think there's a compatibility issue between javascript and my Site Builder. I'm the one who built the iframe because someone suggested I do it that way. I like the general look. I just wish I could get the titles to appear centered directly underneath the images.

    Thanks again for your time!
    Warm wishes,
    Miss C

  • #10
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    I'm the one who built the iframe because someone suggested I do it that way...
    Ohh.. ok.

    BTW, do you happen to know another way I could achieve the same look for my image gallery without using iframes? I don't think there's a compatibility issue between javascript and my Site Builder.
    Okay, I'll build an example for you soon.

    BTW, below is a table part of the clone which looks like the one you've posted.
    Note that all the PHP filenames in href differ from yours.

    Code:
    <table style="width: 1020px; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalisés " align="left" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr>
    <td valign="top">
    <table style="width: 600px; border-collapse: collapse" summary="Catherine Rondeau photographe Montreal portrait photomontage fantaisiste retouche restauration photo trucage" align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div><a style="text-decoration: none; cursor: default" href="photographie-enfants.php" title=""><img alt="" title="" src="images/Solos/Catherine-Rondeau-Photographe-Montreal-Portrait-Imaginaire-Fantaisie-Photomontage-Trucage-Retouche-600X108.jpg" oncontextmenu="return false" border="0" height="108" width="600" /></a></div></td></tr></tbody></table><br />
    </td></tr>
    <tr valign="top">
    <td>
    <div>
    <div>
    <table style="width: 1015px; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalisés" align="left" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="170">
    <div>
    <div>
    <table style="border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal
    portrait photomontage
    retouche artistique enfant restauration carte faire-part personnalises " align="left" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0" height="100%" width="170">
    <tbody>
    <tr valign="top">
    <td>
    <div><a href="index.php" title=""><span><font style="font-size: small" face="Verdana"><strong>Accueil</strong></font></span></a></div></td></tr>
    <tr valign="top">
    <td>
    <div><font style="font-size: small"><strong><a href="%C3%A0-propos.php" title=""><span>À propos</span></a> <br />
    </strong></font></div></td></tr>
    <tr valign="top">
    <td>
    <div><font style="font-size: small"><a href="photographie.php" title=""><font color="#9b9b9b"><span><strong>Portfolios</strong></span></font></a><strong> <br />
    </strong></font></div></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="photographie-portraits.php" title=""><font color="#9b9b9b">Portraits</font></a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <font color="#708f70"><strong>Enfance</strong></font><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="portfolio-cartes-et-faire-part.php" title="">Cartes et faire-part</a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font face="Verdana">&nbsp; <a href="photographie-lieux-et-choses.php" title="">Lieux et choses</a><br />
    </font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="services.php" title="">Services</a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="tirages.php" title="">Tirages</a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="me-contacter.php" title=""><span>Me contacter</span></a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><font style="font-size: small"><strong><a href="http://www.catherinerondeau.com/photographer-montreal/" title=""><span>English</span></a><br />
    </strong></font></td></tr>
    <tr>
    <td valign="top"><br />
    </td></tr></tbody></table>&nbsp;</div></div>
    <div>
    <div>
    <div>&nbsp;</div></div></div></td>
    <td width="100%">
    <div>
    <div>
    <table style="width: 100%; border-collapse: collapse" summary="Catherine Rondeau photographe photographie montreal quebec fantaisiste poetique portrait fantastique photomontage
    retouche artistique enfant restauration carte faire-part personnalisés " align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div>
    <table style="width: 99%; border-collapse: collapse" summary="Catherine Rondeau photographe montreal quebec photomontage poetique surrealiste retouche photo artistique" align="right" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td>
    <div><strong><font style="font-size: large">La photographie d'enfants<br />
    </font></strong></div></td></tr>
    <tr align="justify">
    <td height="65" valign="top">
    <p><font style="font-size: medium">Empreintes de poésie et de candeur expressive, mes photographies d'enfants invitent à des plongées dans la rêverie
    grouillante et bigarrée de l'imaginaire enfantin.</font></p></td></tr></tbody></table></div></td></tr>
    <tr valign="top">
    <td>
    <div align="center"></div>
    <table style="width: 100%; border-collapse: collapse" summary="Catherine
     Rondeau photographie montreal quebec portrait fantaisiste photomontage
    poetique retouche photo restauration surrealiste " align="center" border="0" bordercolor="#000000" cellpadding="5" cellspacing="0">
    <tbody></tbody>
    <tbody>
    <tr valign="top">
    <td>
    <div>
    <div>
    <table style="width: 100%; height: 650px" "="" border-collapse:="" collapse"="" summary="catherine rondeau photographie portrait montreal" title="La porte, © 2011 Catherine Rondeau" align="center" border="0" bordercolor="#000000" cellpadding="2" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="100%">
    <iframe name="frmPhotos" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" frameborder="no" height="650" scrolling="no" width="100%"></iframe><br />
    <div>&nbsp;</div></td>
    <td valign="top">
    <table style="border-collapse: collapse" summary="catherine rondeau mini portraits" align="right" border="0" bordercolor="#000000" cellpadding="3" cellspacing="0">
    <tbody>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La porte | © 2011 Catherine Rondeau " onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Clair de lune | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-7.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Invisibilité | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-7.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-6.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Happy End? | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-6.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-2.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La soupe | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-2.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-8.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Saute-mouton | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-8.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-5.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Papa loup | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-5.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-10.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Le pouvoir | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-10.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-13.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Les Bulles | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-13.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-14.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="L'interdit | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-14.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-3.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La balaçoire | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-3.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td>
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-4.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="La fée | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt=" " =""="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-4.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a></td></tr>
    <tr valign="top">
    <td width="50"><a href="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-12.jpg" oncontextmenu="return false" target="frmPhotos" onmouseup="self.scroll(0,0)" title="Petit Chaperon Rouge | © 2011 Catherine Rondeau" onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title"><img alt=" " =""="" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-12.jpg" oncontextmenu="return false" border="0" height="50" width="50" /></a><br />
    </td></tr>
    <tr valign="top"></tr>
    <tr valign="top"></tr></tbody></table></td></tr></tbody></table></div></div></td></tr></tbody></table>&nbsp;</td></tr></tbody></table>&nbsp;</div></div></td></tr></tbody></table></div></div></td></tr></tbody></table>
    And

  • #11
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Okay, here it is...
    Have your files backup-ed first

    1) How do you usually include a .js (javascript) file using Site Builder?
    If you could make one, then edit that file to have content like following:
    PHP Code:
        function onIconClicked(me){
            
    document.getElementById('frmPhotos').src me.getElementsByTagName('img')[0].src;
            
    document.getElementById('caption').childNodes[0].nodeValue me.title;
        } 
    If you couldn't, then you have to add these lines to photographie-enfants.php, before or after the table:
    PHP Code:
    <script type="text/javascript">
        function 
    onIconClicked(me){
            
    document.getElementById('frmPhotos').src me.getElementsByTagName('img')[0].src;
            
    document.getElementById('caption').childNodes[0].nodeValue me.title;
        }
    </script> 
    2) In photographie-enfants.php, change the line
    PHP Code:
    <iframe name="frmPhotos" src="images/Enfance/..." frameborder="no" height="650" scrolling="no" width="100%"></iframe>
    </
    br><div>&nbsp;</div
    into
    PHP Code:
    <img id="frmPhotos" src="images/Enfance/..." alt="" />
    <
    br /><div id="caption" style="text-align:center">&nbsp;</div
    .

    3) And for each lines which look like:
    PHP Code:
    <a href="images/Enfance/..." oncontextmenu="return false" target="frmPhotos" 
      
    onmouseup="self.scroll(0,0)" title="La porte | © 2011 Catherine Rondeau " 
      
    onclick="document.getElementsByTagName('iframe')[0].parentNode.getElementsByTagName('div')[0].childNodes[0].nodeValue=this.title">
      <
    img alt="" src="images/Enfance/..." oncontextmenu="return false" border="0" height="50" width="50" />
    </
    a
    Change each of them into:
    PHP Code:
    <a href="javascript:void(0)" oncontextmenu="return false"
      
    title="La porte | © 2011 Catherine Rondeau " onclick="onIconClicked(this)">
      <
    img alt="" src="images/Enfance/..." oncontextmenu="return false" border="0" height="50" width="50" />
    </
    a
    If this doesn't work, then you might want to post this issue to CodingForums' javascript subforum: http://www.codingforums.com/javascript-programming/

    Let me know.
    Hendra
    Last edited by hdewantara; 11-02-2011 at 02:53 PM.

  • Users who have thanked hdewantara for this post:

    Miss Coucou (11-02-2011)

  • #12
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile

    Wow! It worked!!
    You're A-MA-ZING Hendra.
    I'll now be able to build all the image galleries for my site this way.

    Link to see the result: http://www.catherinerondeau.com/phot...ie-enfants.php

    Without wanting to abuse your kindness, there are just two little details I'd like to fix, when you have the time. I tried on my own without sucess.

    1. As it is, when you first arrive on the portfolio page, there is an empty space where the images appear after clicking on the thumbnails. That empty space looks rather odd. Would there be a way to have the first thumbnail image appear instead?

    2. Would it be possible to add just a bit more space between the images and the titles?

    Thanks again for your generous help.

    Warm regards,
    Miss C
    Last edited by Miss Coucou; 11-02-2011 at 05:25 PM.

  • #13
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Okay
    I'm glad that works well.

    //////////
    1. As it is, when you first arrive on the portfolio page, there is an empty space where the images appear after clicking on the thumbnails. That empty space looks rather odd. Would there be a way to have the first thumbnail image appear instead?
    It's a blank image because you haven't supplied a valid image file in src attribute of <img> and I also should've written step 2) as (see red text below):
    Code:
    <img id="frmPhotos" src="images/Enfance/Catherine-Rondeau-Photographe-Montreal-Portraits-Enfants-Photomontage-Retouche-11.jpg" alt="" /><br />
    <div id="caption" style="text-align: center">&nbsp;</div>
    /////////
    2. Would it be possible to add just a bit more space between the images and the titles?
    Of course. Look at the <div> element after <img>. Currently it only has just 1 custom style attribute, the
    Code:
    style="text-align:center;"
    which means to center text within div.

    To have a space just add a top margin to the <div>, so now it would look like
    Code:
    style="text-align:center; margin-top:10px;"
    //////////
    What we have done so far is called "inline" styling. However, it is a good practice to separate styling from HTML (structuring). Well, this one is a good start -> http://www.w3schools.com/css/. Don't worry... you could always apply styles, whether they are separate, or inline.

    Good luck!
    Hendra
    Last edited by hdewantara; 11-02-2011 at 09:59 PM.

  • Users who have thanked hdewantara for this post:

    Miss Coucou (11-03-2011)

  • #14
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Montreal, Canada.
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Excellent!

    I can't thank you enough Hendra for taking the time to help me all the way. And for your friendly and clear instructions.

    I should have spotted that invalid image file attribute on my own. Sorry. I'm still a newbie at all this.

    But thanks to you, I've learned quite a bit just in the past couple of days. And I'll definitely check out the site you recommended.

    Let me know if you ever need some retouching done on a photograph, I'd be glad to return the favour.

    Best wishes,
    Miss C
    Last edited by Miss Coucou; 11-03-2011 at 01:07 AM.


  •  

    Tags for this Thread

    Posting Permissions

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