Page 1 of 1
Jquery Image Gallery
Posted: Wed 25. Jun 2008, 22:30
by 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:
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.
Re: Jquery Image Gallery
Posted: Fri 27. Jun 2008, 07:17
by flopi
very nice. i will try this one.
Re: Jquery Image Gallery
Posted: Mon 30. Jun 2008, 18:14
by peteburgess
Great! Thanks for trying it out. Please let me know what you think.
Re: Jquery Image Gallery
Posted: Wed 15. Oct 2008, 16:37
by 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 -
Re: Jquery Image Gallery
Posted: Fri 5. Dec 2008, 19:43
by peteburgess
Yeah I am a jQuery fan as well. Thanks for checking it out.
Re: Jquery Image Gallery
Posted: Fri 14. Aug 2009, 04:08
by 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-
Re: Jquery Image Gallery
Posted: Fri 14. Aug 2009, 04:16
by peteburgess
Cool. Thanks for adding that. Another option is to just set all images/slides except for the first one to:
This will hide all slides other than the first slide onload.
Thanks for checking this out.
Re: Jquery Image Gallery
Posted: Fri 14. Aug 2009, 04:19
by 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?
Re: Jquery Image Gallery
Posted: Tue 24. Nov 2009, 00:10
by 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>