Jquery Image Gallery

[peteburgess]

Hi Everyone,

I came up with a way to use jquery and the InnerFade jquery plugin to create a transitioning image slideshow that can be easily managed through phpwcms thanks to the image content part and template.

Here is the url to the tutorial:

http://coresmart.com/plugins/jquery_gallery/

and/or a direct link to download the files:

jquery_phpwcms_gallery.zip

(300.21 KiB) Downloaded 369 times

The great thing about InnerFade is that it is not limited to just transitioning images. You can also transition other forms of content.

I will try to keep an eye out for anyone who needs help here in this forum. For more information regarding JQuery just visit http://jquery.com and InnerFade visit http://medienfreunde.com/lab/innerfade/. I am not an expert when it comes to them but post your questions anyways. I'm sure there are more helpful people roaming around in here.

I hope this is useful.

[flopi]

very nice. i will try this one.

[peteburgess]

Great! Thanks for trying it out. Please let me know what you think.

[jsw_nz]

I'm a big fan of jQuery - (had to make a couple of mods to wcms - to use jQuery plugins)
- that done -- seeing this enhancement is very welcome - thanks peter -

[peteburgess]

Yeah I am a jQuery fan as well. Thanks for checking it out.

[jsw_nz]

Hey - Just a followup - finally looked over and tested this - works fine -
did have a suggestion however - seems there are occasions of 'blips'
(images appear stacked for a split second during load)
when the page loads and before jQuery runs the code - might be
because of the fact of large images and/or higher number of images

Anyway i decided to put a wrapper id div around the template you suggested
and set the opacity of it to 0 (CSS)

Code: Select all

#rotatorContainer {
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
}

Then on the page load - I added a setTimeout and animate the opacity:

Code: Select all

jQuery.noConflict(); // using this in order not to conflclt with mootools....

jQuery(document).ready(function() {
    setTimeout( function() {
      jQuery('#rotatorContainer').animate({opacity: 1}, 1500);
      jQuery('.rotator').innerfade({ 
        animationtype: 'fade',
        speed: 2000, 
        timeout: 8000, 
        type: 'sequence', 
        containerheight: '300px'
      });
    }, 2000 ); 
});

Seems to work smoothly now
BTW the code can target class divs as well as ID divs
Anyway very nice - cheers
-j-

[peteburgess]

Cool. Thanks for adding that. Another option is to just set all images/slides except for the first one to:

Code: Select all

display: none;

This will hide all slides other than the first slide onload.

Thanks for checking this out.

[jsw_nz]

Cheers - I tried that - which works fine - however if there are other elements below the image rotator div - once jQuery fires - everthing gets repositioned - so this a a solution for smooth (not abrupt) page load - big thanks!

btw - have any other jquery / wcms tips/tricks?

[mennonot]

I had the problem jsw_nz described of all the images loading briefly on top of one another before the javascript loaded. The solution described by peteburgess worked great to fix the problem with load order, but only after I figured out the display none needed to be applied to the li tag, not to the img tag. So for others who might have the same confusion I did, here's what my code looked like once I added the display none to all of the slides besides the first:

Code: Select all

        <ul id="rotate">
			<li><img src="files/rotate/banner01.jpg" border="0" alt="" /></li>
			<li style="display:none" ><img src=".../banner02.jpg" border="0" alt="" /></li>
			<li style="display:none" ><img src=".../banner03.jpg" border="0" alt="" /></li>
			<li style="display:none" ><img src=".../banner04.jpg" border="0" alt="" /></li>
		</ul>