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!
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:
Thanks very much for your response!! I will look through that tutorial. But i think i have just figured it out by using href. This is the code that i have used;
<a href="Large Image 01.html" target="largeimage"><img src="01 Thumbnail.jpg" width="132" height="75" /></a></td>
This code is on the thumbnail images page and it links it to the iframe (named largeimage) that is on my main index page (the image I posted above).
The code for the large iframe on my index page is as follows;
<iframe name="largeimage" id="largeimage" width="528" height="297" ></iframe>
The code for the scrolling iframe on my index page is as follows;
<iframe name="imagescroll" id="imagescroll" height="110" width="600" scrolling="auto" src="image scroll page.html"></iframe>
All the large images have their own individual html pages. Basically i dropped the large image into a table on a new html page and saved it. Then repeated this process for all the images. This large image page is then used as the href source and sent to the target "largeimage" (iframe on index page). The thumbnails also have their own seperate html page.
Hopefully this will help people who have the same problem!!
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.
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)?
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
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).