Jquery Image Gallery
-
- Posts: 18
- Joined: Thu 9. Nov 2006, 20:29
Jquery Image Gallery
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.
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
very nice. i will try this one.
(\_/)
(0.o)
(> <)
Das ist Bunny. Kopiere Bunny in deine Signatur, um ihm auf seinem Weg zur Weltherrschaft zu helfen!
(0.o)
(> <)
Das ist Bunny. Kopiere Bunny in deine Signatur, um ihm auf seinem Weg zur Weltherrschaft zu helfen!
-
- Posts: 18
- Joined: Thu 9. Nov 2006, 20:29
Re: Jquery Image Gallery
Great! Thanks for trying it out. Please let me know what you think.
Re: Jquery Image Gallery
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 -
- that done -- seeing this enhancement is very welcome - thanks peter -
-
- Posts: 18
- Joined: Thu 9. Nov 2006, 20:29
Re: Jquery Image Gallery
Yeah I am a jQuery fan as well. Thanks for checking it out.
Re: Jquery Image Gallery
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)
Then on the page load - I added a setTimeout and animate the opacity:
Seems to work smoothly now
BTW the code can target class divs as well as ID divs
Anyway very nice - cheers
-j-
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);
}
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 );
});
BTW the code can target class divs as well as ID divs
Anyway very nice - cheers
-j-
Last edited by jsw_nz on Fri 14. Aug 2009, 12:02, edited 2 times in total.
-
- Posts: 18
- Joined: Thu 9. Nov 2006, 20:29
Re: Jquery Image Gallery
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.
Code: Select all
display: none;
Thanks for checking this out.
Re: Jquery Image Gallery
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?
btw - have any other jquery / wcms tips/tricks?
Re: Jquery Image Gallery
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>