HTML Help

alex_85 · Joined: 05 Jun 2009 Posts: 10

Ok so i have spent way too long on trying to get this right. What I need to do, is create a download button for my images, so the user can just click the button and save the actual file automatically to their computer.

I have created a very basic web photo gallery with an iframe, so hence, you click on an thumbnail image and the larger version comes up in the iframe. I then need to create a button that has to appear in a second iframe (?any other option) that says download, so the user can automatically download the actual picture (which is much larger). So all up there are 3 different images of each photo.

So... Click on the thumbnail image, and the larger image appears and also a download button to automatically download the original image. Any thoughts???

also, i realise that this is mainly only possible in IE, which is fine.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

The larger images need to be zipped as by default the browser will associate the image extension with a viewer's program and either open it in that program or open it in a browser window instead of downloading.

This is normal, but a zip extension will trigger the download function if you provide a zipped version of the image being viewed.

alex_85 · Joined: 05 Jun 2009 Posts: 10

yeah thats a good idea i might do that.

one more thing. I know this will seem really simple. But what is the code for this: Click on the thumbnail and for each one will appear an image that says download and will link to the new image...?

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

You can make a pop up window with your image code in it for the larger image and the popup page can contain the download link on it. The link is the standard link using the link tags "<a href="" title=""></a>", and having the path to the zipped image file.

Here are some online free pop window makers. Post back if you still have a problem with it.

http://www.wilsoninfo.com/pop_gen.html
http://www.freewebmasterhelp.com/tools/popup/
http://www.hypergurl.com/newwindow.html
http://www.hypergurl.com/newwindow.html
http://www.dynamicdrive.com/dynamicindex8/popwin.htm
http://javascript.internet.com/generators/popup-window.html

alex_85 · Joined: 05 Jun 2009 Posts: 10

ok this is really annoying me. i know its so simple, i just cant apply myself to it.

here is all my code. I hope you understand what im trying to do. I've got thumbnail images at the bottom, click on them and they appear in the iframe, larger. I then created a second iframe that I wanted the download button to appear in. but this just seems wrong.

can u please tell me what the right code is for the javacript download - although this seems to work for the save as dialogue. and where i should put the download button and how. ugh!!

<script>

function saveImageAs (imgOrURL) {
if (typeof imgOrURL == 'object')
imgOrURL = imgOrURL.src;
window.win = open (imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 500);
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
saveDocument(window.document);
}
</script>

<body>
<div class="bar"></div>

<div class="gallery">
<iframe src="#" border="1px solid white" align="middle" width = "567" height = "354" scrolling="auto" frameborder="0" name="frame"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <a href="error.html">the related document.</a>] </iframe>
</div>

<div id="apDiv1"><img src="resources/floral.png" width="159" height="63" /></div>
<div id="menuBar2">Image Gallery | Chris Hall Photography | Check availability | Portraiture | Contact</div>

<div id="apDiv2"><iframe src="#" border="1px solid white" align="middle" width = "567" height = "50" scrolling="auto" frameborder="0" name="frame2"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <a href="error.html">the related document.</a>] </iframe></div>
<p> </p>
<p> </p>
<div class="menuBar"><a href="flowers/a2.jpg" target="frame"> <img src ="flowers/a3.jpg"/></a>

<A HREF="javascript: void 0"
ONCLICK="saveImageAs(document.anImage); return false" target="frame2"
>save image</A>
<IMG NAME="flowers/a3.jpg" SRC="flowers/a3.jpg" >

<a href="flowers/b2.jpg" target="frame"> <img src ="flowers/b3.jpg"/></a> <a href="flowers/d2.jpg" target="frame"> <img src ="flowers/d3.jpg"/></a> <a href="flowers/e2.jpg" target="frame"> <img src ="flowers/e3.jpg"/></a></div>
<p> </p>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3598 Location: Biloxi, MS

Why load an iframe when it's simpler to have a popup window with image along with download button? Seems overly complicated. The image to download directly should be zipped otherwise the browser or some image program will display it instead.