jmartsch / jquery-hoverzoom

A lightbox and gallery alternative

Hi 👋, I'm Jens

A passionate developer from Germany who strives to make the web better

• 👯 I’m looking to collaborate on new website projects

• 👨‍💻 Some of my client projects are showcased at https://dotnetic.de

• 📫 You can reach me via [email protected] or for business purposes at [email protected]

Achievements:

Connect with me:

Languages and Tools:

 

jquery-hoverzoom's Issues

loading image position

Hi,
cool plugin, exactly what I'd been looking for, even better.
A detail:
My thumbnails are not square. Therefore in the .js, line 175 for top it should be original.height not .width so the loader image is in the middle. (if thumbs are square, it doesn't matter, of course.)
Thanks!
Cheers, Ralf.

Links on the thumnbails

Could you add an option to add links to the thumbnails? Maybe into a data-href or something similar.

Options problem

script's default options definitions and your web site are differs.

page says;

showCaption (true | false)
loadingIndicator (ajax-loader.gif)

and script says;

altAnim (true | false)
ajaxLoader (path of loader)

these are just two issues I found. you know the best man :)

iPad exit

Hello, Awesome thing you have made here.

Only problem is when on an ipad, the user does not have a mouse to move to trigger an exit.

How about an option for a 'close link on the caption'
would be awesome.

thanks!

Separate images possible?

Hello,

I really like your login, but i'm facing the problem that it's all inside

tags (next to eachother). I'd like to make the plugin react on single tags, is this also possible?

That way i could use it on a restaurant menu with little images in front of the product, and when you hover it pops up the image.
I tried to alter it a bit, but i can't get it to work since the thumbnails keep overlapping eachother if i don't use it in li's.

I'd really apreciate your help on it. Anyway keep up the good work, really like the plugin!

Best regards,
Peter

Full image not displaying when div before class.

  <div id="header">
                            <a href="/" "logo"><img src="images/logo-bottom.gif" width="162" height="114" alt="" title="" border="0"></a>
                                    <ul class="navigation">
                                            <li class="active"><a href="/">Home</a></li>
                                            <li><a href="ourwork.php">Our&nbsp;Work</a></li>
                          i                  <li><a href="contact.php">Contact</a></li>
                                    </ul>
                    </div>
            <div id="body">
                         <div id="content">
                            <div class="content">
                              Content here.
                            </div>
                             <span class="subhead_text"><img src="images/Orange_BAR_Long.jpg" width="640" height="6"></span></p>
                             <ul class="thumb">
                               <li><a href="images/before-1.jpg"><img alt="Our First Projects" src="images/before-1-thumb.jpg" /></a></li>
                               <li class="noborder"><a href="images/after-1.jpg"><img alt="Our First Projects" src="images/after-1-thumb.jpg" /></a></li>
                             </ul>
                         </div>
                    </div>

If I remove the body div the image displays fully. Otherwise the image only goes until the header is displayed and cuts off the top of the image.

CSS:
body {
margin:0;
padding:0;
border: 0 none;
outline: 0 none;
font-size: 100%;
vertical-align: baseline;
background: none repeat scroll 0 0 transparent;
}
#header{
height:72px;
background: url("../images/bg-body.gif");
background-repeat:repeat-x;
position:relative;
top:-4px;
margin:0 auto;
}

#header a#logo{
position:relative;
z-index:100;
}

#header a#logo img{
border:0;
}

/-------------- Navigation style ---------------/
#header ul.navigation{
list-style-type:none;
margin:-82px 0 0 300px;
padding:0;
overflow:hidden;

}

#body div#content{
margin:0 auto;
margin-left: 20px;
margin-right: 50px;
overflow:hidden;
background-image:none;
height:600px;
overflow:hidden;
}

#body div#content .content{
float:left;
margin-left:100px;
margin-right:50px;
background-image:none;
height:auto;
overflow:hidden;
}

I can give you the full code if you need to review it.

support for spin.js

Add support for CSS3 spinner image instead of animated gif:
http://fgnass.github.com/spin.js/

Maybe Not a Bug, but Issues...

Though my site has become more than just a template, I am using what was originally the Helio template. Your hoverzoom seems to have a conflict with a file that is used in the template, init.js. When you open larger picture by hovering over thumb it doesn't stay in it's constraints and pushes out of the white border box and pushes the caption downward. I isolated the init.js file by trial and error, and seriously I am not sure how to alter either the init.js file to stop messing with the zoom nor am I sure which file or setting in the css files provided with this "plugin" defines the look of the pop-up zoomed picture. Thanx for any help, the page on my site is here... http://www.henrycompany.com/Henry-Company-Bargain-Page.html ... click on the Hammond or Merrillville in side menu to see pics, the page is a work in progress... so can the criticism... lol

Original trigger not returning to the correct position

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

Alt text issue

I don't know the script does try to make the image centered or not, but when I set the "altAnim" option as "false", script doesn't calculate the alt text's lost space and it's seems a bigger empty space bottom of the image rather than the top's space.

Demo not functioning

thumbnail issue zooming back again instantly while zooming out

When using this values:
speedView:2500, speedRemove:1400

Instantly hover back on image when its zooming out to make it zoom in again, the thumbnails image shows in the main container (which is centered while image is totally zoomed in).

Can't attach screenshot here! :(

Tested under Chrome 12.v

Leaving zoomed image open

The plugin currently zooms back out (disappears) once the mouse leaves the original thumbnail. Is it possible to only zoom/collapse the expanded image once the mouse leaves the zoomed-in container, rather than the original thumbnail?

iPad

Great software! The demo works fine on my desktop but when I try on my wife's iPad, I can not get it to move off the enlarged mage like it does on the desktop.
What am I missing?

Demo is broken

Image doesn´t scale with container. Accidently uploaded V1.1 which uses background-images.

Zooming Doesn't work when Other Js file exits

I don't know very much about JQuery...
But Plugin did not worked when i added it to my site....
then i figured that the navigation menu which i also used in my site also uses Jquery...
when i comment the menu JS file in the program the plugin worked perfectly...
as i remove the comment my menu works perfect but this plugin doesn't work...

I WANT TO IMPLEMENT BOTH OF THE THING WHAT CAN I DO FOR IT...PLEASE HELP...

maximum width and height of zoomed image

How I can set a fixed value for width/height image zoomed ?