Comment créer ce diaporama ?

PopKoRn88 Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   -  
theshadoo Messages postés 786 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, après avoir parcouru de nombreux forum je viens à vous pour savoir comment faire ce diaporama: http://www.romaincariou.me/

J'ai regardé dans la bibliothèque jquery si je trouvais des choses similaires mais pas trouvé.
Merci de votre aide :)




3 réponses

Réponse 1 / 3
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   89
 
J'ai quelques liens dans mes favoris pour des diaporamas en JQ, mais rien qui ressemble à ce que tu veux.

Le mieux ça reste de reprendre tout le code source de la page, avec les pages js et css externes, tu crées une page sur ton pc et tu vires petit à petit chaque élément qui sert à rien, en testant la page à chaque fois pour être sur que ce que t'as viré sert effectivement à rien pour le diaporama.
0
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   89
 
Vu que ça m'intéresse également, j'ai fait ce travail.
Dans le code ci-dessous, il n'y a aucun fichier css ou js externe inutile pour le diaporama (ya que IE8.css que j'ai pas testé). C'est optimisable, surtout le css, mais c'est déjà un début. 


<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
<title>Romain Cariou (TM) - Webdesigner et Graphiste Freelance</title>
<!--CSS-->
<link rel="stylesheet" type="text/css" media="screen" href="http://www.romaincariou.me/css/style.css">
<link rel="stylesheet" href="http://www.romaincariou.me/js/pe.kenburns/themes/default/skin.min.css" />
<!--[if lte IE 8]>
  <link rel="stylesheet" href="http://www.romaincariou.me/css/ie8.css" />
<![endif]-->
<!--Scripts-->
<script type='text/javascript' src='http://www.romaincariou.me/js/jquery.min.js'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/custom.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/twitter.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/jflickrfeed.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/pe.kenburns/jquery.pixelentity.kenburnsSlider.min.js"></script>
<script type="text/javascript" src="http://www.romaincariou.me/js/animation.js"></script>

</head>

<body>

<!--SCROLL-->  
		
<div class="fluid bg-header">
	<div class="container_12 clearfix">
		 <div class="container-scroll">
		 <div class="section-home">
			<!--SLIDER--> 
			<div class="peKenBurns c" data-logo="disabled" style="float:left">
				<div class="peKb_active" data-delay="5" data-thumb="img/pictures/thumbs/s-davis.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-davis.jpg" alt="Banner Image 1"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-virgin.jpg">
					<a class="video hd autoplay loop" href="https://vimeo.com/18100096"><img src="http://www.romaincariou.me/img/pictures/slider/s-virgin.jpg" alt="Banner Image 2"/></a>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-choco.jpg">
					<img src="http://www.romaincariou.me/img/blank.png" alt="Banner Image 3" data-src="http://www.romaincariou.me/img/pictures/slider/s-choco.jpg"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-feuillatte.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-feuillatte.jpg" alt="Banner Image 4"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-musics.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-musics.jpg" alt="Banner Image 5"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-liebig.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-liebig.jpg" alt="Banner Image 6"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-creative.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-creative.jpg" alt="Banner Image 7"/>
				</div>
				<div data-delay="5" data-thumb="img/pictures/thumbs/s-olc.jpg">
					<img src="http://www.romaincariou.me/img/pictures/slider/s-olc.jpg" alt="Banner Image 8"/>
				</div>
			</div>
		 </div>
		</div>
	</div>
</div>
</body>
</html>
0
Réponse 2 / 3
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
regarde le code source ;)
JavaScript + JQuery ...
0
Réponse 3 / 3
theshadoo Messages postés 786 Date d'inscription   Statut Membre Dernière intervention   123
 
Ce slider est un slider propriétaire, payant sur codecanyon, il s'appelle estro slideshow.

Faire un slideshow en jquery c'est pas bien compliqué, le code de ce slideshow est protégé mais bon facilement décompilable.

Tu as tellement de slideshow sur internet réalisé avec jquery que très franchement autant prendre de l'open source que plutôt piquer un slider payant en reconstituant le code source.

http://codecanyon.net/item/estro-jquery-ken-burns-swipe-effect-slider/235111?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=pixelentity

(au passage je possède ce slider)

ou tu développes toi même mais si tu ne sais pas créer de plugin jquery tu te rabats sur une fonction si non ca va être galère pour toi.

si tu veux des adresses de slider je peux t'en communiquer si non tu as aussi ce plugine n open source par exemple : http://chocoslider.alandawi.com.ar/index_en.html
0