24 juil. 2010

Créer un slideshow avec NoobSlide (Sample 6)

Publié par Libellés : , , , , ,
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

1 commentaire:

  1. multiviews7 juin 2011 à 12:26

    super mais y a un problème je n'ai pas l'option autre fichier dommage pour moi!!
    il faut le pack premium? ben dommage j'en veu pas..

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)

Inscription à : Publier les commentaires (Atom)