I've been trying to get a proper 'inner zoom' jQuery plugin to function on my webshop's category page. Because i'm limited in my skills, not every one of them seems to work as easy.
However, i've found one that met my needs;
- The image thumbnail and large image are the same link source, just a width/height readjusted
- The zoom appears inside the image's 'frame'
- No 'magnifying glass' type of zoom with like 40x40px, the entire picture needs to enlarge at once
- Short, simple code
It's regarding this plugin: http://www.jacklmoore.com/zoom/
It works fine, except it only works on one image at a time (per page). When I copy the same code more than once, it only works on the first image.
How do I get it so that it works an unlimited number of times? Or perhaps any other type of zoom plugin that meets my needs?
I hope someone can help me out.
Best,
Dave
As it's explained on the plugin page, the zoom function can only be applied to images that are wrapped in some HTML tag. I think what you're trying to do is to apply the zoom function to a container that contains several images and therefore it only works for the first image.
What you could try to do is use the second code example, which should wrap the images and then apply the zoom function, but be careful so it doesn't break the styling:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
If you could provide some code from your page which shows the images and their HTML containers, it would be easier to help you out with more specific jQuery code.
Related
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"
I have a demo up here so you can look at all the html and javascript involved.
Problem:
The problem I'm having is that at the moment, when you hover over a link (other than home) and then move the mouse anywhere else on the screen (except over the home link) the home link isn't reverting to the white text color.
I tried to resolve the problem by changing the following piece of code (look in the "example.js" file linked to from the page to view full code):
if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}
I added an extra line
if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
$(".current_page_item_two a").stop().animate({ color: whitecol },500);
}
This line was intended to set the link inside the current_page_item_two element back to white when no link is hovered over (when the slider returns to the home link).
However, looking at the demo here, you can see that this creates some horrible glitches in the nav (wiggle the mouse about over the links to see what I mean, I end up causing some issue where the white rollover animations don't work at all)
Also, as a side note, why are my callback functions when animating the hover rectangle being called before the animation is complete? I'm new to jquery and I was under the impression that the fourth parameter was a function to be called when the animation was complete.
Thanks!
Your code is needlessly complex. I refactored what you want to do into a very simple jQuery plugin. If you want I encourage you to look into css3 animations to make it even smaller (although you might want to maintain cross browser compat). The code is still a little more complex than it needs to be, although that is more due to me not having much time at the moment. You can see the solution here:
http://jsfiddle.net/hGm7M/3/
Edit: updated url to add resetting slider to home and changing slider width
If you have any questions feel free to ask.
Notes:
You could move all the css into the jQuery plugin making it a self contained widget
You could separate the slider from the color system, although in this case I am not sure if it's worth it
Right now I don't set the colours in css for simplicity which means browsers without javascript will just get default coloured links. There are a number of solutions to this, but it depends on what you want to do. I tend to prefer the widget style of things, so I would serve a html menu to the client and then replace it with a js widget with all its own styling et all. This way you have graceful degradation, but the code is still simple and strait-forward.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/
I am trying to generate a html page with css that works as an image preview kind of thing. An example of this is here:
http://www.nomorepasting.com/getpaste.php?pasteid=22463
however this approach has several drawbacks. One of which is the text must always be smaller than the images. I tried using a different attempt here:
http://www.nomorepasting.com/getpaste.php?pasteid=22464
But could not get it to work. Would someone please be able to show me how to modify the code at the second link to work as the first, or to suggest an overall better method?
The error in second one is you haven't specified the height attribute.
Try the following, it worked for me.
.class1{
color:#000;
background-image:url('images/2.jpg');height:1000px;
}
The reason you are not able to see the back ground image is, since there is nothing inside the div, and the height is not specified the height is 0.
Try putting a few elements in the div and you will see that the image is being displayed.
Ramjee