search

jmartsch / jquery-hoverZoom

A lightbox and gallery alternative
http://jmar.github.com/jquery-hoverZoom/
22 stars 17 forks source link

Original trigger not returning to the correct position #7

Closed jeffsure closed 12 years ago

jeffsure commented 12 years ago

Hi,

Your solution is just what I need for a client, but I have a problem. The first image in the series doesn't return to the correct placement after zooming. See what I mean here: http://surette.biz/clients/neville

The image at the upper left is the problem. I don't know much about .js, so I'm asking for help. Thanks!

Jeff

jmartsch commented 12 years ago

Hi Jeff, i will post feedback at the weekend (i think sunday). Could be something with the positioning of elements. Maybe somewhere position: relative is missing in your stylesheet.

jeffsure commented 12 years ago

Thank you Jens. I’ll look it over again myself. I look forward to your insight.

Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

On Dec 9, 2011, at 11:45 AM, Jens Martsch wrote:

Hi Jeff, i will post feedback at the weekend (i think sunday). Could be something with the positioning of elements. Maybe somewhere position: relative is missing in your stylesheet.

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3082207

jmartsch commented 12 years ago

It could be the parent container where your images are in. Try to give it position: relative. If not done yet.

jmartsch commented 12 years ago

You are initzializing the plugin two times for the same elements. You have one call in the head of your document and one in the foot. Try to remove the one in the foot, before the < /body> element. I hope that helps.

jeffsure commented 12 years ago

That fixed it. I have no idea why that was there. Good to have another pair of eyes look things over. Thanks for your help!

Jeff

jmartsch commented 12 years ago

Glad i could help you.

jeffsure commented 12 years ago

Hi Jens,

Thanks again for your help, and now I have another problem I’m hoping you can help with. If you view this page in IE7 the zoomed image comes up behind some of the original images, depending on the row it originates from (the upper left image zooms behind all the stamps, and the lower right is in front.) All other browsers work as expected, including IE8.

http://surette.biz/clients/neville/index.php

Any idea what might cause this? I appreciate your time and thoughts.

Jeff

On Dec 12, 2011, at 8:28 PM, Jens Martsch wrote:

Glad i could help you.

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3117386

jmartsch commented 12 years ago

Hi Jeff, as i am missing an IE7 Installation i can´t test it. But i know there is a bug in IE6-7 you find a fix in line 246:

// set z-index of parent element
        // because IE 6-7 create a new stacking context on positioned elements
        // see http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
        if (original.closest('li').css('z-index') == 0) {
        original.closest('li').css({'z-index': '100'});
        };

Maybe setting the value 100 to a higher (1000) value helps?

jeffsure commented 12 years ago

Hi Jens,

Yes, that almost worked, but I had to change the structure o f my page to make the triggers li elements, as they weren’t before. Then I also had to go to lines 423 - 428:

    //original.get(0).src = originalSrc;
    // reset z-index of parental li (fix for IE 6-7)
    if (original.closest('li').css('z-index') == 100) {
        original.closest('li').css({'z-index': '0'});
    };
    });

and lines 444 - 449:

    // reset z-index of parental li (fix for IE 6-7)
    //log(original.closest('li'));
    if (original.closest('li').css('z-index') == 100) {
        original.closest('li').css({'z-index': '0'});
    };
    });

and change those 100s to 1000. That seemed to do the trick.

Thanks again!

Jeff

On Dec 20, 2011, at 3:46 PM, Jens Martsch wrote:

Hi Jeff, as i am missing an IE7 Installation i can´t test it. But i know there is a bug in IE6-7 you find a fix in line 246:

// set z-index of parent element
      // because IE 6-7 create a new stacking context on positioned elements
      // see http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
      if (original.closest('li').css('z-index') == 0) {
      original.closest('li').css({'z-index': '100'});
      };

Maybe setting the value 100 to a higher (1000) value helps?

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3225014

jmartsch commented 12 years ago

Glad i could help.

jeffsure commented 12 years ago

Jens, now the problem is back, but it’s only IE7 that works fine; all other browsers are not working correctly. When I hover over a trigger image, the zoomed image is behind only the trigger images that follow it in the list. The triggers in the list that are before the zoomed image are properly behind the zoomed image. I’m stumped, and hope you can see where there might be a problem. I reverted back to the original jquery.hoverZoom.js file, hoping that would get me back to where I was, but it didn’t.

The site is now live at http://www.nevilledesign.biz/

Any help or insight would be greatly appreciated. My client is anxious to get this fixed, as am I.

THanks, and Merry Christmas!!

Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

On Dec 20, 2011, at 5:05 PM, Jens Martsch wrote:

Glad i could help.

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3226180

jmartsch commented 12 years ago

Hey Jeff, please try it with the same HTML structure as in my example please:

<li><a href="fullSizeImage.jpg" /><img src="thumbnail.jpg" /></a></li> <li><a href="fullSizeImage2.jpg" /><img src="thumbnail2.jpg" /></a></li> <li><a href="fullSizeImage3.jpg" /><img src="thumbnail3.jpg" /></a></li>

Drop the divs in the list element. Please report back if that works.

Merry Christmas back to you.

jmartsch commented 12 years ago

Ok. That didn´t work. I try to figure out what happens. Must be something in your stylesheet i think.

jmartsch commented 12 years ago

Jeff, please remove the line with z-index: 10 in the .homeStamp class in mainstyles.css. That should help.

jeffsure commented 12 years ago

done, but I’m afraid it didn’t help.

Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

On Dec 23, 2011, at 11:06 AM, Jens Martsch wrote:

Jeff, please remove the line with z-index: 10 in the .homeStamp class in mainstyles.css. That should help.

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3262129

jmartsch commented 12 years ago

Please modify the javascript call and use #homeStampContainer instead of .homeStamp:

$('#homeStampContainer img').hoverZoom({speedView:600, speedRemove:400, showCaption:false, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center', loadingIndicator : 'path/to/ajax-loader.gif'});
jeffsure commented 12 years ago

I’m afraid no luck with that either.

I added the ajax-loader.gif, but it appears in the wrong place. I’ll probably just take that out, as the images are small enough that there won’t be an issue with load times.

Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

On Dec 23, 2011, at 11:29 AM, Jens Martsch wrote:

Please modify the javascript call and use #homeStampContainer instead of .homeStamp:

$('#homeStampContainer img').hoverZoom({speedView:600, speedRemove:400, showCaption:false, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center', loadingIndicator : 'path/to/ajax-loader.gif'});

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3262337

jmartsch commented 12 years ago

Now i see the problem. You added the following in jquery.hoverZoom.css :

.homeStamp, .homeStamp{
     list-style: none;
     margin: 0;
     z-index: 0;
}

Please remove the z-index: 0; And why do you repeat .homeStamp declaration? That should fix the problem.

jeffsure commented 12 years ago

Yes, removing that index: 0 fixed it. Thanks! I must have added it in an attempt to solve the problem myself and forgot to delete it later.

As for the double .homeStamp declaration, I saw line 1 of your original jquery.hoverZoom.css file:

.thumb, .thumb {float: left;list-style: none;margin: 0; }

so I assumed that it was necessary, so I replaced your .thumb with my homeStamp. If it’s not needed twice I’ll delete one.

Thanks again! Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

On Dec 23, 2011, at 11:53 AM, Jens Martsch wrote:

jeffsure mailto:reply@reply.github.com Freitag, 23. Dezember 2011 17:41 I’m afraid no luck with that either.

I added the ajax-loader.gif, but it appears in the wrong place. I’ll probably just take that out, as the images are small enough that there won’t be an issue with load times.

Jeff

Jeff Surette

Surette Creative

Graphic Design, Art Direction, Visual Wizardry

10 Moseley Street, Billerica, MA 01821 978.294.9249 www.surette.biz linkedin.com/in/jeffsurette

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3262438 jeffsure mailto:reply@reply.github.com Freitag, 9. Dezember 2011 16:57 Hi,

Your solution is just what I need for a client, but I have a problem. The first image in the series doesn't return to the correct placement after zooming. See what I mean here: http://surette.biz/clients/neville

The image at the upper left is the problem. I don't know much about .js, so I'm asking for help. Thanks!

Jeff

Reply to this email directly or view it on GitHub:

https://github.com/jmar/jquery-hoverZoom/issues/7

Now i see the problem. You added the following in jquery.hoverZoom.css :

.homeStamp, .homeStamp{
    list-style: none;
    margin: 0;
    z-index: 0;
}

Please remove the z-index: 0; And why do you repeat .homeStamp declaration? That should fix the problem.

Reply to this email directly or view it on GitHub: https://github.com/jmar/jquery-hoverZoom/issues/7#issuecomment-3262541