Forums

iamaw

I hate to bother you guys with this, but it's driving me crazy... Im helping my Dad build a portfolio website... so far so good. I decided to use a simple jQuery image gallery I found on Webdesignerwall.com.... http://www.webdesignerwall.com/demo/jqu ... ement.html

It does exactly what I want it to do, but the only problem is that if the images aren't all the exact same height they stretch and become distorted when browsing through the gallery. So maybe this is a jQuery problem, not CSS...?

View this page and try clicking the second or third image in the gallery on the bottom of the page...
http://garyawinter.com/wordpress/?page_id=16

You'll notice that at first the image dimensions get screwed up completely... but if you keep clicking through the gallery they eventually fix themselves and display as they should. Is there anyway to prevent the images from having this problem at all? Please let me know, Im pulling my hair out trying to figure this out and I really dont want to change all the images to be the exact same dimensions as a shortcut to solve this problem.

Here is the jQuery code (unaltered besides the heading tags, I used exactly what WDW provided):


<script type=\"text/javascript\" src=\"http://garyawinter.com/wordpress/wp-content/themes/gaw/js/jquery-1.2.6.min.js\"></script>

<script type=\"text/javascript\">
$(document).ready(function(){

	$(\"h4\").append('<em></em>')

	$(\".thumbs a\").click(function(){
	
		var largePath = $(this).attr(\"href\");
		var largeAlt = $(this).attr(\"title\");
		
		$(\"#largeImg\").attr({ src: largePath, alt: largeAlt });
		
		$(\"h4 em\").html(\" (\" + largeAlt + \")\"); return false;
	});
	
});
</script>

The markup:


<img id=\"largeImg\" src=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/1.jpg\" alt=\"Large image\" />

<h4></h4>

<div class=\"thumbs\">

<a href=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/1.jpg\" title=\"Image 1\"><img src=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/1_thumb.gif\" /></a>

<a href=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/2.jpg\" title=\"Image 2\"><img src=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/2_thumb.gif\" /></a>

<a href=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/3.jpg\" title=\"Image 3\"><img src=\"http://www.garyawinter.com/wordpress/wp-content/themes/gaw/images/nails/gallery/3_thumb.gif\" /></a>

</div>

<div id=\"clear\"></div>

And in case it matters, the CSS:


h4 {
	font: bold 190%/100% Arial, Helvetica, sans-serif;
	margin: 0 0 .2em;
}
h4 em {
	font: normal 80%/100% Arial, Helvetica, sans-serif;
	color: #999999;
}


#largeImg {
	border: solid 1px #ccc;
	width: 496px;
	height: 100%;
	padding: 5px;
}
.thumbs img {
	border: solid 1px #ccc;
	width: 75px;
	height: 75px;
	padding: 3px;
	margin:5px 1px 0px 0px;
	float:left;
}
.thumbs img:hover {
	border-color: #FF9900;
}

chazzwick

i think if you put the large image in a div with this style:

div.portfolio-img  {
    height:xxx px;
    width:yyy px;
    overflow: hidden;
}

then set the image to be the same width as its containing div:

div.portfolio-img  img {
    width:yyy px;
}

then it should keep to your dimensions without stretching the image.

iamaw

Hey chazzwick... that wasn't quite it (unless I did something wrong)... but you got me on the right track!
I created a new div around the largeImg called largeImgWrapper and gave it these styles:


#largeImgWrapper  { }
#largeImgWrapper  img { width:auto; height:auto; }

Now it works in Firefox perfectly. Try it out.
Unfortunately it still isn't working properly in IE. If you try it in IE, you have to click the thumbnail twice for it to adjust to the correct dimensions. Anyone have any idea how to that?

Thanks again chazzwick!

iamaw

Anyone know how the image gallery can be fixed in IE? Sorry for the bump, but I'd appreciate any help I can get...!

http://garyawinter.com/wordpress/?page_id=16

treehouse : what would you like to learn today?

Forums

Stretched Image Problem