Introduction
Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it's hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.
If you have read this post - Single Page Websites With Creative Javascript Effects. You will able to see that, it's quite a popular trend that most of the designers showcase theirs work by using a vertical/horizontal carousel. So, in this tutorial, we will learn how to build an unique jQuery script by modifying other plugin - create a Image gallery with jCarousel. A picture tells thousand words, we are going to transform jCarousel to this:
1. jCarousel - the jQuery carousel plugin
First of all, let me introduce this robust plugin we are about to integrate into this image gallery. jCarousel plugin is fully configurable, and most importantly, I have tested it on different browsers IE6, IE7, IE8, Safari, Chrome and firefox, it's proven works perfectly. With the following configuration, we will get a vertical carousel:
//jCarousel Plugin $('#carousel').jcarousel({ vertical: true, //orientation of the carousel, in this case we use vertical scroll: 1, //the number of items to scroll by auto: 2, //the interval of scrolling wrap: 'last', //wrap at last item and jump back to the start initCallback: mycarousel_initCallback //we will use this to further enhance the behavior of this carousel });
Also, you will have to modify the CSS file for jCarousel as well. I can't go into this details, because the CSS file is quite straight forward. So, in the end, this would be the result from the configuration above and also the customized css files. Please note, the following layout on the left hand side is the default jCarousel layout.
For more configuration, please refer to Sorgalla's jCarousel Documentation
2. HTML
Don't freak out by the length of the HTML, it's basically two UL lists.
- #slideshow-main: This UL list has a little bit of styling. It has a caption area above a faded background
- #slidehow-carousel: This is where the jCarousel is located. Just a simple UL list with each link have a REL that will point to the #slideshow-main item.
<div id="welcomeHero"> <div id="slideshow-main"> <ul> <li class="p1 active"> <a href="#"> <img data-src="images/1_big.gif" width="430" height="290" alt=""/> <span class="opacity"></span> <span class="content"><h1>Title 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span> </a> </li> <li class="p2"> <a href="#"> <img data-src="images/2_big.gif" width="430" height="290" alt=""/> <span class="opacity"></span> <span class="content"><h1>Title 2</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span> </a> </li> <li class="p3"> <a href="#"> <img data-src="images/3_big.gif" width="430" height="290" alt=""/> <span class="opacity"></span> <span class="content"><h1>Title 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span> </a> </li> ...... </ul> </div> <div id="slideshow-carousel"> <ul id="carousel" class="jcarousel jcarousel-skin-tango"> <li><a href="#" rel="p1"><img data-src="images/1.gif" width="206" height="95" alt="#"/></a></li> <li><a href="#" rel="p2"><img data-src="images/2.gif" width="206" height="95" alt="#"/></a></li> <li><a href="#" rel="p3"><img data-src="images/3.gif" width="206" height="95" alt="#"/></a></li> ...... </ul> </div> <div class="clear"></div> </div>
3. CSS
CSS is a little bit more complicated in this tutorial so I have included a brief layout to show the IDs and Classes.
However, you will have to make some changes to the jCarousel css jquery.jcarousel.css and skin.css. Note: if you grab a fresh copy from jCarousel website, it will have more complicated skin files and folder layout, the one I have included in the download is a simplified version.
body { font-family:arial; } img { border:0; } /* Styling up the image gallery */ #slideshow-main { width:429px; float:left; margin-right:3px; } #slideshow-main ul { margin:0; padding:0; width:429px; } #slideshow-main li { width:429px; height:290px; display:none; position:relative; } #slideshow-main li.active { display:block !important; } #slideshow-main li span.opacity { position:absolute; bottom:0; left:0; display:block; width:100%; height:60px; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index:500; } #slideshow-main li span.content { position:absolute; bottom:0; left:0; display:block; width:100%; height:60px; z-index:1000; } #slideshow-main li span.content h1 { font-size:14px; margin:5px 0; padding:0 10px;; color:#42e2e8; } #slideshow-main li span.content p { font-size:11px; margin:5px 0; padding:0 10px;; color:#42e2e8; } /* Styling up the carousel */ #slideshow-carousel { float:left; width:206px; position:relative } #slideshow-carousel ul { margin:0; padding:0; list-style:none; } #slideshow-carousel li { background:#fff; height:97px; position:relative } #slideshow-carousel li .arrow { left:3px; top:28px; position:absolute; width:20px; height:40px; background:url(images/arrow_white.png) no-repeat 0 0; display:block; } #slideshow-carousel li a { background:#000; display:block; width:206px; height:95px; } #slideshow-carousel .active { filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0; } #slideshow-carousel .faded { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
4. Javascript
We don't have to worry about the carousel, because it's quite stable. What we need to do with the jCarousel is to adjust the setting such as the speed, layout and behavior. For more setting, you can refer to jCarousel official documentation.
Other than that, most of them are basic jQuery script with hover and click events. I have added inline comments and I believe that will help.
$(document).ready(function () { //jCarousel Plugin $('#carousel').jcarousel({ vertical: true, //display vertical carousel scroll: 1, //auto scroll auto: 2, //the speed of scrolling wrap: 'last', //go back to top when reach last item initCallback: mycarousel_initCallback //extra called back function }); //Front page Carousel - Initial Setup //set all the item to full opacity $('div#slideshow-carousel a img').css({'opacity': '0.5'}); //readjust the first item to 50% opacity $('div#slideshow-carousel a img:first').css({'opacity': '1.0'}); //append the arrow to the first item $('div#slideshow-carousel li a:first').append('') //Add hover and click event to each of the item in the carousel $('div#slideshow-carousel li a').hover( function () { //check to make sure the item is not selected if (!$(this).has('span').length) { //reset all the item's opacity to 50% $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'}); //adust the current selected item to full opacity $(this).stop(true, true).children('img').css({'opacity': '1.0'}); } }, function () { //on mouse out, reset all the item back to 50% opacity $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'}); //reactivate the selected item by loop through them and look for the one //that has the span arrow $('div#slideshow-carousel li a').each(function () { //found the span and reset the opacity back to full opacity if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'}); }); } ).click(function () { //remove the span.arrow $('span.arrow').remove(); //append it to the current item $(this).append(''); //remove the active class from the slideshow main $('div#slideshow-main li').removeClass('active'); //display the main image by appending active class to it. $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active'); return false; }); }); //Carousel Tweaking function mycarousel_initCallback(carousel) { // Pause autoscrolling if the user moves with the cursor over the clip. // resume otherwise carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }
Conclusion
This is a fairly complicated tutorial I have ever made, if you have any question at all, please drop me a comment, I will give you a hand and try my best to help you. I applied this script to a commercial website and it's well tested accross different browser such as IE6, IE7, IE8, Firefox, Chrome, Safari and even iPhone Safari. They all behave the same and look identical.
I hope you will get something out of this tutorial, grab a plugin, customize it and build a unique jQuery script that everyone would envious about it. :)
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.:D
Thank you so much for making this!
I just need to change some things and am not sure how to do it.
1. I only want the bigger image to appear when you hover over an image in the carousel. I have changed the click function to hover so that works instead of clicking.
2. I'd like both of the arrows to be above and below the carousel rather than on top of the images.
I'm very new to jquery so could only really cope with detailed help!
Many thanks
All the best
Emma
1. I think you can just replace the images, it should work.
2. I think the plugin style it, use firebug to identify the class, then style it by setting the top and bottom positionvalue.
I just wrote to you asking about the position of the arrows.
I've managed to figure that uout by myself. What I really need to know is how to turn off the visibility of the slideshowmain unless you have the mouse over an item in the carousel which is when I want the larger image to pop up.
Thank you so much for your help.
Emma
You don't know where I could find one?
Best wishes
Emma
But i would like to make animation transition on big image when i click on thumbnail.
How i can make it?
$('div#slideshow-main li.' + $(this).attr('rel')).show(300)..addClass('active');
you can do simple animation.
$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active'); from line 53,
and add your code in this 53 line and it's working, but every single click at thumbnail is making new 'li' in #slideshow-main with style 'display: list-item;' so depends on how much thumbnail was clicked, i got same number of opened big images at the left. For sure i went something wrong, but have no idea what..
Thnkx
First, to do the animation :
- Line 53 you have to add ".fadeIn(1000)" before ".addClass", it will be do the animation which you can change the duration.
- and after that, paste the code : "$('div#slideshow-main li.' + $(this).attr('rel')).fadeOut(0).addClass('active');"
tnx in advance
Esther
This is fabulous, and 99% of what I need for a client.
I am trying to adjust it and am wondering if you can help.
Is there a way to keep the hover functionality (the slideshow stopped) when rolling over the arrows? I've been banging my head against the wall on this one; your help is much appreciated.
thanks
Andrea
it has called back function for buttonNextEvent and buttonPrevEvent, not sure if you can hook hover effect on it.
And you will need this two commands to stop and resume the carousel:
carousel.stopAuto();
carousel.startAuto();
otherwise, the easier method would be using jQuery and append hover funtion to the next and prev link.
Yes, I made the "next" link transparent to function that way- how would I use jQuery to append the hover function as you suggested?
Thank you for this great tutorial !!!!!
I have 1 question please :)
What would I do to have 5 or 6 images displayed down the right instead of 3 ?
I already tried changing the css code but unfortunately I failed I think it is not possible to change the css fileand I can not find the <DIV class = .jcarousel-skin-tango .jcarousel-clip-vertical...
I test onFireBug - MozzilaFireFox I increase the height and it works but how to save this
I also believe that the height of the block is generated by jquery so how can I find the corresponding line code
cordially :)
http://sorgalla.com/projects/jcarousel/#Defining-The-Number-Of-Visible-Items
I adopt the slider very well with my need but the problem is that the slider does not work with jQuery verssion now available for download in jquery.com
because I have other slide on the homepage under my site and when I put the jquery " jquery-1.4.2.min.js " of your slide the other sliders do not work anymore :(
is there any other version except " jquery-1.4.2.min.js " that works well with your beautiful slide?