Carousels in combination with lightbox-plugins

A carousel scrolling images with a "jquery.fancybox" lightbox (click on an image to open the lightbox):

carousel pauses when opening the lightbox
carousel resumes when closing the lightbox
lightbox is circular

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo1").carouFredSel();
$("#foo1 a").fancybox({
	cyclic	: true,
	onStart	: function() {
		$("#foo1").trigger("pause");
	},
	onClosed: function() {
		$("#foo1").trigger("play");
	}
});

HTML:close x

<div class="image_carousel">
	<div id="foo1">
		<a rel="fancybox" href="/examples/images/large/basketball.jpg">
			<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/beachtree.jpg">
			<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/cupcackes.jpg">
			<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/hangmat.jpg">
			<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/new_york.jpg">
			<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/laundry.jpg">
			<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/mom_son.jpg">
			<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/picknick.jpg">
			<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/shoes.jpg">
			<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/paris.jpg">
			<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/sunbading.jpg">
			<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/examples/images/large/yellow_couple.jpg">
			<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
		</a>
	</div>
	<div class="clearfix"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.image_carousel a {
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

A carousel scrolling images with a "jquery.prettyPhoto" lightbox (click on an image to open the lightbox):

carousel pauses when opening the lightbox
carousel resumes when closing the lightbox

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo2").carouFredSel();
$("#foo2 a").prettyPhoto({
	theme: "facebook",
	changepicturecallback: function() {
		$("#foo2").trigger("pause");
	},
	callback: function() {
		$("#foo2").trigger("play");
	}
});

HTML:close x

<div class="image_carousel">
	<div id="foo2">
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/basketball.jpg">
			<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/beachtree.jpg">
			<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/cupcackes.jpg">
			<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/hangmat.jpg">
			<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/new_york.jpg">
			<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/laundry.jpg">
			<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/mom_son.jpg">
			<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/picknick.jpg">
			<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/shoes.jpg">
			<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/paris.jpg">
			<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/sunbading.jpg">
			<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		</a>
		<a rel="prettyPhoto[caroufredsel]" href="/examples/images/large/yellow_couple.jpg">
			<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
		</a>
	</div>
	<div class="clearfix"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.image_carousel a {
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

Carousels in combination with tooltip-plugins

A carousel scrolling images width a "jquery.tooltip" to show tooltips (hover over an image to show the tooltip):

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo3").carouFredSel({
	items		: {
		width		: 174,
		height		: 174
	},
	auto		: {
		pauseOnHover: true
	}
});
$("#foo3 img").tooltip({
	track		: true, 
	showURL		: false
});

HTML:close x

<div class="image_carousel">
	<div id="foo3">
		<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

A carousel scrolling images width a "jquery.tooltip" to show larger images (hover over an image to show the larger image):

view JavaScript view HTML view CSS

JavaScript:close x

$("#foo4").carouFredSel({
	auto		: {
		pauseOnHover: true
	}
});
$("#foo4 a").tooltip({
	showURL		: false,
	track		: true, 
	bodyHandler	: function() {
		return $("<img/>").attr("src", this.href);
	}
}).click(function() {
	return false;
});

HTML:close x

<div class="image_carousel">
	<div id="foo4">
		<a href="/examples/images/large/basketball.jpg">
			<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		</a>
		<a href="/examples/images/large/beachtree.jpg">
			<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		</a>
		<a href="/examples/images/large/cupcackes.jpg">
			<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		</a>
		<a href="/examples/images/large/hangmat.jpg">
			<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		</a>
		<a href="/examples/images/large/new_york.jpg">
			<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		</a>
		<a href="/examples/images/large/laundry.jpg">
			<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		</a>
		<a href="/examples/images/large/mom_son.jpg">
			<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		</a>
		<a href="/examples/images/large/picknick.jpg">
			<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		</a>
		<a href="/examples/images/large/shoes.jpg">
			<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		</a>
		<a href="/examples/images/large/paris.jpg">
			<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		</a>
		<a href="/examples/images/large/sunbading.jpg">
			<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		</a>
		<a href="/examples/images/large/yellow_couple.jpg">
			<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
		</a>
	</div>
	<div class="clearfix"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.image_carousel a {
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}

More examples

Basic carousels.
Carousels scrolled by user interaction.
Variable item-sizes + variable number of visible items.
Responsive / fluid carousels.
Continuously scrolling carousels.
Using the callback functions.
Using the custom events.
Intermediate carousel examples.
Dynamically add and remove items.
GET and (re)SET the configuration options.
Carousels in combination with lightbox- and tooltip-plugins.
Cool Carousel examples (inspiration)

Need help with all those options? Click here to use the Configuration Robot >

Download version 5.5.0

Carousels in combination with lightbox- and tooltip-plugins

Carousels in combination with lightbox-plugins

Carousels in combination with tooltip-plugins

More examples