jdpweb

all things webby

Simple jQuery Image Carousel

| 34 Comments

simple jquery image carouselSimple jQuery image carousel for our Findit section

Our old “Local Directory” was about to get a complete overhall to the extent that it wouldn’t be recognisable and I needed to add in a jQuery image carousel for the business owners images to be shown in.

Starting with a few wire frames in the initial stages we came up with the finished design shown above but I’ll show you the steps to how I got there. Please bear in mind that the code generated from the server is run on Velocity code / Java and this is how the images are rendered to the thumbnail slots from the database, an if statement hides any more than 3 images if available and allows the scrolling there after so for this vertually static example I have only put 3 images in for thumb nails. Of course we could make the simple jQuery image carousel larger and hence have more thumb nails in view – the possibilities are endless.

Lets start with the basic html for the container areas:

<div class="printAd"><span class="imagery"> <span class="imageMain"> 
-- This goes in as the pre-loaded image -- 
<img src="galleryImages/one.jpg" alt="" /> </span> </span>
<ul>
<ul>
    <li><img class="activeImg" src="galleryImages/one.jpg" alt="" /></li>
    <li><img src="galleryImages/two.jpg" alt="" /></li>
    <li><img src="galleryImages/three.jpg" alt="" /></li>
</ul>
<ul>
	<li class="previous">Previous</li>
	<li class="next"> Next</li>
</ul>
<ul class="noBack">
	<li class="floatL">All Photos</li>
	<li class="floatR">Upload Photo</li>
</ul>
</div>

The thumbnail images in the example are gaing to be made clickable and these will not only swap out the main image but also we will give it a little jQuery style on a click action.
Here is the jQuery code for the click action on the thumbnails

 $(function(){ $('.galleryThumb img').click(function () { 
var imagesource = $(this).attr('src'); 
$('.imageMain img').attr('src', imagesource); 
$('.galleryThumb img').click(function() { 
$('.galleryThumb img').removeAttr('class').fadeTo('opacity', '0.6'); 
$(this).addClass('activeImg').fadeTo('fast', '1'); 
});
jQuery carousel

And clicking the second thumbnail image

This takes the opacity of the inactive thumb image down to 0.6 and fades in the clicked thumb to 1.
Below is the reset and the hover state jQuery – you can see the class of activeImage being used to style the thumb container on page load.

 
$('.galleryThumb img').css('opacity', '0.6'); 
$('.galleryThumb img.activeImg').css('opacity', '1'); 
$('.galleryThumb img.activeImg').hover(function() { 
$(this).css('opacity', '1')}, function () { 
$(this).css('opacity', '1'); 
}); 

And the CSS I used – of course this can vary greatly depending on the size and quantity of the thumbnails.

 
.imageMain{ 
float:left; width:215px; margin:0 0 5px; 
} 
.printAd li{ 
display:inline-block; 
} 
.printAd li a.galleryThumb img{ 
width:57px; height:57px; margin-top:-1px; padding:3px; border:none; 
} 
.printAd li a.galleryThumb img.activeImg{ 
margin-top:-2px; padding:3px; 
border-top:2px solid #fff; border-right:1px solid #999; 
border-bottom:1px solid #999; border-left:1px solid #999; 
} 

I don’t usually like using negative margins but sometimes it’s the only sensible way, after all its just a couple of pixels to move the active thumb upward to cover the borders of the main image container.
Any thoughts on this, do you have a simpler version you would like to share?

34 Comments

  1. 506869 420745Average In turn sends provides will be the frequent systems that offer the opportunity for one

  2. 336961 27465An interesting discussion is worth comment. I think that you need to write more on this matter, it may not be a taboo subject but usually individuals are not enough to speak on such topics. To the next. Cheers 242177

  3. Very interesting information!Perfect just what I was looking for!

  4. Hello, i feel that i saw you visited my blog thus i got here to “go back the choose”.I’m trying to find things to enhance my web site!I guess its adequate to make use of some of your ideas!!

  5. Heya! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no data backup. Do you have any methods to protect against hackers?

  6. I have been reading out a few of your posts and it’s pretty clever stuff. I will definitely bookmark your site.

  7. Just want to say your article is as astounding. The clarity in your put up is just excellent and that i could think you are knowledgeable on this subject. Fine together with your permission let me to clutch your RSS feed to stay updated with drawing close post. Thank you a million and please keep up the rewarding work.

  8. How do you make this blog site look this good. Email me if you can and share your wisdom. Id appreciate it.

  9. When I initially commented I clicked on the Notify me when new comments are added checkbox and now every time a comment is added I receive four messages with the identical comment.

  10. How come you dont have your website viewable in mobile format? Can not see anything in my netbook.

  11. After I open up your Rss feed it seems to be a ton of junk, is the issue on my side?

  12. Wanted to drop a comment and let you know your Rss feed isnt functioning today. I tried including it to my Google reader account but got absolutely nothing.

  13. Just to let you know your website looks a little bit strange on Firefox on my computer with Linux .

  14. When I start your Feed it appears to be to be a lot of nonsense, is the problem on my side?

  15. Could you message me with any tips about how you made your blog look this good , I would be appreciative.

  16. I feel this is one of the so much important info for me. And i am glad studying your article. However should commentary on few basic issues, The site style is great, the articles is in reality excellent : D. Just right job, cheers

  17. would it be possible to translate your web-site into spanish because i have difficulties of speaking to english, and as there usually are not numerous pictures in your internet site i’d prefer to go through a fantastic of what you may be writting

  18. I actually wanted to develop a remark to be able to express gratitude to you for these awesome points you are writing on this site. My considerable internet look up has finally been paid with brilliant information to write about with my company. I would express that many of us website visitors are definitely lucky to be in a useful place with many special individuals with beneficial secrets. I feel rather happy to have come across the webpage and look forward to plenty of more exciting moments reading here. Thanks again for all the details.

  19. really nice article, very impressive. thanks for posting.

  20. this is a cool stuff, keep on adding the information.

  21. that was a lovely article. i liked reading it. thanks for sharing.

    • Very nice post. I just stumbled upon your blog and waetnd to say that I’ve truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon.

  22. thanks for sharing such wonderful information…keep posting more such articles…

  23. hey friend, i liked your article so much i even bookmarked it. cheers.

  24. thanks for sharing in the above preview.

  25. i love your blog, don’t find many that are so clear, it is nice to see that someone really understands. i really enjoyed reading this. thanks for the post.

  26. great site, and super article.

  27. this is a really interesting article. thanks.

  28. amazing post.

  29. someday i will have a blog like yours.

Leave a Reply

Required fields are marked *.

*

* Copy This Password *

* Type Or Paste Password Here *