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

25 juil. 2010

Créer un slideshow avec easyAlbum

Publié par Libellés : , , , ,
Cliquez sur le lien pour voir EasyAlbum : EasyAlbum

Première étape :

Allez sur EasyAlbum

Cliquez sur Download easyAlbum, puis sur Download easyAlbum_v1.1.7.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

Deuxième étape :

Dans l'administration de votre blog, Documents, Autres Fichiers :
  • vous créez un répertoire easyAlbum :
    • dans lequel vous créez un sous-répertoire img
      • dans lequel vous enregistrez les images :
        • banner.jpg
        • h2.jpg
        • close.gif
        • next.gif
        • previous.gif   
      • vous notez leur adresse
Troisième étape :

Sur votre PC :
  • vous ouvrez votre Bloc-notes
  • vous appelez le fichier easyAlbum.css
  • vous modifiez les adresses des images (vous les avez noté lors de la deuxième étape)
    • banner.jpg
    • h2.jpg
  • vous enregistrez sous le même nom
  • vous appelez maintenant le fichier easyAlbum.js
  • vous modifiez les adresses des images (vous les avez noté lors de la deuxième étape)
    • close.gif     
    • next.gif
    • previous.gif 
  • vous enregistrez sous le même nom
Quatrième étape :

Dans votre administration - Mes Documents - Autres fichiers - EasyAlbum :
  • vous créez un sous-répertoire nommé : css
    • dans lequel vous enregistrez /
      • easyAlbum.css
      • ie6win.css
      • ie5win.css
    • vous notez leur adresse
  • vous créez un autre sous-répertoire nommé : js
    • dans lequel vous enregistrez easyALbum.js
    • vous notez son adresse
Cinquième étape :

Lors de la conception de cet album, en HTML, vous collez

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/js/easyALBUM.js"></script>
<style type="text/css" media="screen">
@import "http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/css/easyALBUM.css";</style>
<!--[if IE 6]>
<style type="text/css" media="screen">
@import "http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/css/ie6win.css";
</style>
<![endif]-->
<!--[if IE 5]>
<style type="text/css" media="screen">
@import "http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/css/ie5win.css";
</style>
<![endif]-->
En personnalisant les adresses en rouge, par les vôtres : vous les avez noté à la quatrième étape.
Puis, toujours en HTML :
<body onload = "TJK_Gallery('gallery');">
<div id="wrapper">
    <ul id="gallery">
    <li><a name="zGallery" title="Woodrow Wilson with the American Peace Commissions in Paris to
negotiate the Versailles treaty." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/001.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/001T.jpg" alt="Wilson at Versailles" /></a></li>
    <li><a title="Suffragettes register to work as war volunteers during world war I." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/002.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/002T.jpg" alt="Suffragette war
volunteers." longdesc="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/002LD.htm" /></a></li>
    <li><a title="Suffragette banner carried in picket of the White House, 1918."
href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/003.jpg"><img
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/003T.jpg" alt="Suffragette banner."/></a></li>
    <li><a title="Soldiers and sailors from many countries are lined up in front of the Allies Headquarters Building. The United States is represented." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/004.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/004T.jpg" alt="Vladivostok, Russia"/></a></li>
    <li><a title="Shop No. 2 annex. 6'' guns with their mounts in foreground; immediately in the rear, slides or cradles for 10'', 12'', and 14'' guns." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/005.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/005T.jpg" alt="Munitions Factory"/></a></li>
    <li><a title="Men looking in the window of the National Anti-Suffrage Association headquarters."
href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/006.jpg"><img
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/006T.jpg" alt="Anti-Suffrage
Association" /></a></li>
    <li><a title="Florence F. Noyes as ''Liberty'' in suffrage pageant."
href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/007.jpg"><img
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/007T.jpg" alt="Florence F. Noyes"
/></a></li>
    <li><a title="Warren G. Harding (right of center) dines with Thomas Edison (left of Harding) and Henry Ford (right of Harding)." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/008.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/008T.jpg" alt="Harding, Edison, and Ford." /></a></li>
    <li><a title="Calvin Coolidge arrive to dedicate a park in Hammond, Indiana, June 14, 1927."
href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/009.jpg"><img
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/009T.jpg" alt="Coolidge motorcade."/></a></li>
    <li><a title="President Herbert Hoover, Henry Ford, Thomas Edison, and Harvey Firestone at Edison's 82nd birthday. Ft. Myers, Florida, February 11, 1929." href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/010.jpg"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/img/010T.jpg" longdesc="http://ddata.over-blog.com/xxxyyy/0/37/17/67/easyAlbum/010LD.htm" alt="Hoover, Ford,Edison, and Firestone." /></a></li>
  </ul>
En vert, les images de grande taille
En bleu, les mêmes images en miniature
En orange, une page HTML qui apparaît lorsqu'on clique sur les liens des photos 2 et 10 (pas indispensable)
En violet, le texte qui apparaît sous la photo
1 commentaire:

Créer un slideshow avec Galleria

Publié par Libellés : , , , ,
Très jolie galerie réalisée à l'aide de Galleria : des miniatures sur lesquelles on clique pour voir l'image en grande taille

Voir Galleria

Première étape :

A - Allez sur Galleria

Cliquez sur Download - Galleria 1.0 / 16kb

Une page de votre navigateur s'ouvre avec ce fichier

Sur votre navigateur, vous faîtes :
  1. Edition - Tout sélectionner
  2. Edition - Copier
Sur votre PC :
  • vous ouvrez votre bloc-notes
  • vous faîtes
    • Edition - Coller
  • vous enregistrez sous jquery.galleria.js
B - Toujours sur Galleria

Cliquez sur Galleria 1.0 CSS

Une page de votre navigateur s'ouvre avec ce fichier

Sur votre navigateur, vous faîtes :
  1. Edition - Tout sélectionner
  2. Edition - Copier
Sur votre PC :
  • vous ouvrez votre bloc-notes
  • vous faîtes :
    • Edition - Coller
  • vous enregistrez sous galleria.css
C - Toujours sur Galleria

Cliquez sur 1. Download the latest jQuery release

Vous arrivez sur le site JQuery

Vous cliquez sur 1.2.6 (Release Notes) Minified

Vous venez d'enregistrer le fichier jquery-1.2.6.min.js

Deuxième étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :
  • vous créez un répertoire nommé : Galleria
  • vous y sauvegardez les fichiers :
    • galleria.css
    • jquery-1.2.6.min.js
    • jquery.galleria.js
  • vous notez leur adresse
Troisième étape :

Lors de la conception de votre galerie, vous collez en HTML
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/galleria/jquery.galleria.js"></script>
<script type="text/javascript"> jQuery(function($) { $('ul.gallery').galleria(); }); </script>
<script type="text/javascript">
    jQuery(function($) {      
        $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability      
        $('ul.gallery_demo').galleria({
            history   : true, // activates the history object for bookmarking, back-button etc.
            clickNext : true, // helper for making the image clickable
            insert    : '#main_image', // the containing selector for our main image
            onImage   : function(image,caption,thumb) { // let's add some image effects
for demonstration purposes      
                // fade in the image & caption
                if(! ($.browser.mozilla &&
navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
                    image.css('display','none').fadeIn(1000);         
     }
                caption.css('display','none').fadeIn(1000);
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // fade out inactive thumbnail
                _li.siblings().children('img.selected').fadeTo(500,0.3);
                // fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');
                // add a title for the clickable image
                image.attr('title','Next image >>');
            },
            onThumb : function(thumb) { // thumbnail effects goes here
                // fetch the thumbnail container
                var _li = thumb.parents('li');
                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.3';
                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() {
_li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
                )
            }
        });
    });
    </script>
Vous remplacez les adresses en rouge par vos propres adresses, notées à la 2ème étape.

Si vous êtes sur Over-Blog, vous pouvez utiliser mes adresses.

Ensuite, toujours en HTML, vous collez
<style media="screen,projection" type="text/css">
    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140%
georgia,serif;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:702px;margin:0 auto;}
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
    #main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
    #main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif; letter-spacing:3px;text-transform:uppercase;}
    .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
    .info p{margin-top:1.6em;}
    </style>
Il s'agit du CSS de votre galerie, vous pouvez le personnaliser : taille, marges, bordures...

Et enfin, la galerie en elle même, toujours en HTML
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/at_symbol.jpg"
alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/datenscheiben.jpg"
alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/farbraum.jpg" alt="Grass Blades"
title="Apple nature desktop images"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/fries.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/kunst.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/platsch.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_1.jpg"
alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus
pellentesque."></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_2.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/stimme_von_oben.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>
En bleu, les adresses des images
En vert, le texte qui apparaît dessous
Aucun commentaire:

Créer un slideshow avec prettyPhoto

Publié par Libellés : , , , ,
PrettyPhoto est une alternative à la lightbox et est assez facile à réaliser.

Cliquez sur les photos pour tester.




Image 1
Image 2
Image 2

Première étape :

Allez sur PrettyPhoto

Cliquez sur Compressed version (Script: 8kb / CSS: 3.6kb)

