Image rotator jQuery css

homethumbCréer une diaporama avec description – un didacticiel sur la façon de créer un « image rotator » avec jQuery et CSS.

Ce tutoriel va vous aider à comprendre comment créer vos propres diaporamas avec des effets de calques sympas.

image_rotator_jquery_css

Voir la démo

image_rotator_jquery_css2

Etape 1. HTML – Image Rotator

main_image Section HTML

<div class="main_image">
	<img src="banner1.jpg" alt="" />
	<div class="desc">
		<a href="#" class="collapse">Close Me!</a>
		<div class="block">
			<h2>Title</h2>
			<small>Date</small>
			<p>Copy</p>
		</div>
	</div>
</div>

image_thumb Section HTML

<div class="image_thumb">
	<ul>
		<li>
			<a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
			<div class="block">
				<h2>Title</h2>
				<small>Date</small>
				<p>Copy</p>
			</div>
		</li>
	</ul>
</div>

Etape 2. CSS – Image Rotator

main_image section CSS

.main_image {
	width: 598px;
	height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 10px;
	margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
	font-size: 1em;
	padding: 0 0 0 20px;
	background: url(icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;
	left: 0; /*--Stick the desc class to the bottom of our main image container--*/
	width: 100%;
	display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px;
	width: 93px;
	text-indent: -99999px;
	position: absolute;
	top: -27px;
	right: 20px;
}
.main_image a.show {background-position: left bottom;}

image_thumb section CSS

.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc;
	padding: 5px;
	background: #fff;
	float: left;
}
.image_thumb ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0;
	padding: 12px 10px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { /*--Hover State--*/
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.5em;
	margin: 5px 0;
	padding: 0;
}
.image_thumb ul li .block {
	float: left;
	margin-left: 10px;
	padding: 0;
	width: 170px;
}
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/

Etape 3. jQuery – Image Rotation Effect

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
$(".image_thumb ul li").click(function(){
	//Set Variables
	var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
	var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
	var imgDesc = $(this).find('.block').html();  //Get HTML of the "block" container
	var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"

	if ($(this).is(".active")) {  //If the list item is active/selected, then...
		return false; // Don't click through - Prevents repetitive animations on active/selected list-item
	} else { //If not active then...
		//Animate the Description
		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
			$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
			$(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
		});
	}
	//Show active list-item
	$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
	$(this).addClass('active');  //Add class of 'active' on the selected list
	return false; 

}) .hover(function(){ //Hover effects on list-item 
	$(this).addClass('hover'); //Add class "hover" on hover 
	}, function() {
	$(this).removeClass('hover'); //Remove class "hover" on hover out
});

$("a.collapse").click(function(){
	$(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
	$("a.collapse").toggleClass("show"); //Toggle the class name of "show" (the hide/show tab)
});

Voir la démo
Gardez à l’esprit ces jQuery moteur à rotation de l’image ne se dégradent pas dans le meilleur mode. Si le javascript est désactivé, chaque vignette doit être cliqué sur le bouton pour obtenir l’image agrandie.
Site : http://www.sohtanaka.com

2 commentaires
  1. apt 9 années ago

    Super !

    Peut-on faire cela d’une façon automatique ?

    Tout en utilisant le mouvement de la souris pour stopper/demarrer la séquence ?

    merci.

  2. i? makinalar? 9 années ago

    this information most important for me.
    thanks…

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

un × cinq =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?