Aller au contenu

Intégrer un slideshow en tant que menu

HarTT

Par HarTT
dans (X)HTML et CSS

 Partager

Sujets conseillés

HarTT

HarTT

Posté
Posté

Bonjour,

Je ne sais pas si c'est la bonne section, si ce n'est pas le cas je suis désolé.

Étant franchement débutant dans le codage des pages web j'ai vraiment besoin d'aide. Je fais plutôt du graphisme et les pages que je conçoit habituellement ne me posent pas de problème, mais là je suis perdu !

En fait tout est dans le titre, je voudrais insérer un slideshow dans une page html et faire en sorte que celui-ci soit le menu de navigation.

J'en ai repérer un qui me plait énormément qui utilise "mootools" (kézako ?):

http://www.efectorelativo.net/laboratory/noobSlide/

c'est le sample 6 qui m'intéresse, j'ai donc télécharger "noobSlide (rev.19-06-08) for mootools 1.2 " (en bas) (j'imagine que la dernière version est le mieux). Seulement c'est là que ça se corse, je n'y comprend rien ! en fait je ne sais pas comment isoler juste le sample 6, l'intégrer à ma page html et faire en sorte qu'il soit "cliquable" pour l'utiliser comme menu. Dès que j'essaie de virer le reste de la page, l'effet de transition du sample 6 ne marche plus, c'est un vrai casse-tête pour moi qui n'y connais rien ! (je tiens à préciser que je connais juste les bases html et quelques script javascript mais c'est tout, même le css je n'y comprend rien).

A-t-on besoin de quelque chose de spécial pour le faire fonctionner ? Ma demande est-elle impossible à réaliser ?

Je ne vous demande pas de le faire à ma place mais de m'aider à comprendre car là je suis vraiment larguer et j'aimerais beaucoup pouvoir utiliser ce genre de chose. Si ce n'est pas possible, connaissez-vous d'autres slideshow dans le même style qui sont plus simple a utiliser peut-être ? (quoique j'aimerais vraiment utiliser celui-ci). Sinon j'en ai trouver un autre que j'aime un peut moins :

http://devthought.com/projects/mootools/barackslideshow/

Mais c'est pareil je ne comprend pas, où faut-il placer les codes ?????

Merci d'avance pour vos réponses. Par contre je précise que je ne comprend rien à l'anglais donc je ne peut pas suivre les étapes indiquer sur les sites. Et je n'ai rien trouver en français ^^.

Merci beaucoup et désoler pour le roman.

Lien vers le commentaire
Partager sur d’autres sites
Ernestine

Ernestine

Posté
Posté

Salut,

C'est un plugin basé sur la librairie mootools, la première chose à faire est donc d'installer mootools, or je n'ai pas l'impression que tu l'aies fait ;)

En gros, mootools est un fichier de fonctions javascript que tu places sur ton serveur. Site officiel : http://mootools.net/

Apparemment pour ce plugin il te faut une version 1.2 : http://mootools.net/download/version/1.2.5

Une fois que tu as placé le fichier de mootools sur ton serveur, tu dois placer le plugin. En général un plugin est constitué de deux fichiers :

- le fichier javascript

- une feuille de styles

Bien souvent, le pack contient deux versions du javascript (une "normale" et une "compressée"), il peut aussi contenir des images, etc...

Je viens de regarder vite fait ce plugin, à priori les seuls fichiers dont tu as besoin dans le pack sont _class.noobSlide.packed.js (c'est le javascript) et _web.css (c'est la feuille de style).

Une fois que tout est prêt sur le serveur, il n'y a plus qu'à appliquer le plugin sur tes éléments html, pour cela, tu fais un copier-coller de la page de démo, en commençant par l'exemple le plus simple si tu ne t'en sors pas.

Voila, bon courage. Même si tu trouves ça compliqué, dis toi que tous les plugins javascript se placent plus ou moins de la même manière, donc si tu sais le faire pour un, tu sauras le faire pour tous.

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté (modifié)

Bonjour ernestine et merci pour ta réponse,

je vais essayer ce que tu m'a dit, je n'avais pas compris qu'il fallait installer quelque chose sur le serveur (donc je ne peut vérifier si ca marche que online c'est ca ?).

Je test et je vous redit si ca marche ou pas :)

Merci encore

[EDIT]

Je viens d'essayer mais je ne comprend pas. Qu'est-ce tu appelle installer mootools sur le serveur ? juste balancer les fichiers dessus ? ou alors il y a une manip plus compliquer ? Faut peut-être une base de donnée ?

