SlideItMoo sur deux lignes de vignette

iluvatar75 · 10/08/2011, 15h34

Bonjour tout le monde !

Je reviens vers vous car je désire réaliser un diaporama dynamique...

En cherchant sur internet j'ai trouvé ce script :
http://www.php-help.ro/mootools-12-j...er-slideitmoo/

mais voilà, ce que je désire, c'est qu'au lieu d'avoir une ligne avec 4 images (par exemple) à l'horizontal d’insérer une deuxième ligne (avec 4 autres images).
En faite un diaporama avec 4 colonnes sur 2 lignes (en tout 8 vignettes visibles)
Et qu'avec tout ça, je puisse les faire défiler tous ensemble avec les flèches (PREV/NEXT)

Le script est déjà pas mal mais j'aurais voulu modifier ce petit détail que j'ai essaye décrire plus haut

serait il possible d'effectuer ce petit changement ?

(je m'excuse par avance si ma question n'est pas très clair !)

iluvatar75 · 10/08/2011, 15h39

Je vous mets le code HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlideItMoo - MooTools 1.2 image slider</title>
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />
 
<script language="javascript" type="text/javascript" src="script/mootools-1.2-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/SlideItMoo.js"></script>
<script language="javascript" type="text/javascript">
window.addEvent('domready', function(){
	/* thumbnails example , links only */
	new SlideItMoo({itemsVisible:5, // the number of thumbnails that are visible
					currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
					thumbsContainer: 'thumbs',
					elementScrolled: 'thumb_container',
					overallContainer: 'gallery_container'});
});
</script>
</head>
 
<body>
<div id="container">
	<h1><strong>SlideItMoo</strong> - Thumbnail / banner slider with MooTools 1.2</h1>
 
	<p>Fancy good looking way to display the thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.</p>
	<p>
		<strong>Prerequisites for this example:</strong>
		<ol>
			<li>MooTools 1.2 core and MooTools 1.2 more - <a href="http://mootools.net/">visit mootools.net</a></li>
			<li>* Slimbox 1.65 - <a href="http://www.digitalia.be/software/slimbox">visit homepage</a></li>
		</ol>
	</p>
 
	<p>
		<strong>Tested on:</strong>
		<ul>
			<li>IE 6</li>
			<li>Firefox 2, Firefox 3</li>
			<li>Google Chrome</li>
			<li>Opera 9.5</li>
		</ul>
	</p>
 
	<p>
		<strong>Installation</strong>: 
		<ol>
			<li>insert into the &lt;head&gt;&lt;/head&gt; section of your html document the CSS ( from styles.css the section between <strong>/* thumbnail slider begin */</strong> and <strong>/* thumbnail slider end */</strong> ) and JavaScript files ( mootools-1.2-core.js, mootools-1.2-more.js, slimbox.js and gallery_slide.js )</li>
			<li>add the HTML code contained between <strong>&lt;!--thumbnails slideshow begin--&gt;</strong> and <strong>&lt;!--thumbnails slideshow end--&gt;</strong> to your page</li>
		</ol>
	</p>
 
	<p>For best results, please make sure that all your thumbnails have the same size.</p>
 
	<p>
		<strong>Demo 1 - thumbnails slider, only links</strong>:<br />
		Use the forward - back buttons or mouse wheel.
	</p>	
	<!--thumbnails slideshow begin-->
	<div id="gallery_container">	
		<div id="thumb_container">			
			<div id="thumbs">
				<a href="gallery/full/DC080302018.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302018.jpg" width="84" height="84" /></a>	
				<a href="gallery/full/DC080302028.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302028.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DC080302030.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302030.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DC080302040.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DC080302040.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02825.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02825.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02841.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02841.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02865.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02865.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02891.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02891.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02916.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02916.jpg" width="84" height="84" /></a>
				<a href="gallery/full/DSC02959.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC02959.jpg" width="84" height="84" /></a>	
				<a href="gallery/full/DSC03032.jpg" rel="lightbox[galerie]" target="_blank"><img src="gallery/thumb/DSC03032.jpg" width="84" height="84" /></a>	
			</div>			
		</div>
	</div>