Allez sur Jquery

Cliquez sur 1.2.6 (Release Notes) - Minified

Vous venez d'enregistrer des fichiers .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 :
  • vous créez un répertoire nommé : prettyphoto

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

      • dans ce sous répertoire, vous uploadez les photos suivantes :

        • bl.gif
        • br.gif
        • btnClose.gif
        • btnNext.gif
        • btnPrevious.gif
        • loader.gif
        • tl.gif
        • tr.gif
      • Vous notez leur adresse

Troisième étape :

Sur votre PC :
  • vous ouvrez le bloc-Note
  • vous appelez le fichier prettyPhoto.css
  • vous modifiez le chemin des photos (vous avez noté leur adresse lors de la deuxième étape)
  • vous enregistrez sous le même nom

Quatrième étape :

Dans l'administration de votre blog - Documents - Autres fichiers - prettyphoto
  • vous créez un sous-répertoire nommé : css

    • dans lequel vous enregistrez le fichier prettyphoto.css (modifié lors de la troisième étape)
    • vous notez son adresse
  • vous créez un sous-répertoire nommé : js

    • dans lequel vous enregistrez les fichiers :

      •  prettyphoto.js
      • jquery-1.2.6.min.js
    • vous notez leur adresse

Cinquième étape :

Lors de la création de votre diaporama, vous collez en HTML
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/css/prettyPhoto.css" type="text/css" media="screen"
title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prettyphoto/js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

En rouge, vous remplacez avec vos propres adresses de fichiers.
Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses.

Vous placez maintenant vos images, en collant en HTML
<table border="0" align="center">
<tbody>
<tr>
<td><a href="adresse de l'image1 grande taille" rel="prettyOverlay[gallery]" title="Description de
l'image1"><img src="adresse de l'image1 miniature" width="60" height="60" alt="Image 1" /></a>
</td>
<td><a href="adresse de l'image2 grande taille" rel="prettyOverlay[gallery]" title="Description de
l'image2"><img src="adresse de l'image2 miniature" width="60" height="60" alt="Image 2" /></a>
</td>
<td><a href="adresse de l'image3 grande taille" rel="prettyOverlay[gallery]" title="Description de
l'image3"><img src="adresse de l'image3 miniature" width="60" height="60" alt="Image 3" /></a>
</td>
</tr>
</tbody>
</table>
En bleu, vous remplacez avec les adresses de vos photos
En vert, les descriptions des photos
2 commentaires:

Créer un slideshow avec clearbox

Publié par Libellés : , , , ,
Un slideshow pas très difficile à réaliser.

Testez en cliquant et survolant avec la souris.



Première étape :

Allez sur CLEARBOX, il s'agit d'un site hongrois (pour la traduction, c'est un véritable plaisir).

Cliquez sur ClearBox full (js, css, képek) : clearbox.zip

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

Deuxième étape :

Dans l'administration de votre blog - Mes documents - autres fichiers :
  • vous créez un répertoire clearbox



    • dans ce répertoire, vous créez un sous-répertoire : pic



      • dans ce sous-répertoire, vous uploadez les fichiers suivants :



        • Image blank.gif
        • Image close.png
        • Image loading.gif
        • Image max.gif
        • Image next.gif
        • Image noprv.gif
        • Image pause.png
        • Image prev.gif
        • Image s_btm.png
        • Image s_btmleft.png
        • Image s_btmright.png
        • Image s_left.png
        • Image s_right.png
        • Image s_top.png
        • Image s_topleft.png
        • Image s_topright.png
        • Image start.png
        • Image white.gif
      • Notez les adresses de ces images
Troisième étape :

Sur votre PC, ouvrez le bloc note :
  • appelez le fichier clearbox.css
  • modifiez les adresses des images



    • #CB_TopLeft {    background-image:url(../pic/s_topleft.png);   background-position:right bottom;}
      #CB_Top { background-image:url(../pic/s_top.png); background-position:left bottom;}
      #CB_TopRight {   background-image:url(../pic/s_topright.png);    background-position:left bottom;}
      #CB_Left {    background-image:url(../pic/s_left.png);    background-position:right top;}
      #CB_Right {    background-image:url(../pic/s_right.png);    background-position:left top;}
      #CB_BtmLeft {    background-image:url(../pic/s_btmleft.png);    background-position:right top;}
      #CB_Btm {    background-image:url(../pic/s_btm.png);    background-position:left top;}
      #CB_BtmRight {    background-image:url(../pic/s_btmright.png);    background-position:left top;}
      #CB_Prev, #CB_Next {    background: transparent url(../pic/blank.gif) no-repeat scroll 0%;  display: block;        width: 49%;    cursor: pointer;    outline-style:none;    z-index:
      1102;}
      #CB_Prev:hover {background:transparent url(../pic/prev.gif) no-repeat scroll left 50%;}
      #CB_Next:hover {background:transparent url(../pic/next.gif) no-repeat scroll right 50%;}
