I am using JQuery hover zoom (http://jmar.github.com/jquery-hoverZoom/) Its working fine.
The thumbnails that I have is of different sizes . So I stated using the masonry plugin for arranging it. Both of them work fine when isolated but collectively the masonry plugin doesn't work as intended. Pictures start to overlap each other.
What I feel is that both Masonry and the JQuery hover zoom , interact with the same div element which causes the problem, Both are adding their attributes to it.
How can I fix this ?
Is there some way that I arrange the rows without the masonry? So that the conflict wont occur ?
Can you show us the code? It's propably the z-index fault. My guess would be setting very high (try 9999 at first, then justify it to your needs) z-index value for .zoomed (class that is added to element when hovered).
Related
I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!
In my angular app, I'm using ui-sortable to sort an <ul>.
The elements itself are resizable.
This is similar to the setup I have:
And I would like that "4" and "5" use the space on top of them:
Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.
Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.
So how can I achieve this?
Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
What are my options without getting rid of the libraries I already have?
What are my options getting rid of the libraries I already have?
I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout
I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.
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"
Does anyone know if it's possible to create a carousel of images in prototype and then drag+drop those images from the carousel onto a droppable div?
I've tried the same thing using jQuery UI's draggable/droppable plugins with jCarousel without luck. Thanks!
I think the trick to doing this is to carefully manage containment of the carousel. My experience of Drag and Drop with Prototype/Scriptaculous has been that if the source is contained within an element with overflow set to hidden or scroll then you can't drag out of it. Carousels are often contained in div's with the overflow set to hidden so if the animations to move from one image to another are not perfectly in sync the element size doesn't pulse.
One option would be to have your carousel use equally sized images which are absolutely positioned, to the same co-ordinates, and simply fade from one to the next, then the containment can be simple (or have none at all), then the scripty drag/drop should work ok.