et le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var SlideItMoo = new Class({
 
	initialize: function(options){
		this.options = $extend({
			itemsVisible:5,
			showControls:1,
			autoSlide: 0,
			transition: Fx.Transitions.linear,
			currentElement: 0,
			thumbsContainer: 'thumbs',
			elementScrolled: 'thumb_container',
			overallContainer: 'gallery_container'
		},options || {});	
 
		this.images = $(this.options.thumbsContainer).getElements('a');
		// assumes that all thumbnails have the same width
		this.image_size = this.images[0].getSize();
 
		// resizes the container div's according to the number of itemsVisible thumbnails
		this.setContainersSize();
 
		this.myFx = new Fx.Scroll(this.options.elementScrolled,{ transition: this.options.transition });		
		// adds the forward-backward buttons
		if( this.images.length > this.options.itemsVisible ){
			this.fwd = this.addControlers('addfwd');
			this.bkwd = this.addControlers('addbkwd');
			this.forward();
			this.backward();
			/* if autoSlide is not set, scoll on mouse wheel */
			if( !this.options.autoSlide ){
				$(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
					new Event(ev).stop();
					ev.wheel < 0 ? this.fwd.fireEvent('click') : this.bkwd.fireEvent('click');			
				}.bind(this));
			}
			else{
				this.startIt = function(){ this.fwd.fireEvent('click') }.bind(this);
				this.autoSlide = this.startIt.periodical(this.options.autoSlide, this);
				this.images.addEvents({
					'mouseover':function(){
						$clear(this.autoSlide);						
					}.bind(this),
					'mouseout':function(){
						this.autoSlide = this.startIt.periodical(this.options.autoSlide, this);
					}.bind(this)
				})
			}
		};
 
		// if there's a specific default thumbnail to start with, slide to it
		if( this.options.currentElement!==0 ){
			this.options.currentElement-=1;
			this.slide(1);
		}
	},
 
	setContainersSize: function(){
		$(this.options.overallContainer).set({
			styles:{
				'width': this.options.itemsVisible * this.image_size.x + 50*this.options.showControls + (this.options.itemsVisible-1)*3
			}
		});
		$(this.options.elementScrolled).set({
			styles:{
				'width': this.options.itemsVisible * this.image_size.x + (this.options.itemsVisible-1)*3
			}
		});
	},
 
	forward: function(){				
		this.fwd.addEvent('click',function(){
			this.slide(1);
		}.bind(this));		
	},
 
	backward: function(){			
		this.bkwd.addEvent('click',function(){											
			this.slide(-1);			
		}.bind(this))	
	},
 
	addControlers: function(cssClass){
		element = new Element('div',{
			'class': cssClass,
			styles:{
				'display': this.options.showControls ? '' : 'none'
			}
		}).injectInside($(this.options.overallContainer));
		return element;
	},
 
	slide: function(step){
		/* if autoslice is on, when end is reached, go back to begining */
		if(this.options.autoSlide && this.options.currentElement >= this.images.length-this.options.itemsVisible ){
			this.options.currentElement = -1;
		}
 
		if ( ( this.options.currentElement < this.images.length-this.options.itemsVisible && step>0 ) || ( step < 0 && this.options.currentElement !== 0 ) ){
			this.myFx.cancel();
			this.options.currentElement += step;		
			this.myFx.toElement( this.images[this.options.currentElement] );
		}
	}
})

y a t il un moyen de modifier sur l'un de ces codes ?

Sauf si vous avez un autre script qui ferait le même effet à me proposer

10/08/2011, 15h34	#1
iluvatar75 Nouveau Membre du Club Webdesigner Inscription : décembre 2008 Messages : 95 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webdesigner Informations forums : Inscription : décembre 2008 Messages : 95 Points : 25 Points : 25	SlideItMoo sur deux lignes de vignette Bonjour tout le monde ! Je reviens vers vous car je désire réaliser un diaporama dynamique... En cherchant sur internet j'ai trouvé ce script : http://www.php-help.ro/mootools-12-j...er-slideitmoo/ mais voilà, ce que je désire, c'est qu'au lieu d'avoir une ligne avec 4 images (par exemple) à l'horizontal d’insérer une deuxième ligne (avec 4 autres images). En faite un diaporama avec 4 colonnes sur 2 lignes (en tout 8 vignettes visibles) Et qu'avec tout ça, je puisse les faire défiler tous ensemble avec les flèches (PREV/NEXT) Le script est déjà pas mal mais j'aurais voulu modifier ce petit détail que j'ai essaye décrire plus haut serait il possible d'effectuer ce petit changement ? (je m'excuse par avance si ma question n'est pas très clair !)
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email