Parce que là j'ai juste copier les fichiers dessus mais ça ne change rien, et le code de la page demo est toujours aussi galère à décortiquer (dsl pour l'orthographe), dès que je touche à quelque chose le sample 6 ne marche plus :s

je suis perdu perdu perdu ..... help ....

merci ;)

Modifié par HarTT
Lien vers le commentaire
Partager sur d’autres sites
Ernestine

Ernestine

Posté
Posté

Je me suis mal exprimée. Quand je disais de placer le javascript mootools sur le serveur, c'était dans l'optique de production, quand le site web sera en ligne. Pour faire des tests, il n'est évidemment pas nécessaire d'envoyer quoique ce soit sur le serveur, puisque le javascript s'exécute côté client. Mootools est un simple fichier javascript, il n'a besoin de rien d'autre qu'un navigateur web pour fonctionner.

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

Je n'y arrive pas !

C'est horrible je comprend rien au code .... :s

je vais changer ma question :

pourriez-vous juste m'isoler les bonnes lignes du codes pour avoir le sample 6 qui marche correctement ! parce-que je n'y arrive pas.

je m'arrangerais moi apres pour l'intégré et changer ce qu'il faut (enfin j'essaierai).

je crois que je me suis attaquer à trop gros pour moi ^^

merci d'avance

Lien vers le commentaire
Partager sur d’autres sites
Ernestine

Ernestine

Posté
Posté

Salut,

Ok, pour faire simple, tu télécharges tout simplement le package du plugin en cliquant sur "noobSlide (rev.19-06-08) para mootools 1.2"

Tu décompresses le fichier zip ainsi téléchargé, et tu places les fichiers obtenus (une vingtaine) dans un répertoire. Tu te places dans ce répertoire et là tu double-cliques sur "index.html" : cela va t'ouvrir une page web dans ton navigateur. Cette page web est strictement identique à celle de la démo en ligne, sauf que celle-ci, elle est sur ton ordinateur.

A partir de là tu as tout ce qu'il te faut. Dans le répertoire tu peux remplacer les images (img1.jpg, img2.jpg, etc) par les tiennes. Tu peux aussi facilement isoler l'exemple n°6 en affichant la source de la page index.html et en faisant un copier coller de la partie correspondante au sample 6.

Quand tout est au point en local, tu n'as plus qu'à envoyer tout ça sur le serveur de ton site web.

Ce n'est pas la façon la plus propre de procéder, loin de là (il faudrait télécharger la dernière version de mootools, il faudrait isoler les images dans un répertoire différent, supprimer les fichiers inutiles, etc), mais bon au moins ce sera opérationnel.

Bon courage.

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

je comprend bien tout ce que tu peux me dit et je l'ai déjà fait.

mais ca ne marche pas ! je ne peux pas isoler juste le sample 6 sans que celui-ci deconne !

je suis peut-etre novice mais j'ai deja fourrer mon nez dans des codes et là je ne comprend rien ! ca devrait marcher si je fais ce que tu me di hors ca ne marche pas ! il doi y avoir quelque chose qui deconne ou je ne sais quoi :s

merci pour la reponse en tout cas

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

Franchement, isoler le code pour le sample 6 est relativement simple puisque le code est assez bien commenté pour cela


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 
<head>
 	<title>noobSlide - mootools</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<link rel="stylesheet" href="[url="http://www.efectorelativo.net/laboratory/noobSlide/_web.css"]_web.css[/url]" type="text/css" media="screen" />
 	<link rel="stylesheet" href="[url="http://www.efectorelativo.net/laboratory/noobSlide/style.css"]style.css[/url]" type="text/css" media="screen" />
 	<script type="text/javascript" src="[url="http://www.efectorelativo.net/laboratory/js/gzip.php?js=mootools-1.2-core.js"]/laboratory/js/gzip.php?js=mootools-1.2-core.js[/url]"></script>
 	<script type="text/javascript" src="[url="http://www.efectorelativo.net/laboratory/noobSlide/_class.noobSlide.packed.js"]_class.noobSlide.packed.js[/url]"></script>
     <script type="text/javascript">
      	window.addEvent('domready',function(){
        	   //SAMPLE 6 (on "mouseenter" walk)	    
    	 	  var info6 = $('box6').getNext().set('opacity',0.5);	   
    	 	  var nS6 = new noobSlide({		    
    	 	 	  mode: 'vertical',            
    	 	 	  box: $('box6'),		    
    	 	 	  items: sampleObjectItems,		    
    	 	 	  size: 180,		    
    	 	 	  handles: $('#handles6_1 div').extend($('#handles6_2 div')),		    
    	 	 	  handle_event: 'mouseenter',		    
    	 	 	  addButtons: {			    
    	 	 	 	  previous: $('prev6'),			    
    	 	 	 	  play: $('play6'),			    
    	 	 	 	  stop: $('stop6'),			    
    	 	 	 	  playback: $('playback6'),			    
    	 	 	 	  next: $('next6')},		    
    	 	 	  button_event: 'click',		    
    	 	 	  fxOptions: {			    
    	 	 	 	  duration: 1000,			    
    	 	 	 	  transition: Fx.Transitions.Back.easeOut,			    
    	 	 	 	  wait: false			},		    
    	 	 	  onWalk: function(currentItem,currentHandle){			    
    	 	 	 	  info6.empty();			    
    	 	 	 	  new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);			    
    	 	 	 	  new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+'     <b>Date</b>: '+currentItem.date).inject(info6);				this.handles.set('opacity',0.3);			    
    	 	 	 	  currentHandle.set('opacity',1);			}		});	    
    	 	  //walk to next item	    
    	 	  nS6.next();

});	</script> 
</head> 
<body> 
 <!-- SAMPLE 6 --> 
<h2>Sample 6</h2>
 <div class="sample sample6">
 	<div class="thumbs" id="handles6_1">
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg"]img1.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg"]img2.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg"]img3.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg"]img4.jpg[/url]" alt="Photo Thumb" /></div>
 	</div>
 	<div class="mask6">
 		<div id="box6">
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg"]img1.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg"]img2.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg"]img3.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg"]img4.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg"]img5.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg"]img6.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg"]img7.jpg[/url]" alt="Photo" /></span>
 			<span><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg"]img8.jpg[/url]" alt="Photo" /></span>
 		</div>
 		<div class="info"></div>
 	</div>
 	<div class="thumbs" id="handles6_2">
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg"]img5.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg"]img6.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg"]img7.jpg[/url]" alt="Photo Thumb" /></div>
 		<div><img src="[url="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg"]img8.jpg[/url]" alt="Photo Thumb" /></div>
 	</div>
 	<p class="buttons">
 		<span id="prev6"><< Previous</span>
 		<span id="playback6"><Playback</span>
 		<span id="stop6">Stop</span>
 		<span id="play6">Play ></span>
 		<span id="next6">Next >></span>
 	</p>
 </div> 

</body> </html>

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

humm merci pour ta réponse

mais sans vouloir le faire exprès, ca ne marche toujours pas ! l'effet ne marche plus !

je ne sais pas si tu l'as tester mais il n'ya plus d'effet ni même de cadre pour cette fois-ci.

...

Lien vers le commentaire
Partager sur d’autres sites
Dadou

Dadou

Posté
Posté

Non pas testé, mais la broutille qui fait que cela ne marche pas, c'est le BBCode qui a ajouter de mauvais tags (copier/coller un peu à l'arrache), et il manquait le tableau sampleObjectItems initialisé pour l'exemple 5

Celui la fonctionne.



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
        <title>noobSlide - mootools</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <script type="text/javascript" src="mootools-1.2-core.js"></script>
        <script type="text/javascript" src="_class.noobSlide.packed.js"></script>
        <script type="text/javascript">
        window.addEvent('domready',function(){
		var sampleObjectItems =[
			{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
			{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
			{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
			{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
			{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
			{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
			{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
			{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
		];

                 //SAMPLE 6 (on "mouseenter" walk)
		var info6 = $('box6').getNext().set('opacity',0.5);
		var nS6 = new noobSlide({
			mode: 'vertical',
			box: $('box6'),
			items: sampleObjectItems,
			size: 180,
			handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
			handle_event: 'mouseenter',
			addButtons: {
				previous: $('prev6'),
				play: $('play6'),
				stop: $('stop6'),
				playback: $('playback6'),
				next: $('next6')
			},
			button_event: 'click',
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Back.easeOut,
				wait: false
			},
			onWalk: function(currentItem,currentHandle){
				info6.empty();
				new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
				new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+'     <b>Date</b>: '+currentItem.date).inject(info6);
				this.handles.set('opacity',0.3);
				currentHandle.set('opacity',1);
			}
		});
		//walk to next item
		nS6.next();
        });
        </script>
</head>
<body>
<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
	<div class="thumbs" id="handles6_1">
		<div><img src="img1.jpg" alt="Photo Thumb" /></div>
		<div><img src="img2.jpg" alt="Photo Thumb" /></div>
		<div><img src="img3.jpg" alt="Photo Thumb" /></div>
		<div><img src="img4.jpg" alt="Photo Thumb" /></div>
	</div>
	<div class="mask6">
		<div id="box6">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
		<div class="info"></div>
	</div>
	<div class="thumbs" id="handles6_2">
		<div><img src="img5.jpg" alt="Photo Thumb" /></div>
		<div><img src="img6.jpg" alt="Photo Thumb" /></div>
		<div><img src="img7.jpg" alt="Photo Thumb" /></div>
		<div><img src="img8.jpg" alt="Photo Thumb" /></div>
	</div>
	<p class="buttons">
		<span id="prev6"><< Previous</span>
		<span id="playback6"><Playback</span>
		<span id="stop6">Stop</span>
		<span id="play6">Play ></span>
		<span id="next6">Next >></span>
	</p>
</div>

</body></html>

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

merci c'est mieux, mais ce n'est toujours pas fidèle à l'original, je pige rien ^^

là le cadre fait la largeur de la page et il n'a toujours pas les effets de transition, ou alors c'est moi qui fait mal quelque chose ! :s

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

c'est bien ce que je suis en train de faire du coup je me suis lancer dans l'apprentissage du xhtml et css, mais je dois finir le site rapidement, donc je n'ai pas forcément le temps de tout apprendre et donc de comprendre d'ou vient le fait qu'il n'y ai plus de transition ...

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté

c'est bon j'ai réussi à l'intégrer à ma page et à le modifier au niveau des tailles d'images etc...

par contre j'ai deux soucis:

le premier c'est que je n'arrive pas à centrer le tout dans mon cadre, comme je ne connais pas toutes les fonctions du code j'ai chercher au pif en modifiant les valeurs: j'arrive à déplacer les éléments avec des pourcentages et des margin mais je n'arrive pas à les centrer réellement (on voit bien à l'il nu que y'a un petit décalage, ca fait pas très pro quoi :s) j'imagine qu'il y a une fonction pour ca, mais laquelle ?

le deuxième c'est que pour adapter le script à ma page j'ai agrandi les images et leurs correspondance dans le CSS. Donc c'est bon j'ai le script à la taille que je veux mais par contre les images ne défilent pu correctement au milieu, au lien de faire défiler image par image, il me fait une demi par une demi, ce qui fait que je me retrouve avec 2 moitié d'image au lieu d'une entière (et du coup j'ai pas les dernières vu que tout se trouve décaler). J'imagine également qu'il y a une fonction pour dire qu'il doit faire défiler tant de pixel ou quelque chose comme ca.

si vous voulez les codes demandez-moi

merci d'avance

Lien vers le commentaire
Partager sur d’autres sites
Ernestine

Ernestine

Posté
Posté

Je n'ai pas testé, mais en plein milieu du code ont voit :

size: 180,

Or 180 pixels est justement la hauteur des photos de l'exemple. C'est donc certainement cette valeur qu'il te faut changer pour l'adapter à la hauteur de tes images.

Les dimensions des images apparaissent aussi dans la CSS, on voit des 240 (largeur des photos) et des 180 (hauteur des photos) à plusieurs endroits. Il faudrait peut-être aussi modifier là.

PS : il m'a l'air quand même un peu brouillon ce pluggin...

Lien vers le commentaire
Partager sur d’autres sites
HarTT

HarTT

Posté
  • Auteur
Posté (modifié)

humm oui j'ai vu ca mais j'ai tester ca ne marche pas, enfin je vais continuer merci ;)

autre soucis que je vient de découvrir:

sur ie pas de souci il m'affiche ma page centrer avec le plugin la ou je l'avais mis etc... par contre sous firefox et safari ma page est a gauche et totu est décaler. une idée ?

re-ps: oui ca m'en a tou l'air aussi mais je n'ai rien trouver de similaire en version correcte.

[EDIT]

OUIII c'était ca ernestine merci, en fait j'avais regarder partout dans le css et dans le .js mais pas dans le code html ^^ je suis un boulet oui oui ...

merci beaucoup, me reste encore quelque soucis à regler

Modifié par HarTT
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...