Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

publié dans : Effets d'Images et diaporamas - Tous blogs

Créer un slideshow avec miniatures - NoobSlide - Sample 6 - Privilège

NoobSlide est un script qui vous permet de faire défiler vos images. Ce modèle défile de bas en haut et contient des textes.

Voir Sample 6

Etape 1 :

Allez sur NoobSlide

Tout en bas de la page, cliquez sur Download

Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...

Etape 2 :

Dans l'administration de votre blog, Documents - Autres Fichiers :
  • créez un répertoire Noobslide
  • uploadez-y les fichiers :
    • thumb_invisible.gif
    • thumbs_mask.gif
  • notez leur adresse
Etape 3 :

Sur votre PC :
  • ouvrez le bloc-note
  • appelez le fichier style.css
  • modifiez-y les adresses des fichiers :
    • thumb_invisible.gif
    • thumbs_mask.gif
  • enregistrez le fichier sous le même nom
Etape 4 :

Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
  • enregistrez les fichiers :
    • style.css
    • _mootools.js
    • _class.noobSlide.js
    • web.css
  • notez leur adresse
Etape 5 :

Pour que ce script fonctionne, j'ai dû laisser certaines informations qui concernent le sample 5. Je les ai caché, elles n'apparaissent pas en mode normal.

Lors de la conception de ce slideshow, en HTML, collez

  <head>
   
    <link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
 <script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
 <script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
    <script type="text/javascript">
    window.addEvent('domready',function(){
    
        //SAMPLE 5 (mode: vertical, using "onWalk" )
        var info5 = $('info5').setOpacity(0.5);
        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'}
        ];
        var hs5 = new noobSlide({
            mode: 'vertical',
            box: $('box5'),
            size: 180,
            items: sampleObjectItems,
            buttons: {
                previous: $('prev5'),
                play: $('play5'),
                stop: $('stop5'),
                next: $('next5')
            },
            onWalk: function(currentItem){
                info5.empty();
                new Element('h4').setHTML('<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
                new Element('p').setHTML('<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info5);
            }
        });

        //SAMPLE 6 (on "mouseenter" walk)
        var info6 = $('box6').getNext().setOpacity(0.5);
        var hs6 = new noobSlide({
            mode: 'vertical',
            box: $('box6'),
            items: sampleObjectItems,
            size: 180,
            handles: $ES('div','handles6_1').extend($ES('div','handles6_2')),
            handle_event: 'mouseenter',
            buttons: {
                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').setHTML('<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
                new Element('p').setHTML('<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
                this.handles.setOpacity(0.3);
                currentHandle.setOpacity(1);
            }
        });
        hs6.next();
       
       
        //more "previous" and "next" buttons
        hs8.addActionButtons('previous',$ES('.prev','box8'));
        hs8.addActionButtons('next',$ES('.next','box8'));
        //more handle buttons
        var handles8_more = $ES('span','handles8_more');
        hs8.addHandleButtons(handles8_more);
        //
        hs8.walk(0)

    });
    </script>
</head>
<body>

<div id="cont">
<h1>noobSlide - mootools</h1>
<div id='myText' style='display: none'>texte caché
<!-- SAMPLE 5 -->
<h2></h2>
<div class="sample">
    <div class="mask2">
        <div id="box5">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div id="info5" class="info"></div>
    </div>
    <p class="buttons">
        <span id="prev5"></span>
        <span id="play5"></span>
        <span id="stop5"></span>
        <span id="next5"></span>
    </p>
</div></div>

<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
    <div class="thumbs" id="handles6_1">
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo Thumb" /></div>
    </div>
    <div class="mask6">
        <div id="box6">
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo" /></span>
            <span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo" /></span>
        </div>
        <div class="info"></div>
    </div>
    <div class="thumbs" id="handles6_2">
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo Thumb" /></div>
        <div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo Thumb" /></div>
    </div>
    <p class="buttons">
        <span id="prev6">&lt;&lt; Previous</span>
        <span id="playback6">&lt;Playback</span>
        <span id="stop6">Stop</span>
        <span id="play6">Play &gt;</span>
        <span id="next6">Next &gt;&gt;</span>
    </p>
</div>
</body>
</html>

Vous modifiez :

En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En bleu, les adresses de vos propres photos qui défileront
En vert, les titres et textes de votre slideshow
commentaires (5)    ajouter un commentaire
Retour à l'accueil

Publicité

 

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

 

Recherche Rapide Sur le Site

 

Sommaires

 

Déco d'Hiver

 

Hiver - Neige sur le blog
Hiver - Mettre une congère

 

Déco de Noël

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus