Agrandir d'un clic une image quand il y a plusieurs images dans l'article - Lightbox - Privilège

Publié dans : Effets d'Images et diaporamas - Tous blogs

Agrandir d'un clic une image quand il y a plusieurs images dans l'article - Lightbox - Privilège

On reprend le principe de cet article.

Voici une Lightbox :

Cliquez sur chacune des images (après chargement total de la page). Sympa, non ?

VERSION SIMPLIFIEE :

Cette version est à destination des blogs Over-blog. J'ai modifié et hébergé tous les fichiers.

Il vous suffit de copier ce code et de le coller en mode source/HTLM de votre article :

La seule chose que vous avez ensuite à faire est de modifier ce qui est en couleur :

En rouge : l'adresse de vos images en grande taille
En bleu : l'adresse de ces mêmes images en taille réduite (celles qui apparaîtront directement dans l'article).
En vert: le nom de ces images, il apparaîtra sous la grande image
En rose : le nom du groupe d'image, le même pour chacune des photos d'un groupe

Pour que ce soit encore plus beau, je vous conseille de mettre chaque photo dans une cellule de tableau afin de bien les répartir dans l'article

VERSION DETAILLEE :

Ces fichiers sont hébergés dans mon administration et ne sont pas utilisables par les Blogs hors Over-Blog.

Voici donc l'explication détaillée :

Première étape : allez sur HUDDLETOGETHER

Cliquez sur

Vous enregistrez ainsi un fichier .zip : c'est-à-dire un ensemble de fichiers compressés dans un seul.

Avec un logiciel de décompression, j'utilise WinRAR, j'ouvre ce fichier Zip : Lightbox 2.03.3.zip

Je copie tous les fichiers qui y sont contenus dans un nouveau dossier que je nomme LIGHTBOX

Deuxième étape : dans votre administration, là où vous stockez vos photos, documents (Documents - Autres Fichiers pour OverBlog),

vous créez un répertoire que vous nommez LIGHTBOX

dans lequel, vous enregistrez les fichiers suivants en prenant soin de bien garder les mêmes nom et extension aux fichiers:

Vous remarquez que vous n'enregistrez pas les fichiers lightbox.CSS et lightbox.js

Les fichiers image-1.jpg et thumb-1.jpg sont ceux qui servent à cet exemple : ils ne sont donc pas indispensables.

Troisième étape :

Vous ouvrez votre Bloc-Note sur votre PC et appelez le fichier lightbox.CSS.

Vous allez trouver au milieu des autres lignes, celles-ci

#prevLink, #nextLink{    width: 49%;    height: 100%;
    background: transparent url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/blank.gif)
no-repeat; /* Trick IE into showing hover */    display: block;    }
#prevLink:hover, #prevLink:visited:hover { background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/nextlabel.gif) right 15% no-repeat; }

Vous allez modifier ce qui est en rouge avec vos propres adresses d'images : vous venez de les sauvegarder dans votre administration.

Vous sauvegardez ce fichier toujours sous le même nom : lightbox.CSS

Vous pouvez maintenant le sauvegarder avec les autres dans le répertoire LIGHTBOX

Quatrième étape :

Toujours dans le Bloc-Note, vous ouvrez le fichier lightbox.js

Vous recherchez les lignes

var fileLoadingImage = "http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/loading.gif";
var fileBottomNavCloseImage = "http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/closelabel.gif";

Vous les modifiez avec vos propres adresses d'images.

Vous sauvegardez ce fichier toujours sous le même nom : lightbox.js

Vous pouvez maintenant le sauvegarder avec les autres dans le répertoire LIGHTBOX

Cinquième étape :

En mode source/HTML de votre article, vous collez ce code :

La seule chose que vous avez ensuite à faire est de modifier ce qui est en couleur : les adresses des fichiers et des images

http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/effects.js
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prototype.js
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/scriptaculous.js?load=effects : attention à ne pas oublier ?load=effects
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.js

Pour les images

En rouge : l'adresse de vos images en grande taille
En bleu : l'adresse de ces mêmes images en taille réduite (celles qui apparaîtront directement dans l'article).
En vert: le nom de ces images, il apparaîtra sous la grande image
En rose : le nom du groupe d'image, le même pour chacune des photos d'un groupe
J'espère avoir été claire : les seules explications que j'ai trouvé étaient en anglais ou trop compliquées.

MàJ:Janvier 2009

Voir les 11 commentaires - Ecrire un commentaire
Recommander

Précédent : Ouvrir un texte au clic de la souris Retour à l'accueil

Commentaires

Bonjour annak, je passe voir ton blog,as-tu passé de bonnes vacances!!comme on m'a mis un com que mon blog était un musée de laideur lol !! je vais pas trop mettre de gadjet etc et bien sur cette personne ne met pas son blog et laisse un émail non valide bien entendu .La lune noire lors de son passage les premiers jours perturbe certaine personne et fait ressortir tout ce qui est négatif bref.De ce fait je fais un peu le vide sur les modules . mais trés intérressant ton article toujours de bonne idée annak. Bon dimanche et à bientôt amitié Guilaine

Commentaire n° 1 posté par GUILAINE le 31/08/2008 à 09h24