en remplaçant par celles de l'étape 2
  • enregistrez le fichier sous le même nom
Quatrième étape :

Dans votre administration - Mes Documents - Autres fichiers - dans le répertoire clearbox :
  • vous créez un sous-répertoire css



    • dans lequel, vous uploadez le fichier clearbox.css
  • vous créez un sous-répertoire js



    • dans lequel, vous uploadez le fichier clearbox.js
Cinquième étape :

Lors de la rédaction de votre article, dans votre éditeur, en mode source/HTML, vous collez
<link type="text/css" rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/clearbox/css/clearbox.css" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/clearbox/js/clearbox.js" type="text/javascript"></script>
avec vos propres adresses de fichiers (en rouge). Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses.

Placez maintenant vos photos
<a rel="clearbox[gal1]" 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 rel="clearbox[gal1]" 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>
<a rel="clearbox[gal1]" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO004.JPG"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="" />
En bleu, la photo en grande taille
En vert, la photo en miniature
Aucun commentaire:

Créer un slideshow avec thickbox

Publié par Libellés : , , , ,
Voici le slideshow proposé par Thickbox. Cliquez sur une photo et admirez :


Plant 1
Plant 2




VERSION SIMPLIFIEE

Pour les blogs sur OverBlog, vous pouvez utiliser mes fichiers. Vous ne devez donc modifier que les adresses des images

A coller en html en respectant l'ordre :
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/jquery.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.css" type="text/css" media="screen" />

puis les images. Je les ai mises dans un tableau, vous pouvez en rajouter autant que vous voulez.
<table cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Plant 1" /></a></td>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Plant 2" /></a></td>
</tr>
</tbody>
</table>
En bleu : les grandes images
En vert : les petites images
En rouge : le texte qui apparaîtra sous la grande photo

VERSION DETAILLEE

Première étape :

Allez sur Thickbox

Dans la catégorie Download, cliquez sur :
  • thickbox.js
  • thickbox.css
  • jQuery JavaScript library
A chaque fois, pour ces trois fichiers, vous ferez une copie de ce qui apparaît à l'écran. Vous collerez le contenu dans le bloc-notes et vous enregistrerez sous le même nom.

Puis :
  • loadingAnimation.gif

C'est une image, vous la sauvegardez en cliquant sur le bouton droit de la souris - sauvegardez sous...

Dans la catégorie How to Implement ThickBox, paragraphe 2, cliquez sur :
  • macFFBgHack.png
C'est une image, vous la sauvegardez en cliquant sur le bouton droit de la souris - sauvegardez sous...

Deuxième étape :

Dans l'administration de votre blog - Documents - autres fichiers :
  • vous créez un répertoire : thickbox
  • dans lequel vous enregistrez loadingAnimation.gif et macFFBgHack.png
vous notez les adresses de ces images

Troisième étape :

Sur votre PC, avec le bloc-notes :
  • vous ouvrez le fichier thickbox.js et cherchez la ligne var tb_pathToImage = "images/loadingAnimation.gif";

Elle est au début. Vous modifiez l'adresse de l'image par la vôtre. (voir la 2ème étape)

Vous enregistrez, toujours sous le même nom.
  • vous ouvrez le fichier thickbox.css et cherchez la ligne .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

Vous modifiez l'adresse de l'image par la vôtre. (voir la 2ème étape)

Vous enregistrez, toujours sous le même nom.

Quatrième étape :

Dans votre administration - Documents - autres fichiers - répertoire thickbox :
  • vous enregistrez les fichiers : thickbox.js, jquery-latest.js, thickbox.css
Vous notez les adresses de ces fichiers

Cinquième étape :

En html, vous collez en respectant l'ordre et en personnalisant les adresses
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/jquery.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/thickbox/thickbox.css" type="text/css" media="screen" />
puis les images. Je les ai mises dans un tableau, vous pouvez en rajouter autant que vous voulez.

<table cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO002.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Plant 1" /></a></td>
<td><a href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Plant 2" /></a></td>
</tr>
</tbody>
</table>

En bleu : les grandes images
En vert : les petites images
En rouge : le texte qui apparaîtra sous la grande photo
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:
Inscription à : Articles (Atom)