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

30 juil. 2010

Créer un lecteur de musique dans une multibox

Publié par Libellés : , , , ,
Un très joli effet lightbox. Testez-le en cliquant sur ce lien

Lien vers page HTML - Multibox MP3

Puis sur Cliquez ici pour voir l'exemple

1ère étape :

Allez sur Phatfusion

Cliquez sur multibox.zip

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

2ème étape :

Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11

Vous arrivez sur le site Mootools, où vous cliquez sur Download.

Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.

Vous recliquez sur Download.

Vous venez d'enregistrer le fichier mootools.js

3ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :
  •  vous créez un répertoire nommé multibox :

    •  dans lequel vous créez un sous-répertoire nommé images

      • vous y enregistrez les images suivantes :

        • close.png       
          left.png
          leftDisabled.png
          loader.gif
          right.png
          rightDisabled.png
      • vous notez leur adresse
4ème étape :

Sur votre PC :
  • vous ouvrez votre Bloc-Notes
  • vous appelez le fichier multibox.css
  • vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
  • vous enregistrez sous le même nom
5 ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - multibox :
  • créez un sous-répertoire multibox :

    • dans lequel vous enregistrez le fichier mp3player.swf
6ème étape :
  • vous créez un sous-répertoire nommé : css

    • dans lequel vous enregistrez le fichier :

      • multibox.css
  • vous créez un sous-répertoire nommé : js

    • dans lequel vous enregistrez les fichiers :

      • multibox.js  
      • overlay.js
      • mootools.js
  • vous notez les adresses de ces 4 fichiers
7ème étape :

Maintenant, plaçons ce lecteur. En HTML, vous collez
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/css/multibox.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/overlay.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/multibox.js"></script>
<style type="text/css">
#htmlElement {
    padding: 10px;
    background-color: #000;
}
</style>

Vous remplacez les adresses en rouge par les vôtres : vous les avez noté à l'étape 6.

Si vous êtes sur OverBlog, vous pouvez utiliser les miennes

Puis votre morceau de musique, toujours en HTML
<div id="container">
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/music.mp3" rel="" id="mb8" class="mb"
title="Musique">La musique que j'aime</a>
<div class="multiBoxDesc mb8">Un morceau de musique</div>
</div>
En bleu, votre morceau de musique
En vert, l'intitulé du lien qui apparaît sur votre blog
En orange, ce qui apparaîtra sous le lecteur

Et pour finir, tel quel, toujours en HTML
<script type="text/javascript">
            var box = {};
            window.addEvent('domready', function(){
                box = new MultiBox('mb', {
                    useOverlay: true,
                    container: document.body,
                    contentColor: '#FFF',
                    showNumbers: true,
                    descClassName: 'multiBoxDesc',
                    path: 'multibox/'
                });
            });
</script>
Aucun commentaire:

29 juil. 2010

Mettre en ligne une vidéo dans une vidéoBox

Publié par Libellés : , , , ,
Encore un joli effet de lightbox et ce n'est pas très difficile à réaliser.
Attendez que la page et tous les fichiers se chargent et faîtes le test :




Cliquez pour voir la vidéo

Si votre blog est sur OverBlog, vous pouvez utiliser les adresses de mes fichiers. Vous devez seulement changer l'adresse de votre vidéo

Première étape :

Allez sur VidéoBox

Cliquez sur Download VideoBox 1.1

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

Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres Fichiers :
  • vous créez un répertoire videobox

    • dans ce répertoire, vous enregistrez les fichiers

      • closelabel.gif
      • loading.gif
    • vous notez leur adresse
Troisième étape :

Sur votre PC :
  • vous ouvrez le bloc-note
  • vous appelez le fichier videobox.css
  • vous modifiez les chemins des images en les remplaçant par les nouvelles adresses (2ème étape)
  • vous enregistrez le fichier sous le même nom
Quatrième étape :

Dans votre administration - Mes documents - autres fichiers - videobox :
  • vous enregistrez les fichiers suivants :

    • flvplayer.swf
    • swfobject.js
    • videbox.css
    • videobox.js
  • vous notez leur adresse
Cinquième étape :

Lors de l'installation de la vidéo, vous collez en HTML
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/swfobject.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.css" type="text/css" media="screen" />
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">Cliquez pour voir la vidéo</a>

En rouge, les fichiers enregistrés à l'étape 4
En bleu, l'adresse de la vidéo . On trouve cette adresse sur YouTube dans la barre de menu du navigateur

Aucun commentaire:

Mettre en ligne une vidéo dans une ibox

Publié par Libellés : , , , ,
Une Ibox présente un effet comparable à la lightbox : fond sombre qui recouvre le blog.
Attendez le chargement complet de la page et donc des fichiers, cliquez, vous verrez le résultat est sympa et ce n'est pas très difficile à réaliser.

My YouTube Video

Etape 1 :

Allez sur Ibox

Cliquez sur ibox.2.17c.zip

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, Mes Documents - Autres fichiers :
  • vous créez un répertoire ibox

    • dans lequel vous créez un sous-répertoire images

      • dans lequel vous enregistrez :

        • bg.png
      • vous notez son adresse
Etape 3 :

Sur votre PC, vous ouvez votre Bloc-Notes, vous appelez le fichier ibox.js :
  • vous recherchez le fichier bg.png
  • vous modifiez son adresse (vous l'avez noté à l'étape 2)
  • vous enregistrez sous le même nom
Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - répertoire ibox :
  • vous enregistrez le fichier ibox.js
  • vous notez son adresse
Etape 5 :

Vous allez sur Youtube :
  • vous choisissez votre vidéo,
  • vous notez l'adresse qui est dans la barre de navigation de votre navigateur
Etape 6 :

En HTML de l'article où vous voulez placer ce lien, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script><a rel="ibox" href="http://fr.youtube.com/watch?v=smqBrRhLf2s">My YouTube Video</a>
Vous personnalisez :
  • en rouge : l'adresse de votre fichier ibox.js : vous l'avez noté lors de l'étape 4
  • en vert : l'adresse de votre vidéo : vous l'avez noté lors de l'étape 5
  • en bleu : le nom du lien qui apparaît à l'écran
Aucun commentaire:

24 juil. 2010

Créer un slideshow multipages avec Lightbox2

Publié par Libellés : , , , ,
Un beau slideshow, pas très difficile à réaliser en HTML et sans javascript.

Voici un exemple : Lbox

Je l'ai mis sur une page à part car la galerie est trop large. Je n'y ai mis que quelques photos. Survolez avec la souris le menu, puis les photos.

Première étape :

Allez chez StuNicolls

Cliquez sur Download lightbox2.zip.
Vous venez de sauvegarder un fichier .zip : une ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - Extraire vers

Deuxième étape :

Dans l'administration de votre blog, Documents - Autres fichiers :
  • vous créez un répertoire Lbox, vous y sauvegardez l'image :

    • close.gif
  • vous notez son adresse
Troisième étape :

Sur votre PC, vous cliquez sur le fichier lightbox2.html.
C'est un lien qui vous conduit sur une page web où apparaît la galerie.
Vous regardez sa source et la sauvegardez.

