I am using the ElevateZoom plugin in my web app. But the default behavior of the plugin is that the zoom section is shown only when the mouse hovers around the particular area.
What I am trying to achieve is, show the zoomed version of the image in a different DIV and will keep on showing the zoomed pic even after the mouse is removed from the pic.
Is ElevateZoom plugin able to do so by default , or has someone already achieved this functionality with the plugin.If so, any pointers or help is really appreciated.
The elevateZoom plugin can’t do this out of the box.
If you look at the plugin code (jquery.elevatezoom.js) you can see the mouseleave function on line #450 and if you are ok with editing the plugin code you can just replace self.setElements("hide") with self.setElements(""). But I don’t think this will give the desired result.
You can either find another plugin or hack your way through this one. For the latter it's good to know that you can access the elevateZoom object this way:
var $image = $('#your-image').elevateZoom({...});
console.log( $image.data('elevateZoom') );
Related
I wanted to screencapture this website (https://www.omegawatches.com/planet-omega/60th-anniversary-speedmaster/broad-arrow-1957), like seen in this video (https://youtu.be/lncVkWFyR38?t=21).
Problem is, that the site is somewhat strangely designed and seems to capture scroll inputs and translate them onto objects. e.g. arrow up / down does not work at all.
Can anybody figure out something to be able to produce some animated smoothly scrolling effect like seen in the video?
thanks a lot for any suggestions
all known methods of scrolling with vanilla js and jquery. nothing works, since the website translates any scroll input to a custom function that alters the position of various elements
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
I've used this site many times to find answers to my questions, but I can't seem to find an answer to my current issue. Any help would be great!
I'm using a custom photo pop-up feature add-on in Magento called TopUp. I contacted the original writer of the code and have not received a response. I Googled the issue and other users with Magento 1.6 and 1.7 are having the same issue.
When you click on a product image when viewing a product details page, the image should popup in the middle of the screen. Well, right now, the image pops up toward the bottom of the screen and when you click next or back, it re-positions itself further down.
Here's an exact link to a product where this applies (development site):
http://www.childress-media.com/shapingheartsforgod.org/index.php/shaping-hearts-series/pre-k-through-5th-grade/all-things-made-new/all-things-made-new-student-workbook-level-1.html
Here's the link to the Javascript pop-up program:
http://www.childress-media.com/shapingheartsforgod.org/skin/frontend/base/default/js/top_up/top_up-min.js
I've tried messing around with the CSS here and there within the file - but I can't make it do what I want.
Ideally, the pop-up would appear 100px from the top of the page and be centered and stay centered when you press next or previous.
Any help you guys can provide would be much appreciated. Thanks!
An easy, but raw way to do this is setting a css style, like:
document.getElementById('top_up').style.top = '100px';
I'm having real headaches trying to work out a problem I have at the moment on a web page, I hope you can give me a hand :D.
I have dive for a related topic but I've not found any one with the same problem, using several images.
What I want to achieve:
"I want to include draggable and resizable images in a div". The images one by on are added when a link is clicked.
I have mainly 3 problems(also explained with images):
When I add a new item and it's marked as resizable, it appears below the last image, instead of beside. (When it's nor marked as resizable it appears beside)
http://i.stack.imgur.com/1dBXF.jpg
When I drag an image, changing his Y axis, and then try to resize it, it's automatically moved to the las Y axis position (X is consistent).
http://i.stack.imgur.com/rF9KK.jpg
When I drag an image, and after I try to resize the other one, the Y position of the dragged image changes.
h**p://i.stack.imgur.com/OMWEr.jpg
I don't know what to do, thanks a lot.
I tried an attempt to recreate what you wanted to achieve and arrived at this sample
I hope it helps in some way.
Here is my resolution to the problems you are encountering:
Problem 1:
I achieved the separation of the resizable and the non-resizable images by by assigning them into separate divs. (seems easier that way :P).
Problem 2 & Problem 3:
I was not able to encounter this two problems, are you using alsoResize or grid
options?
[Updated Post]
I saw the problem you were encountering and modified my initial code, here is the result.
I provided comments on the lines that I updated.
the resizing problem you were encountering is because the img element is not absolutely positioned in the page.
I hope that this helps you in some way :)
Recently Google+ and Facebook have added a nice feature that when a user first logs in and there are new features available it displays it as a demo mode of some sort highlighting the element in question and darkening or changing opacity on the rest of the screen as a means to focus on that element. It also shows step by step tooltips for the demo.
Does anybody know of an open source script or jquery plugin that does this already?
They basically block the UI and show an overlay on top of the whole page. You can try jQuery blockUI plugin it will help you block the page and then you can show an overlay on top of it.
http://plugins.jquery.com/project/blockUI
I don't know of one, so I made one: http://jsfiddle.net/minitech/A9AAa/
It's pretty simple, call spotlightOn and pass the element on which the "spotlight" should "shine" as an argument. Call spotlightOff to turn the spotlight off.
It should degrade gracefully.