IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

SlideItMoo sur deux lignes de vignette


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Décembre 2008
    Messages
    100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Décembre 2008
    Messages : 100
    Par défaut 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 !)

  2. #2
    Membre confirmé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Décembre 2008
    Messages
    100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Décembre 2008
    Messages : 100
    Par défaut
    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

Discussions similaires

  1. Réponses: 3
    Dernier message: 20/11/2013, 10h28
  2. ecrire sur deux ligne dans une button
    Par zidenne dans le forum Delphi
    Réponses: 5
    Dernier message: 27/07/2006, 10h23
  3. Caption sur deux lignes sur un bouton?
    Par Jayceblaster dans le forum Delphi
    Réponses: 4
    Dernier message: 09/06/2006, 13h57
  4. [VB2005]Texte sur deux lignes
    Par Petrolia dans le forum Windows Forms
    Réponses: 1
    Dernier message: 04/06/2006, 14h51
  5. [VB.NET] DataGrid : titre des colonnes sur deux lignes
    Par Lahouari dans le forum Windows Forms
    Réponses: 6
    Dernier message: 06/12/2004, 14h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo