PDA

View Full Version : Resolved CSS Image Gallery Hover Always



bluewalrus
12-20-2008, 07:10 PM
1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb

3) Describe problem: The hover state stays on, when the mouse is above the image (anywhere above it) I think it is from the padding top I added because its reading the padding as part of the image for some reason something like this

| |

| Padding |

| |
| image| <---mouse off anywhere below here has the overlay go away
| Overlay |

http://www.esefdenim.com/gal.php

jscheuer1
12-20-2008, 08:43 PM
In FF's developer tools at least, changing to:


.thumbnail span{ /*CSS for enlarged image*/
margin-top:15%;
position: absolute;
left: -1000px;
height:55%;
width:55%;
visibility: hidden;
color: black;
text-decoration: none;
}

Takes care of the problem. However, if that won't work in other browsers (I'm leaving it to you to test that, or to provide a demo with the change hard coded into it for me to test), it might be better to abandon both padding and margin, and to set a pixel or em top property, for example:


.thumbnail span{ /*CSS for enlarged image*/
position: absolute; /* Comment: margin and/or padding removed */
left: -1000px;
height:55%;
width:55%;
visibility: hidden;
color: black;
text-decoration: none;
}

and then (the exact number and/or units used may vary as per your preference):


.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 170px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

bluewalrus
12-20-2008, 08:58 PM
Yup you got it. Although in sarfai its displaying off by like 15 pixels for some reason ff, flock, and oprea its fine though, those are all the browsers i can test on, I'm a mac(er).

jscheuer1
12-20-2008, 09:48 PM
Percentage margins and/or padding are sometimes unreliable cross browser because each browser determines for itself what the percentage is a percent of, and it may also depend upon how much room there is in the region that the browser decides to take the percentage from. This can vary due to browser peculiarities, and also from the size of the browser window. If the exact placement isn't critical, this can often be a viable strategy though. On the other hand, if you must have pixel perfect symmetry across as many browsers as possible, my second suggestion would probably be more effective. The distance from the top of the window of the enlarged image visa vis the position of the thumbnails will however always depend to a certain extent upon how far the thumbnails are from the top of the window in that browser.

Since the distance of the thumbnails from the top appears to vary with the size of the browser window, you will either have to be more specific about the thumbnail's location, or accept some variation in where the larger images appear in relation to the thumbnails

bluewalrus
12-21-2008, 04:22 PM
Oh Oh okay thanks

bluewalrus
12-21-2008, 11:58 PM
It was working fine but I just uploaded this other image and it is being stretched horizontally. I have the height and width set to 55% which i thought would keep the images original proportions the same. Is this incorrect as well, or is there a more standard way of sizing images when you do not know all of the images sizes? Thanks again for any other suggestions you can offer.

jscheuer1
12-22-2008, 04:35 AM
There are other ways of scaling images (with the browser*), but it can get quite complicated. For something like this, the easiest method would probably be best. That is to set only one dimension, either the width or the height. In a case like that, the browser will almost always scale the other dimension. You must make sure that no other style or attribute interferes though.


*scaling (down images) with the browser is inefficient, and depending upon the situation (like if the full size image is never shown) can waste disk space, and always increases page load time when a scaled down larger image is standing in for a thumbnail version. Browser scaled images can lack resolution compared to those scaled to size in an image program. However, even with all that, if care is taken to do things in the most logical (from the point of view of minimizing load times as much as possible) manner it can be a form of preloading, and work out fairly well.

bluewalrus
12-22-2008, 05:04 AM
You've solved it again. Thanks is there a way to set the position to be where the mouse is? Right now the margin-top is not working on the second row and if i set it too it won't work for the first. I want the image to be centered from where the mouse is on the image. I know the margin top and the left absoulte are setting this off right now but didn't know if there was anyway to have it center on the image like 15 pixels below so some of it would also still be visible. Thanks again.

