24 juil. 2010

Créer un slideshow avec lytebox

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:

  1. Création d'un slideshow avec lytebox.

    Où trouve t'on "Mes fichiers" ? faut-il avoir le pack prémium ?

    Merci pour votre réponse.

    Cordialement

    RépondreSupprimer
  2. Bonjour Anonyme :) je suppose que tu es sur OverBlog puisque tu parles de Premium ?
    La partie Mes Fichiers se situe dans Mes documents et est disponible
    - gratuitement en Privilège (BR de 75 pendant 7 jours)
    - en payant en Premium.
    Si tu ne l'as pas, tu dois être en Confiance, et de toutes façons, tu ne pouvais pas mettre de javascript, donc ce programme
    Bonne soirée :)

    RépondreSupprimer
  3. Merci beaucoup pour ces renseignements.

    RépondreSupprimer
  4. Bonsoir Anna K, je viens d'installer ce slideshow, j'ai suivi toutes les étapes mais malheureusement les petites image (next, prev, close, ..) n'apparaissent pas dans le slide. je cherche en vain. Si tu pouvais m'éclairer sur cette affaire.
    Amicalement. un fan depuis 3 ans

    RépondreSupprimer
  5. Cédric, s'il s'agit de l'article http://www.vianel-photos.com/pages/galerie_photos_1-3740054.html, les petites images apparaissent maintenant. Depuis quelques jours, OverBlog a des problèmes avec les images, ce qui peut expliquer leur disparition.

    RépondreSupprimer
  6. Merci pour votre réponse. Je parlais des images propre au slideshow(le nom de la photo, prev, close, play, next) celles ci n'apparaissent pas quand on lance le slideshow tout ceci avec internet explorer( car avec safari et firefox ça fonctionne) le plus étrange c'est quand testant sur votre site et internet explorer ça fonctionne, j'ai donc essayer avec votre javascript et votre css (pensant avoir mal remplis les adresses des petites images)mais rien n'y fait.

    RépondreSupprimer
  7. Bonjour Cédric :) Je parle des mêmes images. J'avais regardé ton slideshow avec FF, je viens de le faire avec IE8 et je les vois toujours. Le problème doit venir du réglage de ton navigateur. Vérifie tes options dans Outils. Rien d'interdit ?

    RépondreSupprimer
  8. Bonjour,
    J'aimerai faire "tout pareil" sur blogger, mais je suis bloquée... je ne vois pas où est-ce que je poeux stocker les fihciers images de Lytebox et les fichiers js et css sur blogger, afin de suivre votre mode d'emploi de Lytebox...
    Une idée?

    Merci d'avance !

    RépondreSupprimer
  9. Bonjour Amy :) Tu peux stocker tes fichiers css et js sur http://www.archive-host.com/. Ils acceptent à peu près tous les formats et c'est gratuit.
    Tu peux déjà testé en utilisant mes fichiers. Ils sont hébergés sur OverBlog, mais fonctionnent actuellement sur Blogger.
    Tu copies donc le 1er pavé tel quel en HTML et tu personnalises le 2nd pavé avec tes propres photos avant de lui aussi le coller en HTML

    RépondreSupprimer
  10. Bonjour,
    j’ai également essayé de mettre ce slideshow sur mon blog (loeilsurlobjectif.over-blog.com)cela semble fonctionné en aperçu, mais dès que je publie l'article, la fenêtre pop up se transforme en simple fenetre ...

    Aurais je oublié quelque chose?

    Cordialement

    RépondreSupprimer

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