www.webdeveloper.com
Results 1 to 7 of 7

Thread: I want to disply a photo, selected in one FRAME, in an adjacent FRAME.

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    I want to disply a photo, selected in one FRAME, in an adjacent FRAME.

    So I'll make a TABLE with all the thumbnails in one FRAME. Then when I click on a thumbnail, I want that photo to appear large size, with a simple background and associated text, in the adjacent FRAME. I figured how to do it if I make a *.HTM file for every picture, but there must be an easier way.

    I'm a total newbie, so forgive me if this is totally a kindergartner's question.

  2. #2
    Join Date
    Nov 2013
    Posts
    4
    A JavaScript solution would be OK too.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,740
    You do not need to use an Iframe to display images. Also, you should be careful what you use Iframes for, because the rating bots default to indexing the html pages used in an Iframe separately from the web page containing the Iframe. This can make a real mess of your site's search results.

    A better solution is to use PHP include files. These allow a web page to be assembled on the server, and presented to the user (and rating bots) as an integral whole.

  4. #4
    Join Date
    Nov 2013
    Posts
    4
    Thanks, jedaisoul - That's kinda over my head ... I also thoguth I might do it with a simple TABLE.... but I don't know what kind of JavaScript function would get the clicked pic to appear in the right side cell... (I'm REALLY just a beginner)

    Something like - -

    <TABLE border=4 cellSpacing=0 cellPadding=0 BORDERCOLOR="#404040" BORDERCOLORLIGHT="#606060" BORDERCOLORDARK="#202020">
    <tr><td>

    <table><tr><td>
    <table border=3 bgcolor=000000 cellpadding=5><tr><td>
    <DIV style="OVERFLOW: auto; WIDTH: 190; HEIGHT: 600px">
    <center>
    <H3>Bear Metal Pics 2007</H3>
    </center>
    <img src="Faces/Head01.jpg" height=80>
    <img src="Faces/Head02.jpg" height=80>
    <img src="Faces/Head03.jpg" height=80>
    <img src="Faces/Head04.jpg" height=80>
    <img src="Faces/Head05.jpg" height=80>
    <img src="Faces/Head06.jpg" height=80>
    <img src="Faces/Head07.jpg" height=80>
    <img src="Faces/Head08.jpg" height=80>
    <img src="Faces/Head09.jpg" height=80>
    <img src="Faces/Head10.jpg" height=80>
    <img src="Faces/Head11.jpg" height=80>
    <img src="Faces/Head12.jpg" height=80>
    <img src="Faces/Head13.jpg" height=80>
    <img src="Faces/Head14.jpg" height=80>
    <img src="Faces/Head15.jpg" height=80>
    <img src="Faces/Head16.jpg" height=80>
    <img src="Faces/Head17.jpg" height=80>
    <img src="Faces/Head18.jpg" height=80>
    <img src="Faces/Head19.jpg" height=80>
    <img src="Faces/Head20.jpg" height=80>
    <img src="Faces/Head21.jpg" height=80>

    </TD></TR></table>
    </td><td>

    //I WANT THE IMAGES ABOVE TO APPEAR HERE IF I CLICK THEM - - THANKS!
    <img src="Faces/Head01.jpg"

    </TD></TR></table>
    </TD></TR></table>

  5. #5
    Join Date
    Oct 2013
    Posts
    552
    To answer your first question use the target="" attribute in your <a> tags:
    Code:
    <a href="largeimage.jpg" target="mainframe"><img src="smallimage.jpg" /></a>
    That aside, don't use tables or frames. There's many many better solutions these days. A couple I have used:

    jQuery based display: http://www.fancyapps.com/fancybox/
    php based display: http://sye.dk/sfpg/

    Both are simple enough that even my feeble mind was able to implement them with minimal heartburn. For the former you will need to create your own thumbnail images and display pages, the latter automatically creates thumbnails and display pages on the server -- all you do is upload your photos/images.

    Good luck,
    Kevin

  6. #6
    Join Date
    Nov 2013
    Posts
    4
    OK! Feeble mind! Good! Then I might just have a chance! Thanks! I'll go check it out.
    Watch the mountains to the West. If I don't send up a flare, then I made it out alive!
    Cheers!

  7. #7
    Join Date
    Mar 2012
    Posts
    1,740
    Quote Originally Posted by DaVincisWorld View Post
    Thanks, jedaisoul - That's kinda over my head ... I also thoguth I might do it with a simple TABLE.... but I don't know what kind of JavaScript function would get the clicked pic to appear in the right side cell... (I'm REALLY just a beginner)
    There is absolutely no benefit in mixing tables with divs. Use divs. If you want a simple solution: when I was a beginner, I built a similar site with separate web pages for each full-sized piccie. It is simple to generate and link the individual pages. The down-side is maintenance. Any amendments to the common elements in the pages has to be done 20+ times. It is laborious, but it can be done. My site grew to over 100 pages before I rewrote it in PHP.

    So the code would be structured as a menu, header, footer etc. copied on every page, and a different image per page:
    Code:
    <!-- this is Head01.html -->
    <div id="header">
    blah, blah, blah
    </div>
    <!-- menu on every page-->
    <div id="left-bar">
    <a href="index.html">home</a>
    <a href="Head01.html">Head 1</a>
    <a href="Head02.html">Head 2</a>
    <a href="Head03.html">Head 3</a>
    <a href="Head04.html">Head 4</a>
    <a href="Head05.html">Head 5</a>
    <a href="Head06.html">Head 6</a>
    
    (etc...)
    
    </div>
    
    <!-- main piccie - different on each page -->
    <div id="piccie">
    <img src="Faces/Head01.jpg" alt="" height="80">
    </div>
    
    <div id="footer">
    blah, blah, blah
    </div>
    Last edited by jedaisoul; 11-19-2013 at 05:59 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles