jCarousel Plugin: adding mousEnter or mouseOver
All,
I know it may seems easy but im trying to figure out how to have the main image show by hovering the thumbnails. Right now the main image can only be shown if you click on the thumbnails.
- $(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Front page Carousel - Initial Setup
$('div#slideshow-carousel a img').css({'opacity': '0.5'});
$('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
$('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')
//Combine jCarousel with Image Display
$('div#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
$(this).stop(true, true).children('img').css({'opacity': '1.0'});
}
},
function () {
$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
$('div#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});
});
}
).click(function () {
$('span.arrow').remove();
$(this).append('<span class="arrow"></span>');
$('div#slideshow-main li').removeClass('active');
$('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.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
// JavaScript Document
Html:
- <div id="slideshow-main">
<ul>
<li class="p1 active">
<a href="#">
<img src="big01-image.jpg" width="652" height="320" 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 src="big02-image.jpg" width="652" height="320" 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 src="big03-image.jpg" width="652" height="320" 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">
<div class="jcarousel_title"></div>
<ul id="carousel" class="jcarousel">
<li><a href="#" rel="p1"><img src="small01-image.jpg" width="320" height="85" alt="#"/></a></li>
<li><a href="#" rel="p2"><img src="small02-image.jpg" width="320" height="85" alt="#"/></a></li>
<li><a href="#" rel="p3"><img src="small03-image.jpg" width="320" height="85" alt="#"/></a></li>
</ul>
</div>