Affichage des articles dont le libellé est noobslide. Afficher tous les articles
Affichage des articles dont le libellé est noobslide. Afficher tous les articles

24 juil. 2010

Créer un slideshow avec NoobSlide (Sample 6)

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

Créer un slideshow avec NoobSlide (Sample 5)

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 5

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 :

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);
            }
        });
        //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>
<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">
    <div class="mask2">
        <div id="box5">
            <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 id="info5" class="info"></div>
    </div>
    <p class="buttons">
        <span id="prev5">&lt;&lt; Previous</span>
        <span id="play5">Play &gt;</span>
        <span id="stop5">Stop</span>
        <span id="next5">Next &gt;&gt;</span>
    </p>
</div>
</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

Créer un slideshow avec NoobSlide (Sample 4)

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

Voir Sample 4

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 :

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 4 (walk to item)
        var hs4 = new noobSlide({
            box: $('box4'),
            items: $ES('div','box4'),
            size: 480,
            handles: $ES('span','handles4'),
            onWalk: function(currentItem,currentHandle){
                $('info4').setHTML(currentItem.getFirst().innerHTML);
                this.handles.removeClass('active');
                currentHandle.addClass('active');
            }
        }
        //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>
<!-- SAMPLE 4 -->
<h2>Sample 4</h2>
<div class="sample">
    <div class="mask3">
        <div id="box4">
            <div>
                <h3>1. Lorem ipsum dolor sit amet</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.
</p>
            </div>
            <div>
                <h3>2. Nullam porttitor tortor et sem</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
                <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesentat lacus. Aenean tincidunt. In hac habitasse platea dictumst.
</p>
            </div>
            <div>
                <h3>3. Aenean consectetuer nibh sedt</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg"
alt="Photo" />
                <ul>
                    <li>Duis consequat laoreet libero.</li>
                    <li>Nullam scelerisque porta arcu.</li>
                    <li>Praesent ut tortor quis nunc vehicula interdum.</li>
                    <li>Cras ultrices venenatis justo.</li>
                    <li>Duis eu ligula at justo tempus varius.</li>
                    <li>Vivamus mattis ante et arcu.</li>
                    <li>Nulla eleifend dignissim neque.</li>
                    <li>Donec ut elit vel nisi mollis volutpat.
</li>
                </ul>
            </div>
            <div>
                <h3>4. Pellentesque ac dolor</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.
</p>
            </div>
            <div>
                <h3>5. Pellentesque ac dolor</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus.Aenean tincidunt. In hac habitasse platea dictumst.
</p>
            </div>
            <div>
                <h3>6. Lorem ipsum dolor sit amet</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.
</p>
            </div>
            <div>
                <h3>7. Nullam porttitor tortor et sem</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg"
alt="Photo" />
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
                <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesentat lacus. Aenean tincidunt. In hac habitasse platea dictumst
.</p>
            </div>
            <div>
                <h3>8. Aenean consectetuer nibh sedt</h3>
                <img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg"
alt="Photo" />
                <ul>
                    <li>Duis consequat laoreet libero.</li>
                    <li>Nullam scelerisque porta arcu.</li>
                    <li>Praesent ut tortor quis nunc vehicula interdum.</li>
                    <li>Cras ultrices venenatis justo.</li>
                    <li>Duis eu ligula at justo tempus varius.</li>
                    <li>Vivamus mattis ante et arcu.</li>
                    <li>Nulla eleifend dignissim neque.</li>
                    <li>Donec ut elit vel nisi mollis volutpat
.</li>
                </ul>
            </div>
        </div>
    </div>
    <h4>Show: <span id="info4"></span></h4>
    <p class="buttons" id="handles4">
        <span>1. Uno</span>
        <span>2. Dos</span>
        <span>3. Tres</span>
        <span>4. Cuatro</span>
        <span>5. Cinco</span>
        <span>6. Seis</span>
        <span>7. Siete</span>
        <span>8. Ocho</span>
    </p>
</div>
</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

Créer un slideshow avec NoobSlide (Sample 2)

Ce slideshow NoobSlide présente des boutons  << Previous  Play >  Stop  Next >> 

Voir Sample 2

Etape 1 :

Allez sur NoobSlide

Tout en bas de la page, cliquez sur Download

Vous venez d'enregistrer 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 :

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 2 (transition: Bounce.easeOut)
        var hs2 = new noobSlide({
            box: $('box2'),
            items: [1,2,3,4,5,6,7,8],
            interval: 3000,
            fxOptions: {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut,
                wait: false
            },
            buttons: {
                previous: $('prev1'),
                play: $('play1'),
                stop: $('stop1'),
                next: $('next1')
            }
        });
  
        //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>
<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
    <div class="mask2">
        <div id="box2">
            <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>
    <p class="buttons">
        <span id="prev1">&lt;&lt; Previous</span>
        <span id="play1">Play &gt;</span>
        <span id="stop1">Stop</span>
        <span id="next1">Next &gt;&gt;</span>
    </p>
</div>
</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 de votre slideshow

Créer un slideshow avec NoobSlide (Sample 1)

NoobSlide est un script qui vous permet de faire défiler vos images.

Voir Sample 1

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 :

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 1 (auto, every 5 sec)
        var hs1 = new noobSlide({
            box: $('box1'),
            items: [1,2,3,4],
            size: 480,
            autoPlay: true
        });
        //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>
<!-- SAMPLE 1 -->
<h2>Sample 1</h2>
<div class="sample">
    <div class="mask1">
        <div id="box1">
            <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>
</div>
</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 de votre slideshow

22 juil. 2010

Créer une fenêtre pop up slideshow avec du texte avec NoobSlide

Grâce à ce script NoobSlide, vous pouvez faire défiler du texte à l'aide de boutons.

Voir Sample 8

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 :

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

<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 8
var hs8 = new noobSlide({
            box: $('box8'),
            startItem: 1,
            items: $ES('h3','box8'),
            size: 480,
            handles: $ES('span','handles8'),
            buttons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
            onWalk: function(currentItem,currentHandle){
                //style for handles
                this.handles.extend(handles8_more).removeClass('active');
                $$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
                //text for "previous" and "next" default buttons
                $('prev8').setHTML('&lt;&lt; '+this.items[this.previousIndex].innerHTML);
                $('next8').setHTML(this.items[this.nextIndex].innerHTML+' &gt;&gt;');
            }
        });

        //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>
<!-- SAMPLE 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
    <p class="buttons" id="handles8">
        <span>Pane 1</span>
        <span>Pane 2</span>
        <span>Pane 3</span>
        <span>Pane 4</span>
    </p>
    <div class="mask1">
        <div id="box8">
            <div>
                <p class="buttons"><span class="prev">&lt;&lt;
Previous
</span> <span class="next">Next &gt;&gt;</span></p>
                <h3>1. Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>

            </div>
            <div>
                <p class="buttons"><span class="prev">&lt;&lt;
Previous
</span> <span class="next">Next &gt;&gt;</span></p>
                <h3>2. Quisque aliquet accumsan</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim
quis, convallis molestie, nisi.
</p>
            </div>
            <div>
                <p class="buttons"><span class="prev">&lt;&lt;
Previous
</span> <span class="next">Next &gt;&gt;</span></p>
                <h3>3. Duis consequat laoreet</h3>
                <ul>
                    <li>Duis consequat laoreet libero.</li>
                    <li>Nullam scelerisque porta arcu.</li>
                    <li>Praesent ut tortor quis nunc vehicula interdum.</li>
                    <li>Cras ultrices venenatis justo.
</li>
                </ul>

            </div>


            <div>

                <p class="buttons"><span class="prev">&lt;&lt;
Previous
</span> <span class="next">Next &gt;&gt;</span></p>

                <h3>4. Aenean consectetuer</h3>

                <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed
ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.
</p>


            </div>

        </div>

    </div>



    <p class="buttons">

        <span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>



    </p>



    <p class="buttons">

        <span id="playback8">&lt;Playback</span>

        <span id="stop8">Stop</span>

        <span id="play8">Play &gt;</span>

    </p>



    <p class="buttons" id="handles8_more">



        <span>1</span>

        <span>2</span>

        <span>3</span>

        <span>4</span>

    </p>



</div></div>

</body>

</html>

Vous modifiez :

En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4. Si votre blog est sur OB, vous pouvez utiliser mes adresses de fichiers.

En vert, les titres et textes de votre slideshow