Bonjour Guilaine :)
Tu vas en voir d'autres des mauvais esprits (toujours anonymes) qui laissent des messages déplaisants. N'hésite pas à les supprimer. Ils se lassent rapidement. C'est de la pure méchanceté. je ne vois pas bien l'intérêt pour eux.
Bonne journée :)

Réponse de Anna K le 03/09/2008 à 19h11

Hello Annak, bonne reprise à toi. Merci pour cette "nouvelle ficelle" :)

Commentaire n° 2 posté par insolite85 le 31/08/2008 à 11h19

Mille merci ô Déesse du Css... J'ai tout arrangé sur tes divins conseils... Tu dois avoir des yeux des lynx...j'aurais du m'en apercevoir mais même avec mes lunettes... C'est super! Pour ce qui est de ton article il l'est aussi mais cela me semble trop difficile. Peux-tu me dire comment faire le background blanc à mes commentaires de réponse? J'ai ajouté ma sirène en coin et si je change elle part. Pas douée hein? Je te souhaite un bon dimanche et en attedant ta rponse je vais tenter d'arranger Moyra que j'ai bien "destroyé" Bisou

Commentaire n° 3 posté par La Môme PERLE le 31/08/2008 à 11h51

Bonjour Perle :) pour la couleur de fond des réponses aux commentaires, tu complètes avec ce qui est en rouge
.responseMessage {color: none;background-image:url(http://idata.over-blog.com/1/00/98/08/DESIGN/Perle-65x30.gif); background-repeat:no-repeat; padding-top:10px; text-align: right;background-color:white;}

Réponse de Anna K le 03/09/2008 à 19h17

Bonne reprise, Bon week end et bisous de la terre des pharaons ! ! @nne marie

Commentaire n° 4 posté par @nne marie

le 31/08/2008 à 14h29

C'est une bonne technique pour un peu plus de diversité sur son blog. Je suis sur le point de sortir un article sur mon voyage, je vais tenter d'utiliser ton astuce en ce qui concerne mes photos. J'ai découvert les light box sur Digg, je me souviens les avoir trouvé agressantes.

Commentaire n° 5 posté par Pablo le 31/08/2008 à 16h13

Bonjour Pablo :)
Joli effet, oui, mais avec modération

Réponse de Anna K le 03/09/2008 à 19h25

Bonjour, il y a un mois environ je recherchais un code ou un kit pour faire exactement ça. J'ai fouillé partout sans résultat pendant plusieurs. Puis je suis tombé sur un site très qui propose pratiquement la même chose: http://highslide.com/ Je le met dans cet article, car ça peut aider les internautes d'avoir le choix entre les deux. Bonne continuation.

Commentaire n° 6 posté par Funnycat le 31/08/2008 à 23h39

Bonjour FunnyCat :) je connais highslide, j'ai un article par là, l'effet est à peu près pareil ; c'est vrai que ça se ressemble bcp :)

Réponse de Anna K le 03/09/2008 à 19h31

bonsoir Annak :-) ouiiiii sympa. mais pour l'instant je ne vais plus rien toucher. car je suis ravie de mon blog et les autres aussi. et je viens de faire un article sur le CSS et ton lien. merci pour les codes de l'autre jours.

IMPECCABLE. mais je veux faire la même chose sur le blog de l'autre personne et ça ne marche pas. aaaaahhh snifff. son design et Ice cream (vert menthe.. Gros gros becsssss

Commentaire n° 7 posté par yana_5 le 01/09/2008 à 20h30

Coucou Annak ... journée de reprise boulot pour moi pas évident (: ce soir j'ai commencer à reformater mon XP (pas cool) j'ai pu récupérer mes documents avec un branchement de mon disque dur sur un autre PC. pour windows et son fichier manquant bin il faut le réinstaller tout simplement tu voit je m'occupe !! passe une bonne soirée gros bisous :)

Commentaire n° 8 posté par Jean Michel le 01/09/2008 à 23h19

sympa ce truc mais je ne suis pas encore en privilège, bientôt j'espère, mon br augmente petit à petit

Commentaire n° 9 posté par houba le 07/09/2008 à 22h27

Dommage que ce soit réservé aux "privilèges" . Bonne journée Anna :)

Commentaire n° 10 posté par clo le 30/09/2008 à 12h02

Bonjour. J'ai essayé d'installer la lightbox pour mon blog professionnel. Je l'ai testé sur cette page : http://www.robinbruyat.com/pages/GALERIE_2D-1077271.html Ca fonctionne très bien sur internet explorer, mais quand j'essaye la même page sur firefox, l'image apparait tout en bas à gauche de la page, extrèmement loin du contenu principal. J'ai remarqué que ca me faisait le même problème avec vos exemples. Ils fonctionnent sous explorer, mais bugent sous firefox. Alors que les exemples du site original (http://www.huddletogether.com/projects/lightbox2/#how) fonctionnent parfaitement sous les deux logiciels. J'ai l'impression que c'est lié avec la manière d'hébergé les fichiers sur oberblog, mais je n'y connais vraiment rien... Vous auriez une solution à me proposer ? :'(

Commentaire n° 11 posté par Dark Tagnan le 08/02/2009 à 19h05