How to code small pictures to big pictures

@diestlerAug 20.2010

I am building a site using Dreamweaver and Fireworks (using version 8 if that makes a difference) – I’m avoiding Flash because I want it to work on the iPhone. Does that also mean I can’t use JavaScript? Not sure, but this project seems like it would be much easier with either Flash or by using JavaScript.

What I am trying to do is have a bunch of little pics, when someone clicks on them they display a much larger version. Here is an example of what I want to accomplish:
~~[url]~~http://www.thegrantorino.com/[/url] – then click on gallery.

I realize that was done in Flash – I don’t need the fancy “wipe” effect when a new pic comes up. I just want some small pics, when someone clicks on them, it brings up a big version (although the big version will probably be a different picture entirely). I was going to design the background in Fireworks, but I’m assuming the coding will have to be done in Dreamweaver?

Thanks in advance for any assistance.

to post a comment

HTML

17 Comments(s) _↴

@tirnaAug 20.2010 — #There are a few ways you can do this. You can use javascript or just css with no javascript.

You also can use just the 1 physical image file to display your thumbnail and enlargement. You don't need separate image files for the thumb and enlargement.

Maybe use this demo as a guide.

It uses just css to display a thumbnail and its enlargement appears when you hover over the thumbnail. A single image file is used for both thumbnail and enlargement.

[CODE] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
 <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
 <head>
 <title></title>
 <style type="text/css">
 <!--
 
 .thumbs {
 width: 100px;
 position: relative}
 
 .enlarge {
 display: none;
 position: absolute;
 top: 0px;
 left: 200px}
 
 .thumbs:hover .enlarge {
 display: block;
 }
 
 -->
 </style>
 
 </head>
 <body>
 
 <div class="thumbs">
 <img src="pic1.jpg" alt="" width="100" />
 <div class="enlarge">
 <img src="pic1.jpg" alt="" width="300" />
 </div>
 </div>
 
 </body>
 </html>
 [/CODE]

@kiwibritAug 20.2010 — #[url=http://www.huddletogether.com/projects/lightbox2/]Lightbox[/url] works fine when viewed with an iPhone.

@diestlerauthorAug 20.2010 — #Thanks for the pointers - I think Lightbox will probably be a good option for me. But it leads to a follow up question - how do I place those images created from code in an image created in Fireworks. It would be similar to this site:

http://www.thegrantorino.com/ - then click on gallery

I would create my own background image in Fireworks, but leave a certain area of the image on the right side blank so that I can place these images there.

Any tips? Do this in Dreamweaver? Fireworks? Not possible?

Thanks in advance.

@savvykmsAug 23.2010 — #With image galleries, there are a number of things to consider.
[LIST=1]

[*]Thumbnail images and full sized images can be used, which has the good solution of less bandwidth use, if the larger images are not all preloaded at once.

[*]Javascript, if and when used, should be compact and as cross-compatible as possible.

[*]Layout should result in no movement on the page.

[/LIST]
I would suggest something based off of this (for simplicity):

Javascript:

[code=php]
 function expandImage(ele,nsrc) {
 if (ele) { ele.src = nsrc; }
 }
 [/code]

HTML:

[code=php]
 <img src="thumb.gif" onclick="expandImage(this,'full.gif')">
 [/code]

With no width and height set, browsers will usually fully expand the image via the image file's width and height values.

Note that the above does not set an image element elsewhere from the thumbnails to be used to display one image at a time, and images will not contract back to thumbnails once clicked. This will result in possibly severe skewing of page layout.

@CharlesAug 23.2010 — #

[code=php]
 <img src="thumb.gif" onclick="expandImage(this,'full.gif')">
 [/code]

[/QUOTE]That's actually, quite bad. But with a simple tweak, or two, can be made just fine:

[code=php]<a href="full.gif" onclick="expandImage(this.firstChild,'full.gif'); return false"><img alt="" src="thumb.gif" ></a>[/code]

Or for kicks you could change the expandImage function to track down the value of the "href" attribute.

@diestlerauthorAug 23.2010 — #What I'm having trouble figuring out is how to place these images within a "placeholder" from a Fireworks/Photoshop image. I don't need any critique on this page, this is for example purposes only:

http://theinnerroommovie.com/index2.html

Let's say this was the "images" page - and I wanted to put thumbnails inside the "placeholder" - where it says trailer. Then people could click on the images - through lightbox or java or css or whatever. How do I move those thumbnails into that placeholder? Right now, when you write the code, they just show up on the left hand side.

Thanks again for your help.

@diestlerauthorAug 23.2010 — #Okay, so I've figured out I can cut a html splice in fireworks and type the code directly in there. So I've done that and am able to get good results using the lightbox code. My question is now this. I have a "placeholder" that is say 300 pixels tall, but I have a bunch of thumbnails that when stacked on top of each other are larger than 300 pixels, so it's making that placeholder box "grow" in height to fit all the thumbnails. How can I turn that placeholder into a scrolling box so it doesn't resize itself? I'm guessing this is a simple line of code, but I can't seem to figure it out.

Thanks again in advance.

@diestlerauthorAug 24.2010 — #Think I've got it. Thanks for everyone's help.

@diestlerauthorAug 24.2010 — #On a mac, I've pretty much got the page working the way I want it:

http://theinnerroommovie.com/testhomepage6.html

1 - When I view it on a PC (both Firefox and IE) - there are ugly blue borders around the images. That is not there on the mac or iPhone. Anyway to get rid of them?

2 - On the iPhone - the scroll bar for the "images box" does not appear - anyway to get it to show up?

Thanks again in advance.

@YelgnidrocAug 24.2010 — #ugly blue borders around the images. That is not there on the mac or iPhone. Anyway to get rid of them?
[/QUOTE]

try css border:none!important;

@diestlerauthorAug 24.2010 — #try css border:none!important;[/QUOTE]

Where do I put that in my html code? I'm a newbie - please show line before and line after plus the actual code I would insert. Please spell it out for me. Thank you.

@YelgnidrocAug 24.2010 — #Try:

<img style='border:none!important;' src="eileen2.jpg" width="100" height="40" alt="" />

I'd also use CSS for the width and height.

@diestlerauthorAug 24.2010 — #But this is lightbox code:

[I]<div class="thumbnail">

<a href="eileen2.jpg" rel="lightbox"><img src="eileen2.jpg" width="100" height="40" alt="" /></a>

</div>[/I]

I can't just change it to CSS, right?

@YelgnidrocAug 24.2010 — #

[CODE]<div class="thumbnail">
 <a href="eileen2.jpg" rel="lightbox"><img style='border:none!important;' src="eileen2.jpg" width="100" height="40" alt="" /></a>
 </div>[/CODE]

You can also use inline CSS (as above)

@YelgnidrocAug 24.2010 — #

[CODE]<div class="thumbnail">
 <a href="eileen2.jpg" rel="lightbox"><img  src="eileen2.jpg" width="100" height="40" border="0" alt="" /></a>
 </div>[/CODE]

Or, try border="0" (as above)

@diestlerauthorAug 24.2010 — #sweet! it's working now, thanks for all your help!

looks like I might have to create a scrollbar in java if I want it to "show up" on the iPhone? apparently the scroll does work on the iPhone as is, you just have to scroll with two finger gesture and the bar itself doesn't show up?

Any other easy solutions out there?

@nazishkhan33Aug 25.2010 — #then use java script..

Also in #HTML _↴

Mouseover swap images in IE Buttons and javascript Carriage return in text box

Success!

Help @diestler spread the word by sharing this article on Twitter...

Tweet This

How to code small pictures to big pictures

17 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

How to code small pictures to big pictures

17 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #HTML _↴