I would like to implement a google images kind of view of images(and other details) on click.
When a image is clicked, additional data expands under it with a arrow pointing to the starting position and when an other image is selected the first one collapses and the other expands. Does something like that exists(open source) or is there only the option to implement it myself?
Screenshot of what I mean:
Thank you
Photoswipe is a great responsive javascript library.
This is a link to an example of Photoswipe.
You can add caption, customize backgrounds very similar to google image search.
Once you click on the photo Photoswipe will let you display your images on your page using standard html, css and javascript. You can add captions as you see below.
Attached Detailed Guide for Photoswipe
Related
I'm using http://photoswipe.com for my picture gallery.
Now i would like to implement a reply/info bar/pane like they have here.
http://www.fotosidan.se/gallery/viewpiclarge/356031/3549694.htm?_p=3549689
But i don't know how to create the element in the code so that it pushes away the image in stead of creating an overlay.
I am in search of a slider in which the slider should hover on the preview image itself. I searched in google but they are not available for free of cost. Any free plugins? Please post the link.
I have to get a slider same as the below image.
Online there are plenty of sliders and is fairly easy to create your own. I put the link of one that I really like and that you can customize to your liking.
http://fotorama.io/
Take a look to customize link-> http://fotorama.io/customize/
Is there any Jquery plugin available where I can put in my images in HTML and on hover it would show some animation and description coming from the bottom of the image to cover about half the image.
I've seen that on some websites but I don't really know the plugin name. Any help is appreciated.
Check these galleries:
http://codecanyon.net/item/hoveralls-v13/full_screen_preview/1367456
http://www.jacklmoore.com/colorbox
http://nivozoom.dev7studios.com/
I guess that the first one (with the rats demo) will fit your needs best.
When you look at the results on the google search page, you can see the google plus one button animation when you hover over the link or link description for every result.
I was searching internet but was not able to find any tutorial how to achieve this effect on a image or element in general.
Any suggestion or link to tutorial using jquery?
Thanks in advance.
It is one image containing multiple frames. I assume The image is used as background via CSS and the background position is changed rapidly (through JavaScript) to create the animation effect.
The image is:
I use Imageflow carousel combined with HighSlide image thumbnail viewer. I joined them together as it's described in the documentation here. It looks like everything works well. The only thing I can't figure out how to make work is dimmingOpacity option. It fills all the background with the color I set when the image pops up with HighSlide. I did all how it's described in the documentation and tried other variants but couldn't make it work.
The demo page is here. There is a Products link on the left, clicking on that you will get to the gallery.
What can I do about this?
I solved the issue by replacing highslide.js with highslide-full.js. Now it works fine.