jscheuer1
12-22-2008, 07:38 AM
Well, the idea is to arrange things so that the larger images don't overlap the thumbnails. The way you have it now, there's not room enough for that. Another strategy might be to forget about the gallery container, make the .thumbnail class position relative, so that the larger images will be absolutely positioned relative to the thumbnail link. There are many possibilities. But there is no way with this setup to follow the mouse, css style just won't allow for that. A javascript could be used, in fact my new Expando (http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm) (just adopted to the Dynamic Drive Library) could be used. It will not follow the mouse, but if each image is absolutely positioned inside its own relatively positioned division of limited size, the effect can be quite nice, because the images wouldn't push each other around the way that they do on the demo page. But it would no longer have the advantage of this viewer, which is not requiring javascript.

bluewalrus
12-22-2008, 02:09 PM
Okay, I like the expando script and look. I've put it in pulled out the css image gallery. The page already uses javascript else where so adding another one won't be a problem. Is the script written so that it expands till it reaches the original size and if so is that changeable (can css's height and width be used in place of the img tag height and width or does it read that tag)?

So I should make each thumbnail in it's own div with relative positioning (I pulled out the.thumbnail class) for the expand to just go over the others?

jscheuer1
12-22-2008, 04:10 PM
Might have been a bad idea. The script reads the image's actual size as well as the attribute height and width of the image's tag and uses those to determine the small version size and the large version size. Setting an image's style height and/or width will cause problems.

But, if you really want to use Expando, what you could do is scale your images in an image editing program, so that they are the size you would want them to be when expanded. Also, markup more like so would be preferable:


<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture3.png" alt="Picture3.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture2.png" alt="Picture2.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/left.png" alt="left.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.jpg" alt="right.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.png" alt="right.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/1thomas esef.jpg" alt="1thomas esef.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Tony23OriBike rideresef_10_months.jpg" alt="Tony23OriBike rideresef_10_months.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the fifthtestPicture 61.png" alt="thisis the fifthtestPicture 61.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the sixthtestPicture 10.png" alt="thisis the sixthtestPicture 10.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/29.png" alt="29.png" height="50" width="50" />
</div>

With style like:


.expandocontainers {
position: relative;
width: 52px;
height: 52px;
}
.expando {
position: absolute;
top: 0;
left: 0;
padding: 0 2px 0 2px;
}

You might even want to float the .expandocontainers divisions.

And, as I was experimenting with this, one would want to add to the script here:


resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
im.style.zIndex = 100;
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d )
im.style.zIndex = '';
}, d = document.images, i = d.length - 1;

to get the larger images to overlap the other images.

Also, though it should be obvious, having the thumbs in an overall container with its overflow restricted (like your #holdem division) is a poor idea.

bluewalrus
12-23-2008, 12:47 AM
I made those changes but you said I'd have to resize the images to work with this. I right now am having this generated with php that reads a directory that users upload photos directly into; my goal is to have this be self controlled, that images will only be shown to a certain size at maximum (I know it'll increase page loads eventually but these are going to be seperated into other pages eventually as well so it should be fine). Don't know if you know of something like that or if there would be somewhere in the java for expando that i code add in a stop expanding if x number of pixels is reached?

