Comment créer ce diaporama ?

Fermé

PopKoRn88 Messages postés 79 Date d'inscription jeudi 3 septembre 2009 Statut Membre Dernière intervention 24 mars 2013 - 3 févr. 2012 à 09:03
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 - 3 févr. 2012 à 21:44

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 :)

A voir également:

Comment créer ce diaporama ?
Comment créer un groupe whatsapp - Guide
Créer un compte google - Guide
Créer un compte gmail - Guide
Comment creer un pdf - Guide
Créer un compte instagram sur google - Guide

3 réponses

Réponse 1 / 3

Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
3 févr. 2012 à 12:14

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.

Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
3 févr. 2012 à 15:46

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>

Réponse 2 / 3

bg62 Messages postés 23666 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 janvier 2025 2 392
3 févr. 2012 à 17:00

regarde le code source ;)
JavaScript + JQuery ...

Réponse 3 / 3

theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
3 févr. 2012 à 21:44

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

Discussions similaires

Comment créer un compte torrent ?

créer une adresse gmail pour une autre personne