0

I am working on this image hover zoom part using jquery . The codes works fine , as the bigger image is showed on mouseenter and hides on mouseleave. since, the image showed on hover can have dynamic width and height(it depends on the image size..) i want to decrease the image width and height to 75% of the actual width and height.. even that is fine and it works..

now the problem i am facing is, whn mouse enters for second time, the image is reduced again.. third time it gets smaller than the second time... so eachtime mouse enters, image gets smaller and smaller...(which i think is obivous since each time mouseenters it reduces the image by 75%...) i have tried lots of things like creating a global variable, and checkin it.. if (first time) thn (reduce) else (reduce from the original image ).

BUT cannot make it work.. here is my code....

http://jsfiddle.net/ugnNU/11/

hoping for some advice. your help will be appreciated.

Thanks.

Eli
  • 14,779
  • 5
  • 59
  • 77
bipen
  • 36,319
  • 9
  • 49
  • 62
  • sorry i forgot to add... the '.thumbnail-item' div can be multiple...i have two in the fiddle.
    ...
     – bipen Oct 15 '12 at 14:30

3 Answers3

2

I tried to update your code as little as possible. Here is an example of how to do what I think you are trying to do. http://jsfiddle.net/ugnNU/12/

There are many many ways to get there, I chose this one because it came close to what you already had.

I added this:

var childImage = $(this).children("div.tooltip");

if (childImage.attr('saveWidth') == ""){
   //we haven't saved it's height yet
   childImage.attr('saveWidth', childImage.width()); 
   childImage.attr('saveHeight', childImage.height());
}

var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;

var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;

Basically it just checks to see if we have already saved the 'tooltip' image height inside an attribute. If we have, it just uses that value. But if not, we save the height or width inside that attribute and then uses it.

I'm also only selecting ("div.tooltip") once and saving it in childImage. The reason for this is that each time you do this $(selector) jQuery has to go find that element. If you do this alot, it can impact performance. So it's good practice to just save your selector in a local variable.

davehale23
  • 4,374
  • 2
  • 27
  • 40
  • thanks.... but i think u forgot to mention add this saveWidth="" saveHeight="" attr to
    , since the code worked only after i added these attributes on my div....thanks a lot... anywasy.. appreciat ur help....
     – bipen Oct 15 '12 at 15:04
  • You should update the DOCTYPE if you are using this. http://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag. If you are using HTML5 you can prefix it with 'data-' – Aman Oct 15 '12 at 15:25
  • hmm, I'd be interested in knowing which browser you are using @bipen. I tried the fiddle in IE9, Chrome 23, and Firefox 15 and all three worked without explicitly setting the saveWidth="" and saveHeight="" attributes in the html. Also, the first example on the [docs page](http://api.jquery.com/attr/) for `.attr()` does not explicitly set anything, it just modifies an `` tag. Let me know what's going on there, I'm interested. – davehale23 Oct 15 '12 at 15:36
1

http://jsfiddle.net/ugnNU/13/

It does not use a custom attribute. It just undoes in mouseleave, what you did in mouseenter

Aman
  • 153
  • 6
-1

each time you call this code

    var hoverImgWidth = $(this).children("div.tooltip").width();
    var finalHoverImagewidth = hoverImgWidth * 0.75;

The width value of div.tooltip gets multiplied with 0.75.

The next time the code is executed this gets the current width (the lowered value) and lowers that again.

You could set the size back again when you hide it, but my advice would be to calculate the values on document ready and only show and hide the image with the mouseenter and mouseleave events.

retanik
  • 174
  • 12
  • (which i think is obivous since each time mouseenters it reduces the image by 75%...) . can u please read my question again.. i think u r saying the same think which i hv mentioned with no solutions..?? – bipen Oct 15 '12 at 14:42
  • As i stated, you could set the value back for the tooltip when you mouseleave... I give two solutions in my last two lines do you see, set the value back after mouseleave or move the calculate code to a document ready function. Aman showed in his jsfiddle how to set the values back, this should fix you problem right? – retanik Oct 15 '12 at 14:46
  • ok first thing ur "move the calculate code to a document ready function" won't work at all .. since there ,it won't be able to calculate the width and height of the current element...i.e "$(this)". – bipen Oct 15 '12 at 15:10
  • secondly, "size back again when you hide it"... i created js fiddle since u guys can have a look and try it out urself ,without losing ur precious time setting it up... else i would have pasted the raw codes here...... anyways thanks for u r help.... – bipen Oct 15 '12 at 15:19