Buying Fix this Jquery Script. Easy

Hello,

I am a begginer when it comes to javascript; however want to implement a jquery effect.

The tutorial i followed is:
http://www.sohtanaka.com/web-design/...fect-w-jquery/

And i have managed to get that all working fine.
However, my images are all different sizes. And the code resets the width and height to a fixed value. Causing problems.

A user did make a comment fixing this problem, and a description of what they did:

Quote:
To fix this to work with panoramic images, I did the following :
First, I removed the width and height declarations from zoomer.css for the image itself. I set those values manually using php’s getimagesize and aspect ratios to create the “thumbnail”

Next I added 2 variables owidth, and oheight directly under the line
$.fn.Zoomer = function (b) {
in zoomer.js.

Then in the addClass(“hover”) i changed width and height to :
width: ($(this).find(‘img’).attr(‘width’)*1.60),
height: ($(this).find(‘img’).attr(‘height’)*1.60),

and in the removeClass(“hover”) i changed width and height to:
width: owidth,
height: oheight,

I did it this way, because using height: ($(this).find(‘img’).attr(‘height’)/1.60),
was catching the value of another image when i moused over multiple images causing nasty scaling issues. Hope this helps someone.
Here is my code

HTML
Code:
<ul class="thumb">
<li><a href="#"><img src="images/t1.png"/></a></li>
<li><a href="#"><img src="images/t2.png"/></a></li>
<li><a href="#"><img src="images/t3.png"/></a></li>
<li><a href="#"><img src="images/t4.png"/></a></li>
<li><a href="#"><img src="images/t5.png"/></a></li>
<li><a href="#"><img src="images/t6.png"/></a></li>
<li><a href="#"><img src="images/t7.png"/></a></li>
</ul>
<ul class="thumb">
<li><a href="#"><img src="images/t8.png"/></a></li>
<li><a href="#"><img src="images/t9.png"/></a></li>
<li><a href="#"><img src="images/t10.png"/></a></li>
<li><a href="#"><img src="images/t11.png"/></a></li>
<li><a href="#"><img src="images/t12.png"/></a></li>
<li><a href="#"><img src="images/t13.png"/></a></li>
<li><a href="#"><img src="images/t14.png"/></a></li>
<li><a href="#"><img src="images/t15.png"/></a></li>
</ul>

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

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-5px', /* The next 4 lines will vertically align this image */
marginLeft: '15px',
width: '0px', /* Set new width */
height: '45px', /* Set new height */
padding: '0px'
}, 150); /* this value of "200" is the speed of how fast/slow this hover animates */

} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '30px', /* Set width back to default */
height: '55px', /* Set height back to default */
padding: '0px'
}, 400);
});

//Swap Image on Click
$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});

});
</script>
CSS
Code:
ul.thumb {
float: left;
position:relative;
list-style: none;
padding:0;
margin:0;
}
ul.thumb li {
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 30px;
height: 55px;
}
ul.thumb li img {
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
border: none; /* Get rid of border on hover */
}



If somebody can fix this code to have it working with different size images, i will offer $15-USD.

Kind Regards
Chris

 

im still looking for someone to fix this.
easy 15usd, if you are familier with jquery.

 

Please reply to the PM