Je la colle ici pour les explications :
<style type="text/css">
/* ======================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
======================================= */
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#111;}
/* slides styling */
.photo {width:720px; text-align:left; position:relative;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:240px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px
1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul{display:none;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a{color:#fff; background:#aaa;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/lbox/close.gif) no-repeat right top; width:479px; padding:70px 100px; border:20px solid #aaa;}
.photo ul.topic li a:hover ul li,
.photo ul.topic li:hover ul li{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li a:hover ul li a,
.photo ul.topic li:hover ul li a{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li a:hover ul li a img,
.photo ul.topic li:hover ul li a img{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a img.large,
.photo ul.topic li:hover ul li a img.large{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.photo ul.topic li a:hover ul li a:hover img.large,
.photo ul.topic li:hover ul li a:hover img.large
{position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;}
.photo ul.topic li:hover ul li a:focus,
.photo ul.topic li:hover ul li a:active,
.photo ul.topic li a:hover ul li a:active
{position:static; outline:0;}
.photo ul.topic li:hover ul li a:focus img,
.photo ul.topic li:hover ul li a:active img,
.photo ul.topic li a:hover ul li a:active img
{position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;}
.photo ul.topic li:hover ul li a:focus img.large,
.photo ul.topic li:hover ul li a:active img.large,
.photo ul.topic li a:hover ul li a:active img.large
{position:absolute; left:15px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;}
</style>
</head>
<body>
<div class="photo">
<ul class="topic">
    <li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#portrait1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" title="" /></a></li>
<li><a href="#portrait4"><img src="lbox/portrait4a.jpg" alt="" title="" /><img class="large" src="lbox/portrait4.jpg" alt="" title="" /></a></li>
<li><a href="#portrait5"><img src="lbox/portrait5a.jpg" alt="" title="" /><img class="large" src="lbox/portrait5.jpg" alt="" title="" /></a></li>
<li><a href="#portrait6"><img src="lbox/portrait6a.jpg" alt="" title="" /><img class="large" src="lbox/portrait6.jpg" alt="" title="" /></a></li>
<li><a href="#portrait7"><img src="lbox/portrait7a.jpg" alt="" title="" /><img class="large" src="lbox/portrait7.jpg" alt="" title="" /></a></li>
<li><a href="#portrait8"><img src="lbox/portrait8a.jpg" alt="" title="" /><img class="large" src="lbox/portrait8.jpg" alt="" title="" /></a></li>
<li><a href="#portrait9"><img src="lbox/portrait9a.jpg" alt="" title="" /><img class="large" src="lbox/portrait9.jpg" alt="" title="" /></a></li>
<li><a href="#portrait10"><img src="lbox/portrait10a.jpg" alt="" title="" /><img class="large" src="lbox/portrait10.jpg" alt="" title="" /></a></li>
<li><a href="#portrait11"><img src="lbox/portrait11a.jpg" alt="" title="" /><img class="large" src="lbox/portrait11.jpg" alt="" title="" /></a></li>
<li><a href="#portrait12"><img src="lbox/portrait12a.jpg" alt="" title="" /><img class="large" src="lbox/portrait12.jpg" alt="" title="" /></a></li>
<li><a href="#portrait13"><img src="lbox/portrait13a.jpg" alt="" title="" /><img class="large" src="lbox/portrait13.jpg" alt="" title="" /></a></li>
<li><a href="#portrait14"><img src="lbox/portrait14a.jpg" alt="" title="" /><img class="large" src="lbox/portrait14.jpg" alt="" title="" /></a></li>
<li><a href="#portrait15"><img src="lbox/portrait15a.jpg" alt="" title="" /><img class="large" src="lbox/portrait15.jpg" alt="" title="" /></a></li>
<li><a href="#portrait16"><img src="lbox/portrait16a.jpg" alt="" title="" /><img class="large" src="lbox/portrait16.jpg" alt="" title="" /></a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="topic"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#landscape1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo005bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo006bis.jpg" alt="" title="" /></a></li>
<li><a href="#landscape4"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape4.jpg" alt=""
title="" /></a></li>
<li><a href="#landscape5"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo007bis.jpg" alt="" title="" /><img class="large" src="lbox/landscape5.jpg" alt=""
title="" /></a></li>
<li><a href="#landscape6"><img src="lbox/landscape6a.jpg" alt="" title="" /><img class="large" src="lbox/landscape6.jpg" alt="" title="" /></a></li>
<li><a href="#landscape7"><img src="lbox/landscape7a.jpg" alt="" title="" /><img class="large" src="lbox/landscape7.jpg" alt="" title="" /></a></li>
<li><a href="#landscape8"><img src="lbox/landscape8a.jpg" alt="" title="" /><img class="large" src="lbox/landscape8.jpg" alt="" title="" /></a></li>
<li><a href="#landscape9"><img src="lbox/landscape9a.jpg" alt="" title="" /><img class="large" src="lbox/landscape9.jpg" alt="" title="" /></a></li>
<li><a href="#landscape10"><img src="lbox/landscape10a.jpg" alt="" title="" /><img class="large" src="lbox/landscape10.jpg" alt="" title="" /></a></li>
<li><a href="#landscape11"><img src="lbox/landscape11a.jpg" alt="" title="" /><img class="large" src="lbox/landscape11.jpg" alt="" title="" /></a></li>
<li><a href="#landscape12"><img src="lbox/landscape12a.jpg" alt="" title="" /><img class="large" src="lbox/landscape12.jpg" alt="" title="" /></a></li>
<li><a href="#landscape13"><img src="lbox/landscape13a.jpg" alt="" title="" /><img class="large" src="lbox/landscape13.jpg" alt="" title="" /></a></li>
<li><a href="#landscape14"><img src="lbox/landscape14a.jpg" alt="" title="" /><img class="large" src="lbox/landscape14.jpg" alt="" title="" /></a></li>
<li><a href="#landscape15"><img src="lbox/landscape15a.jpg" alt="" title="" /><img class="large" src="lbox/landscape15.jpg" alt="" title="" /></a></li>
<li><a href="#landscape16"><img src="lbox/landscape16a.jpg" alt="" title="" /><img class="large" src="lbox/landscape16.jpg" alt="" title="" /></a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="topic"><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
<li><a href="#bird1"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo008bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo009bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /><img class="large"
src="http://idata.over-blog.com/0/37/17/67/photos/photo001bis.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /><img class="large" src="lbox/bird4a.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /><img class="large" src="lbox/bird5a.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /><img class="large" src="lbox/bird6a.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /><img class="large" src="lbox/bird7a.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /><img class="large" src="lbox/bird8a.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /><img class="large" src="lbox/bird9a.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /><img class="large" src="lbox/bird10a.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /><img class="large" src="lbox/bird11a.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /><img class="large" src="lbox/bird12a.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /><img class="large" src="lbox/bird13a.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /><img class="large" src="lbox/bird14a.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /><img class="large" src="lbox/bird15a.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /><img class="large" src="lbox/bird16a.jpg" alt="" title="" /></a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>
<br class="clear" />
</div></style>
Vous allez coller ce code en HTML.
  • en rajoutant ce qui est en rouge
  • en personnalisant avec votre propre adresse d'image (celle que vous avez sauvegardé dans votre administration à la 2ème étape) ce qui est en bleu
  • en vert, ce sont les images qui apparaîtront. Je ne les ai pas toutes mises en couleur. Vous les reconnaissez car devant chacune d'elle, il y a : src
  • il faudra peut-être revoir les dimensions (selon vos goûts):




    • dimension totale : .photo {width:720px; text-align:left; position:relative;}
    • .photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;}
    Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions...
Aucun commentaire:

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:

Créer un slideshow avec NoobSlide (Sample 5)

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 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
Aucun commentaire:

Créer un slideshow avec NoobSlide (Sample 4)

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

Créer un slideshow avec NoobSlide (Sample 2)

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

Créer un slideshow avec NoobSlide (Sample 1)

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

Créer un slideshow avec lytebox

Publié par Libellés : , , , , ,
Un exemple :

Cliquez sur une photo et regardez.

EXPLICATIONS SOMMAIRES

Si votre blog est sur Over-Blog, vous pouvez utiliser mes fichiers.
Vous collez en HTML
<script type="text/javascript" language="javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lytebox/lytebox.css" type="text/css" media="screen" />

Et maintenant, on met les photos
<a title="Man&#232;ge" rel="lyteshow[vacation]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" /></a>
<a title="My Sister" rel="lyteshow[vacation]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" /></a>
En rouge : les grandes photos
En bleu : les petites photos
En vert : le titre qui apparaîtra sous la grande

EXPLICATIONS DETAILLEES

Etape 1 :

Allez sur Lytebox
Cliquez sur Step 1: Download Lytebox v3.22
Vous venez de télécharger 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 - Mes fichiers :

  • vous créez un répertoire : lytebox
  • dans ce répertoire lytebox, vous créez un sous-répertoire : images dans lequel vous téléchargez les images
  • vous notez les adresses de ces images
Etape 3 :

Sur votre PC, vous ouvrez le bloc Notes et vous appelez lytebox.css.
Vous recherchez toutes les adresses d'images à modifier avec vos propres adresses (que vous avez noté à l'étape2).
Vous les reconnaissez car elles se présentent ainsi : images/loading.gif
Enregistrez le fichier sous le même nom

Etape 4 :

Dans votre administration - Documents - Mes fichiers  - répertoire lytebox :

  • vous enregistrez les fichiers :
    • lytebox.css
    • lytebox.js
  • vous notez les adresses
Etape 5 :

Vous collez en HTML
<script type="text/javascript" language="javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lytebox/lytebox.css" type="text/css" media="screen" />
Avec vos propres adresses (en rouge) : celles que vous avez noté à l'étape 4

Et maintenant, on met les photos
<a title="Man&#232;ge" rel="lyteshow[vacation]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="" /></a>
<a title="My Sister" rel="lyteshow[vacation]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="" /></a>
En rouge : les grandes photos
En bleu : les petites photos
En vert : le titre qui apparaîtra sous la grande
10 commentaires:

Agrandir une photo d'un clic de souris dans une PopBox

Publié par Libellés : , , , , , ,
La PopBox permet plusieurs effets sur image, dont celui-ci. Cliquez sur l'image




Ce n'est pas très difficile à réaliser.

Première étape :

Allez sur PopBox

Cliquez sur Click here to download it now
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers

Deuxième étape :

Dans l'administration de votre blog - Documents - Autres fichiers :
  1. créez un répertoire popbox
  2. enregistrez y les fichiers
    1. magplus.cur
    2. magminus.cur
    3. spiner40.gif
    4. magminus.gif
    5. magplus.gif
  3. notez leur adresse
Troisième étape :

Sur votre PC :
  1. ouvrez le bloc-note
  2. appelez le fichier style.css
  3. modifiez les adresses des images (celle de la deuxième étape)
    1. magplus.cur
    2. magminus.cur
  4. enregistrez sous le même nom
Quatrième étape :

Dans votre administration - Documents - Autres fichiers - popbox :
  1. enregistrez le fichier style.css (que vous venez de modifier à la troisième étape)
  2. notez son adresse
Cinquième étape :

Sur votre PC :
  1. ouvrez le bloc-note
  2. appelez le fichier popbox.js
  3. modifiez les adresses des images (celles de la deuxième étape)
    1. spiner40.gif
    2. magminus.gif
    3. magplus.gif
  4. enregistrez sous le même nom
Sixième étape :

Dans votre administration - Documents - Autres fichiers - popbox :
  1. enregistrez le fichier popbox.js (que vous venez de modifier à la cinquième étape)
  2. notez son adresse
Septième étape :

Lors de la création de votre article, dans la fenêtre de saisie en mode HTML, collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/popbox/PopBox.js" type="text/javascript"></script>
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/popbox/Styles.css" rel="stylesheet" type="text/css" />
<img id="château" src="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" pbshowcaption="true"
pbcaption="Le château de la Belle au Bous dormant." style="width: 150px; height: 100px;" class="PopBoxImageSmall" title="Cliquez pour agrandir l'image"
onclick="Pop(this,50,'PopBoxImageLarge');" name="Château" />
En personnalisant ce qui est en rouge
Aucun commentaire:
Inscription à : Articles (Atom)