I created a better CSS Popup Image Viewer

[erdinc]

You can see it HERE (http://www.erdinc.net/image_enlarge/index.html).

The uniqueness is that it uses the same image file for thumb and large versions. The image is scaled down automatically in proportion. There is no image specific dimension entered anywhere.

In the example all images have different sizes. If you replaced them with new images that have different dimensions it would just work without and setting alteration.

If you had changed the thumb width, all thumbs would be updated on the fly.

As far as I know this was not done before.

Comparison with existing systems:

1. dynamicdrive (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/)
Two files are needed for thumb and large. You need to create a thumb image in an image editor for each large image. If you wantde to change the thumb heights you would have to create all thumbs again.

small file is here: http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg
large file is here: http://www.dynamicdrive.com/cssexamples/media/tree.jpg

My system uses only one file.

2. cssplay.co.uk (http://www.cssplay.co.uk/menu/magnify)
Works again with two files:
small file is here: http://www.cssplay.co.uk/img/tdrips.jpg
large file is here: http://www.cssplay.co.uk/img/drips.jpg

3. randsco.com (http://randsco.com/_miscPgs/cssZoomPZ3.html)

Uses asingle file but you need to specify both the height ad width for each thumb in the HTML like this:
style="width:210px; height:137px;

For instance if you have an image at 560x240 px dimensions and what is the height of the thumb if you want the width to be, say, 190 px ? You need to calculate this and enter it in the HTML for each thumb.

In my system you don't enter any image specific value. You can have 10 images all at different sizes and they will all display with the same width.

THE CSS:

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
float: left;
clear: left; /* if you float right then clear right */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}

.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
display:block;
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;

/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */

/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}

/* smart image enlarger ends here */

THE HTML:

<div class="ienlarger"><a href="http://www.erdinc.net/"><img src="images/01.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="images/01.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="http://www.google.co.uk/"><img src="images/02.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="images/02.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="http://www.facebook.com/"><img src="images/03.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="images/03.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="#nogo"><img src="images/04.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="images/04.jpg" alt="large" /><br />
Some text can go here.</span></a></div>

[puffnstuff]

This looks great.

Do you know if it works in IE, specifically IE6 and up?

I hope to incorporate this in my site. I'll let you know how it goes.

[gurmeet]

sounds nice...


but popup must be having same size.... else it sounds little odd :)

[erdinc]

puffnstuff,

It has been tested in IE6, IE8, Chrome, Firefox, Safari, Opera

So far I haven't seen any problems in any browser. If anybody uses IE7, please let me know how it works.



gurmeet,
The large image will display in it's original size, whatever the original size is. You can have images at different sizes in the same set. In fact the demo does.

You can remove an image from the folder and put another one with the same name. You wouldn't need to alter any code anywhere even if you put an image that has different dimensions. The code is independent from actual sizes.

The thumb size is a random value that you can chose as you wish. You only specify one dimension for thumbs. The other is auto calculated keeping aspect ratio.
If you change thumb size, it will update on the fly.

Erdinc

[gurmeet]

hmm... n can u do little change more..?

as i seen ur images pops-up from the middle of the image..., can u do it that image to popup from the top of the thumbnail...

once try it by urself n see, may be it become little better... else other work is fine :)

[erdinc]

Hi gurmeet,

It is up to the designer to decide where the pop-up should be located relative to the thumb. I have added a comment on the CSS rule in my demo page to show where this is set.


.ienlarger a:hover span {
display:block;
top: 60px; /* means the pop-up will open 60px down from thumb */
left: 60px; /* pop-up will open 60px far from the left side */
z-index: 100;
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

The advanced example on this page (http://www.erdinc.net/image_enlarge/advanced.html) has the pop up located differently for each set. I understand that some novice users might find it difficult to change settings. I'm considering adding a few different versions in the future.

[puffnstuff]

puffnstuff,

It has been tested in IE6, IE8, Chrome, Firefox, Safari, Opera

So far I haven't seen any problems in any browser. If anybody uses IE7, please let me know how it works.


Erdinc


It works in IE7.

[saucystargazer]

Hi there! Is there any way to make this a true gallery, without the script for the text/table on the side of each image? I can't figure out where you've done the codes for that. Thanks!