jQuery morphing gallery

2008-10-05

A gallery that "morphs" images between transitions

jQuery morphing gallery example

Html code

<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>

Javascript

$(".jmorph").jmorphGallery();

Download jQuery morphing gallery files

Share this with the world

Related

Comments

Adam

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 07:11:26
العاب

it's not work for me any fix for ie7 ?

Posted on 2009-01-07 14:08:17
John

Yeah, I'm having the same difficulties with IE. Gives error: Object doesn't support this property or method.

Any ideas of why this is happening?

Posted on 2009-01-10 02:11:27
Codeassembly

It was because of an extra , on which IE was chocking.

Posted on 2009-01-12 11:42:02
Dylan

I 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 15:47:47
Alexandre Broggio

very cool galery

Posted on 2009-04-16 17:12:43
Alaa Al-Hussein

This is a wonderful image gallery in jQuery. I like it.

But 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

Posted on 2009-06-30 13:27:37
Badran

Nice image gallery and wonderful animation.

IE6 is the bug of the world.
But this gallery look good in all browsers.

Posted on 2009-08-12 13:54:38
Bora

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...

Kind regards

Posted on 2010-02-12 13:08:27
Autumn

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
<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.

Posted on 2010-04-09 19:59:08
Autumn

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 22:18:36
Autumn

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
<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.

Posted on 2010-04-09 19:42:36
govicinity

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 16:32:26
John

Hello, 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

#container img {
margin: 0 auto;
}

#container img {
text-align: center
}

Nothing would work.

Thank you!

Posted on 2011-02-13 14:03:13
Sindhura

Hi,

How do I disable the next link, when there are no further images?

Posted on 2011-03-28 09:07:08
zaba

Is there an autoplay function?

Posted on 2011-07-28 15:32:29

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu