Skip navigation
Lebowski1213
Currently Being Moderated

How do you enlarge thumbnails from one iframe into a large iframe??

Aug 12, 2009 5:29 AM

Hello,

 

This has been driving me nuts if anybody could help it would be extremley appreciated.

I am fairly new to web design and I would like to create an image gallery with thumbnails in a scrolling iframe that when clicked on open up in a larger iframe on the same page (to enlarge the image).  I am using dreamweaver CS4.  I have made html pages for the large images but cant figure out how to link them to the thumbnails in order for them to open in the large iframe.  The scrolling iframe is currently linked to an html page containing all the thumbnail images.  Ideally I would like to learn how to do this in html code as opposed to extensions but as I am a novice I will need it spelled out idiot proof!!  Below is an image of what i am trying to achieve (thumbnails are in a scrolling iframe and below is the larger iframe).  Also can this same set up be re-created with video content (when you click on a thumbnail in a scrolling iframe it opens up the video in a large iframe)

 

Please help me!!!! Many thanks in advance!

 

 

Site Image.jpg

 
Replies
  • Currently Being Moderated
    Aug 12, 2009 5:51 AM   in reply to Lebowski1213

    Instead of an iframe, why not use the show/hide behaviour.

     

    Create an absolutely positioned div just below the thumbnails to the size of the largest image you may have to accomodate.  You place your larger images inside this div.  When you click or mouseover a thumbnail, the larger image would be revealed.

     

    More about this here:

    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340d cda9110b1f693f21-7af6a.html

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 5:28 AM   in reply to Nadia-P

    What if the "image" is a PDF instead? I have a landscape formatted PDF (calendar) page I am using that I want to pop to a new page when clicked on to bring up as a larger image in a new frame. I still want to keep the PDF display controls that go with it.

     

    Here is my sample on a page.

     

    Here is the full size PDF.

     

    The technique you discuss is to make a fullsize page and when clicked on the new page will be displayed. I can use the hover command instead to expose a new page I suppose. However, will the new page still have the PDF display controls too? Do you have any further recommendations on this technique? Is that the best practice for mobile devices (phones, pads)?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 10:26 AM   in reply to henryseiden

    Unfortunately, PDF files are not web pages.  They're media files that require helper applications (Acrobat) and browser plug-ins to view them.  And since everyone's set-up is different, there's no guarantee your site visitors will have all the necessary add-ons & preference settings to view PDFs in browsers.  They may prefer to download  and open directly in Acrobat or some other PDF viewer.

     

    For best results, provide a small thumbnail image to give visitors a visual clue as to what the PDF contains along with a direct link to the PDF file.  That's how Adobe does it.  See Adobe PDF Samples

    http://www.adobe.com/manufacturing/3dpdfsamples/3dsolutions/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 12:11 PM   in reply to Nancy O.

    As you could see, Nancy, I've done that. Since the PDF is displayable, and natively viewable (in modern browser) in a browser window as in the example, wouldn't it make sense to expand that functionality? I hoped to make it enlargeable, as others have commented on this forum with other documents, images, even movies. A commenter posted that they used an href tag to go to a larger window iframe for some other kinds of docs- images (png, jpg).

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 12:19 PM   in reply to henryseiden

    For me, the PDF opens in a new browser window/tab the size of which is determined by my personal preferences.  Nothing you can do to change that. 

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points