[Résolu] jQuery slidershow par b3n1812 - page 1

Bonjour à tous, je poste ce petit message car je débute dans le codage et je suis actuellement entrain de faire un site de test pour que je progresse.
Du coup dans mes recherche je suis tomber sur un "Slide Show" mais j'aimerais qu'au lieu qu'une galerie s'affiche j'aimerais en avoir 3 les une a coté des autre avec des image différentes.

J'ai pri mon slide sur cette url : Slide Show

Et le code est le suivant (tout est dans la page html) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Photo Slider with Semi Transparent Caption</title>

<script type="text/javascript" src="Slide show/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow();

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',6000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$('#gallery .content').html(caption);	
}

<style type="text/css">
body{
	font-family:arial
}

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:360px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; /* Couleur barre noir */	
		color:#FFF; /* Couleur de la description */	
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
/* Couleur titre bleu cyan */	
	#gallery .caption .content h3 { 
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	

</style>
</head>
<body>
<div id="gallery">
    <a href="#" class="show"><img src="images/flowing-rock.jpg" alt="Flowing Rock" 
    width="580" 
    height="360" 
    title="" 
    alt="" 
    rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
    </a>
	
<a href="#"><img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/>
	</a>
	
<a href="#"><img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
	</a>

<a href="#"><img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
	</a>
	
<a href="#"><img src="images/lotus.jpg" alt="Lotus" width="580" height="360" title="" alt="" rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."/>
	</a>
	
<a href="#"><img src="images/mojave.jpg" alt="Mojave" width="580" height="360" title="" alt="" rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."/>
	</a>
		
<a href="#"><img src="images/pier.jpg" alt="Pier" width="580" height="360" title="" alt="" rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
	</a>
	
<a href="#"><img src="images/sea-mist.jpg" alt="Sea Mist" width="580" height="360" title="" alt="" rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
	</a>
	
<a href="#"><img src="images/stones.jpg" alt="Stone" width="580" height="360" title="" alt="" rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
	</a>

	<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"><br/>
</div>
<div style="font-size:10px;color:#ccc"></div>

</body>
</html>

Donc a ceux qui s'y connaisse plus que moi qui debute : comment en afficher 3 et comment changer les tailles pour qu'elle rentre toutes ensemble ? mon but est de comprendre pas d'avoir le resultat.
Merci

b3n1812

23 août 2011 à 9:52:10

Merwin

23 août 2011 à 10:03:12

Tu auras un problème si tu veux faire trois slide show différents en effet on voit que dans le code du Slide Show, on utilise l'id du conteneur pour faire les modifications. Or sachant que tu as un unique id gallery par page tu ne pourras en mettre trois différents à moins d'adapter le code source, ou de trouver un autre slide show.

23 août 2011 à 10:07:15

Ah ouais c'est vrai je vais essayer de modifier et si j'y arrive pas de trouver un slide show qui correspondrait plus a mes attentes.
Merci Mervin =)

23 août 2011 à 10:26:40

De rien !

23 août 2011 à 12:03:35

Apres plusieurs essaie si quelqu'un a un Slide show avec mes criteres de recherche ? Merci

23 août 2011 à 17:06:02

http://eyecon.ro/spacegallery/#implement
Comme ça ?

23 août 2011 à 18:04:19

En fait non je cherche exactement http://www.queness.com/resources/html/ [...] lideshow.html donc je l'ai mais seul bémols je veux en avoir trois et quel soit a plus petite dimension (pour la dimension j'y suis arrivée c'est plutôt avoir les 3 cote a cote alignée qui me pose un véritable problème

désolé si je suis pas très clair et merci pour les réponses =)

Edit: En fait j'aimerais mettre deux diaporama sur la même page et je suis peut être pas partit dans le bon sens avec un slide jQuery

Edit2: Je viens de trouver un lien intéressant il s'agit de 2 diaporama sur la même page HTML
http://www.javascriptfr.com/forum/suje [...] L_601185.aspx
seul bémol il n'a pas de texte s'affichant =S

jQuery slidershow

jQuery slidershow

Supprimer

Modérer

Signaler le message aux modérateurs