A gallery that "morphs" images between transitions
jQuery morphing gallery example
<div class="jmorph"> <div class="imageContainer"> <div class="image"> <div class="currentImg" style> <div class="nextImg"></div> </div> </div> </div> <div class="clearfix"> <a href="#previous" class="previous">< Prev</a> <div class="bandContainer"> <ul class="band"> <li><a href="1.jpg">Forest</a></li> <li><a href="2.jpg">Cliff</a></li> <li><a href="3.jpg">Sky</a></li> <li><a href="4.jpg">Town</a></li> <li><a href="5.jpg">Trees</a></li> </ul> </div> <a href="#next" class="next">Next ></a> </div> </div>
$(".jmorph").jmorphGallery();
Download jQuery morphing gallery files
Share this with the world
Related
Comments
Is there any way to do this without the unordered list at the bottom? IE, if I just want next/previous buttons? Also, how do you get the last image to loop around to the first image? Thanks.
Posted on 2008-10-12 00:11:26it's not work for me any fix for ie7 ?
Posted on 2009-01-07 07:08:17Yeah, I'm having the same difficulties with IE. Gives error: Object doesn't support this property or method.
Posted on 2009-01-09 19:11:27Any ideas of why this is happening?
It was because of an extra , on which IE was chocking.
Posted on 2009-01-12 04:42:02I think it'd be neat if the size of the image fading out, was slowly morphed to fit the size of the image fading in. Of course there'd be distortion, but since it's fading out, it might look cool.
Posted on 2009-03-24 09:47:47very cool galery
Posted on 2009-04-16 10:12:43This is a wonderful image gallery in jQuery. I like it.
Posted on 2009-06-30 06:27:37But i experienced a bug while testing it... in IE6, the size of the frame dosn't work perfect. (I hate IE6 but lot of people are using it)
Another thing:
This gallery needs loading function.. shows the visitor a loading bar or something let to wait for image to load. Needed in previous and next images. When you click on the next button or another image, the previous one stays till the next is loaded.
I think this should be fixed.
Thanks
Nice image gallery and wonderful animation.
Posted on 2009-08-12 06:54:38IE6 is the bug of the world.
But this gallery look good in all browsers.
it is successful jquery gallery. But the description for the name is not right I think. It should be fading jquery instead of morphing. Because in the morphing process, the content of the image should warp. Not only the size of the image...
Posted on 2010-02-12 06:08:27Kind regards
I used this gallery on my website but I was hoping to add captions to the images. Does anyone know how to do this? If I place it as shown
Posted on 2010-04-09 12:59:08<li><a href="images/ekohWordmark.png"></a>CAPTION</li>
it appears and then when I "next" it disappears and doesn't come back when I "prev" back to the image the caption was place on.
Plus it sort of falls off the page in a very ugly manner as you "next" to the next image.
I used this gallery on my web site and I was wondering how to add a caption to the images that can be recalled when leaving the image and then returning to it.
Posted on 2010-04-09 15:18:36I used this gallery on my website but I was hoping to add captions to the images. Does anyone know how to do this? If I place it as shown
Posted on 2010-04-09 12:42:36<li><a href="images/ekohWordmark.png"></a>CAPTION</li>
it appears and then when I "next" it disappears and doesn't come back when I "prev" back to the image the caption was place on.
Plus it sort of falls off the page in a very ugly manner as you "next" to the next image.
Nice gallery, I'd really like to see to see the possibility of adding in captions in a semi-transparent div over the image at the bottom of each image, this gallery is so much easier to use than most, and I really think it could lift it above many of the other galleries available at the moment. Gov
Posted on 2010-06-09 09:32:26Hello, i have a problem aligning the images in the center of the grey box. Can you give me a hint how to do that ? I tried
Posted on 2011-02-13 07:03:13#container img {
margin: 0 auto;
}
#container img {
text-align: center
}
Nothing would work.
Thank you!
Hi,
Posted on 2011-03-28 02:07:08How do I disable the next link, when there are no further images?
Is there an autoplay function?
Posted on 2011-07-28 08:32:29Make yourself heard