jscheuer1
12-23-2008, 05:07 AM
Something like (the highlighted base tag was only required for the local demo here to get the paths to the images correct and to make sure the local page picked up your stylesheet, the now modified script can be external, as can the added styles):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ESEF Denim Co.</title>
<base href="http://www.esefdenim.com/" />
<link href="gal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
im.parentNode.style.zIndex = 100;
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d ){
im.width = e.ims[i].w;
im.parentNode.style.zIndex = '';
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = im.width;
e.ims[i].h = [300 - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
im.removeAttribute('width', 0);
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
</script>
<style type="text/css">
.expandocontainers {
position: relative;
width: 52px;
height: 52px;
float: left;
}
.expando {
position: absolute;
top: 0;
left: 0;
padding: 0 2px 0 2px;
}
</style>
</head>
<body>
<div id="contain">
<div id="leftside">
<img src="logo.jpg" alt="EFES Logo" />
<a href="">HOME</a><br />
<a href="">DENIM</a><br />
<a href="http://www.esefdenim.blogspot.com">BLOG</a><br />
<a href="http://www.esefdenim.bigcartel.com">CONTACT</a><br />
<a href="">ONLINE BOUTIQUE</a><br />
<a href="">LIFE</a><br />
<a href="">GALLERY</a>
</div>
<div id="rightside">
<h3 style="float:left; margin-left:65px; font-size:36px;" >ESEF Gallery<sub style="font-weight:100; font-size:9px; text-align:right;">Mouseover an image to see it larger.</sub></h3><br /><br />
<div style="clear:left; width: 317px; float: left;">
<!--[if IE]>
<br>
<![endif]-->
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture3.png" alt="Picture3.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture2.png" alt="Picture2.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/left.png" alt="left.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.jpg" alt="right.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.png" alt="right.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/1thomas esef.jpg" alt="1thomas esef.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Tony23OriBike rideresef_10_months.jpg" alt="Tony23OriBike rideresef_10_months.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the fifthtestPicture 61.png" alt="thisis the fifthtestPicture 61.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the sixthtestPicture 10.png" alt="thisis the sixthtestPicture 10.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/29.png" alt="29.png" height="50" width="50" />
</div>
</div>

</div>
</div>
</body>
</html>

bluewalrus
12-23-2008, 05:53 AM
Okay, I think I did that all the same but since its php i'll put the original here... I got 3 more questions...I think seems like I have more questions each time thanks for are your help...
#1 Is it possible to line the div expandocontainers up I've tried float left and display inline but with no luck I tried it wiht the image and with the div.
#2 Can the z-index be changed when decreasing to be higher then the increasing z index?
#3 I updated the expando js file with that new code but is that setting it to expand to a set % or pixels size, if the original image size is greater then that size; or is it expanding until a set number regardless?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ESEF Denim Co.</title>
<link href="gal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="expando.js">

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
</head>
<body>
<div id="contain">
<div id="leftside">
<img src="logo.jpg" alt="EFES Logo" />
<a href="">HOME</a><br />
<a href="">DENIM</a><br />
<a href="http://www.esefdenim.blogspot.com">BLOG</a><br />
<a href="http://www.esefdenim.bigcartel.com">CONTACT</a><br />
<a href="">ONLINE BOUTIQUE</a><br />
<a href="">LIFE</a><br />
<a href="">GALLERY</a>
</div>
<div id="rightside">
<h3 style="float:left; margin-left:65px; font-size:36px;" >ESEF Gallery<sub style="font-weight:100; font-size:9px; text-align:right;">Mouseover an image to see it larger.</sub></h3><br /><br />
<div style="clear:left; width: 317px; float: left;">
<!--[if IE]>
<br>
<![endif]-->
<?php
$path = "/uploads";

// Open the folder
$dir_handle = @opendir($path) or die("Unable to open folder");

// Loop through the files
while (false !== ($file = readdir($dir_handle))) {

// Prevent this file itself being shown
// If you want it to not display any other files
// enter more of these
if($file == "index.php")
continue;
//Prevent folders showing
if($file == ".")
continue;
if($file == "..")
continue;
// Display the results
print '<div class="expandocontainers"><img class="expando" border="0" src="/uploads/' . $file . '" alt="' . $file . '" height="50" width"50" /></div>' . "\n";
}
// Close it
closedir($dir_handle);
?>
</div>
</div>
</div>
</body>
</html>

jscheuer1
12-23-2008, 06:47 AM
#1 Is it possible to line the div expandocontainers up I've tried float left and display inline but with no luck I tried it wiht the image and with the div.

In my demo, they are lined up. I floated them in a container.


#2 Can the z-index be changed when decreasing to be higher then the increasing z index?

It could, but then smaller images could show through larger ones.


#3 I updated the expando js file with that new code but is that setting it to expand to a set % or pixels size, if the original image size is greater then that size; or is it expanding until a set number

It's expanding until a set number:


e.ims[i].h = [300 - im.height, im.height];

300 pixels of height in this case.

bluewalrus
12-23-2008, 02:07 PM
Okay thanks again I missed that float left in the expandocontainer. The images are overlapping right now. I tried putting a height and width into expando class this stopped the overlapping and made them all the same size but it also made the expando only expanded height wise. Do you know how to solve this?

jscheuer1
12-23-2008, 05:50 PM
My code didn't have that problem either. Your code had a repeating typo in it that I corrected:


width"50"

Which should be:


width="50"

You can just copy my code and work from there. The only problem it had was that, since not all images will scale to 50 x 50, there was some initial 'jumping out' when expanding with those that are wider in aspect ratio, accompanied by an ending 'jumping in' when contracting. For those with a narrower aspect ratio, this was reversed, but it's not too bad. It was the worst for narrower (the jeans image), as it sometimes causes the mouse to lose contact with the image just as expansion is starting.

If your PHP takes stock of the image's dimensions, it could write the code to take this into account, producing both an individually sized (style width) expandocontainers division and an individually tailored width attribute for each image.

We could also probably initialize the page to deal with this using javascript, but that would have to wait until all images had loaded, so wouldn't look as nice (a lot of jumping around of the thumbnails while corrections were applied), and would allow someone to possibly activate a thumbnail before it was resolved. The expandocontainers' visibility could be set to hidden until this process finished though, so it could work out.

jscheuer1
12-23-2008, 06:37 PM
Give this version a try (copy the entire page code and try it out):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ESEF Denim Co.</title>
<base href="http://www.esefdenim.com/" />
<link href="gal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
Customised: 12/23/08 - jscheuer1
*/

if (document.images && Array.prototype.push){
(function(){
var cos, times = 10, speed = 50;
/*@cc_on @*//*@if(@_jscript_version >= 5)
times = 40; speed = 20;
@end @*/
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
im.parentNode.style.zIndex = 100;
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
im.parentNode.style.zIndex = 99;
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d ){
im.width = e.ims[i].w;
im.parentNode.style.zIndex = '';
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = im.width;
e.ims[i].h = [300 - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
im.removeAttribute('width', 0);
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

expConIm.init = function(){
var d = document.getElementsByTagName('div'), i = d.length -1,
a = [], r = new RegExp('\\bexpandocontainers\\b'), loadem = function(a){
a[2].onload = function(){
var dim = a[2].width * (50/a[2].height);
a[0].style.width = dim + 'px';
a[1].width = dim;
a[0].style.visibility = 'visible';
};
a[2].onerror = function(){a[0].style.display = 'none';};
a[2].src = a[1].src;
};
for (i; i > -1; --i)
if(r.test(d[i].className))
a.push([d[i], d[i].getElementsByTagName('img')[0], new Image()]);
i = a.length -1;
for (i; i > -1; --i)
loadem(a[i]);
};

if (document.addEventListener){
window.addEventListener('load', expConIm.init, false);
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
window.attachEvent('onload', expConIm.init);
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
</script>
<style type="text/css">
.expandocontainers {
visibility: hidden;
position: relative;
width: 50px;
height: 50px;
float: left;
margin: 0 2px;
}
.expando {
position: absolute;
background-color: #fff;
top: 0;
left: 0;
border: 1px solid #000!important;
padding:0;
}
#contain {
overflow: visible!important;
}
</style>
</head>
<body>
<div id="contain">
<div id="leftside">
<img src="logo.jpg" alt="EFES Logo" />
<a href="">HOME</a><br />
<a href="">DENIM</a><br />
<a href="http://www.esefdenim.blogspot.com">BLOG</a><br />
<a href="http://www.esefdenim.bigcartel.com">CONTACT</a><br />
<a href="">ONLINE BOUTIQUE</a><br />
<a href="">LIFE</a><br />
<a href="">GALLERY</a>
</div>
<div id="rightside">
<h3 style="float:left; margin-left:65px; font-size:36px;" >ESEF Gallery<sub style="font-weight:100; font-size:9px; text-align:right;">Mouseover an image to see it larger.</sub></h3><br /><br />
<div style="clear:left; width: 400px; float: left;">
<!--[if IE]>
<br>
<![endif]-->
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture3.png" alt="Picture3.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Picture2.png" alt="Picture2.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/left.png" alt="left.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.jpg" alt="right.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/right.png" alt="right.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/1thomas esef.jpg" alt="1thomas esef.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/Tony23OriBike rideresef_10_months.jpg" alt="Tony23OriBike rideresef_10_months.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the fifthtestPicture 61.png" alt="thisis the fifthtestPicture 61.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/thisis the sixthtestPicture 10.png" alt="thisis the sixthtestPicture 10.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" border="0" src="/uploads/29.png" alt="29.png" height="50" width="50" />
</div>
</div>

</div>
</div>
</body>
</html>

bluewalrus
12-23-2008, 11:46 PM
Okay, thanks that looks good now. Would this statement work if added in place of the current one to say... if the image is smaller then 300 pixels enlarge to that size if it's greater than 300 pixels then stop at 300 pixels?



if ( e.ims[i].h < 300 ) {
e.ims[i].im.src = im.src;
} else {
e.ims[i].h = [300 - im.height, im.height];
}


In place of


e.ims[i].h = [300 - im.height, im.height];

jscheuer1
12-24-2008, 04:59 AM
If I understand what you're after, it can be gotten by changing this line:


e.ims[i].h = [300 - im.height, im.height];

to:


e.ims[i].h = [Math.min(e.ims[i].im.height, 300) - im.height, im.height];

I made a few more minor changes (to style and created a loading dynamic to slow things down just a little and add drama to the page load - clear your cache before viewing to see its visual impact), including the above. Try running this page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ESEF Denim Co.</title>
<base href="http://www.esefdenim.com/" />
<link href="gal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
Customised: 12/23/08 - jscheuer1
*/

if (document.images && Array.prototype.push){
(function(){
var cos, times = 10, speed = 50;
/*@cc_on @*//*@if(@_jscript_version >= 5)
times = 40; speed = 20;
@end @*/
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
im.parentNode.style.zIndex = 100;
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
im.parentNode.style.zIndex = 99;
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d ){
im.width = e.ims[i].w;
im.parentNode.style.zIndex = '';
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = im.width;
e.ims[i].h = [Math.min(e.ims[i].im.height, 300) - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
im.removeAttribute('width', 0);
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

expConIm.init = function(){
var d = document.getElementsByTagName('div'), i = d.length -1,
a = [], r = new RegExp('\\bexpandocontainers\\b'), loadem = function(){
a[l][2].onload = function(){
document.getElementById('loading').style.display = 'none';
var dim = a[l][2].width * (50/a[l][2].height);
a[l][0].style.width = dim + 'px';
a[l][1].width = dim;
a[l][0].style.visibility = 'visible';
--l;
if (l > -1)setTimeout(loadem, 500);
};
a[l][2].onerror = function(){a[l][0].style.display = 'none'; --l; if (l > -1)setTimeout(loadem, 500);};
a[l][2].src = a[l][1].src;
};
for (i; i > -1; --i)
if(r.test(d[i].className))
a.push([d[i], d[i].getElementsByTagName('img')[0], new Image()]);
l = a.length -1
loadem();
};

if (document.addEventListener){
window.addEventListener('load', expConIm.init, false);
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
window.attachEvent('onload', expConIm.init);
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
</script>
<style type="text/css">
.expandocontainers {
visibility: hidden;
position: relative;
width: 50px;
height: 50px;
float: left;
margin: 2px;
}
.expando {
position: absolute;
background-color: #fff;
top: 0;
left: 0;
border: 1px solid #000!important;
padding:0;
}
#contain {
overflow: visible!important;
}
#loading {
text-align: left;
padding-top: 2em;
}
</style>
</head>
<body>
<div id="contain">
<div id="leftside">
<img src="logo.jpg" alt="EFES Logo" />
<a href="">HOME</a><br />
<a href="">DENIM</a><br />
<a href="http://www.esefdenim.blogspot.com">BLOG</a><br />
<a href="http://www.esefdenim.bigcartel.com">CONTACT</a><br />
<a href="">ONLINE BOUTIQUE</a><br />
<a href="">LIFE</a><br />
<a href="">GALLERY</a>
</div>
<div id="rightside">
<h3 style="float:left; margin-left:65px; font-size:36px;" >ESEF Gallery<sub style="font-weight:100; font-size:9px; text-align:right;">Mouseover an image to see it larger.</sub></h3><br /><br />
<div style="clear:left; width: 400px; float: left;">
<!--[if IE]>
<br>
<![endif]-->
<div id="loading">
Loading . . .
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/Picture3.png" alt="Picture3.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/Picture2.png" alt="Picture2.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/left.png" alt="left.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/right.jpg" alt="right.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/right.png" alt="right.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/1thomas esef.jpg" alt="1thomas esef.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/Tony23OriBike rideresef_10_months.jpg" alt="Tony23OriBike rideresef_10_months.jpg" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/thisis the fifthtestPicture 61.png" alt="thisis the fifthtestPicture 61.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/thisis the sixthtestPicture 10.png" alt="thisis the sixthtestPicture 10.png" height="50" width="50" />
</div>
<div class="expandocontainers">
<img class="expando" src="/uploads/29.png" alt="29.png" height="50" width="50" />
</div>
</div>

</div>
</div>
</body>
</html>

Note: If the drama is too slow, reduce this number (500, highlighted, both places that it appears - scroll below code block to see the other instance) to - say, 300, or 200:


var dim = a[l][2].width * (50/a[l][2].height);
a[l][0].style.width = dim + 'px';
a[l][1].width = dim;
a[l][0].style.visibility = 'visible';
--l;
if (l > -1)setTimeout(loadem, 500);
};
a[l][2].onerror = function(){a[l][0].style.display = 'none'; --l; if (l > -1)setTimeout(loadem, 500);};
a[l][2].src = a[l][1].src;
};
for (i; i > -1; --i)
if(r.test(d[i].className))
a.push([d[i], d[i].getElementsByTagName('img')[0], . . .

bluewalrus
12-24-2008, 05:23 AM
That's it you got it, Thanks a bunch.

jscheuer1
12-24-2008, 04:21 PM
Actually, with that border, in IE it gets a bit messed up as far as the layout goes. Change this part:


<div id="phpimages">
<!--[if IE]>
<br>
<![endif]-->
<div id="loading" style="text-align:left;">

to:


<!--[if IE]>
<br>&nbsp;
<![endif]-->
<div id="phpimages">
<div id="loading" style="text-align:left;">

And IE appears to need a clear here:


. . . ture 61.png"height="50" width="50" /></div>
<div class="expandocontainers"><img class="expando" border="0" src="/uploads/thisis the sixthtestPicture 10.png" alt="thisis the sixthtestPicture 10.png"height="50" width="50" /></div>
<div class="expandocontainers"><img class="expando" border="0" src="/uploads/29.png" alt="29.png"height="50" width="50" /></div>
<div style="clear:left;"></div>
</div>

which doesn't appear to adversely affect others (FF at least).