Bonsoir, Pendant ma quête de la lightbox idéale, je suis tombé sur shadowbox qui est une merveille dans le genre (multifonction et pas de problèmes liés au scroll par exemple). Mais je sollicite votre aide car je ne sait pas comment l'installer. Pourriez-vous m'aider ?
Merci à ceux qui voudront bien m'aider.

Tiobet.

Hello,

Je peux t'aider vu que je viens de galérer pour l'installer. La doc est compliquée pour un truc aussi simple

Tu cliques sur "Download full" en bas de cette page

Tu dézippes le fichier rar, et tu copies le dossier SRC qu'il contient à la racine de ton site (ou ailleurs mais là tu devras modifier e code que je vais te donner)

Tu insères dans tes pages html le code suivant, juste AVANT la balise </head> :

<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('fr', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player');

window.onload = function(){

    Shadowbox.init();

};

</script>

Si tu utilisais Lightbox 2 tu n'as rien à modifier au niveau de tes liens. Sinon tes liens (balise a) doivent comporter un attribut rel="shadowbox", et si c'est une galerie photo et que tu veux qu'on puisse passer d'une image à l'autre dans la box, tu ajoutes le nom de la série entre crochets comme ça rel="shadowbox[nom_de_la_serie] Un exemple à moi :

<a href="img/Dessin/angkor.jpg" rel="shadowbox[matte]" title="Matte painting sur le thème d'Angkor Vat"><img src="img/Dessin/vignettes/vignette-angkor.jpg" width="120" height="120" alt="Angkor Vat" /></a>
      <a href="img/Dessin/graveyard.jpg" rel="shadowbox[matte]" title="Graveyard - matte painting"><img src="img/Dessin/vignettes/vignette-graveyard.jpg" alt="graveyard" /></a>

L'attribut title indiquera le titre qui s'affichera au dessus de la box. N'oublie pas l'attribut alt pour l'accessibilité et la validation. Dans mon exemple c'est une miniature de l'image qui l'ouvre en grand.

Avec cette box tu as pas mal d'options. Tu peux par exemple choisir la taille de la box, mais sache qu'elle s'adapte à la résolution des visiteurs si l'image es trop grande (vraiment ultra pratique ça).

Pour changer la langue c'est dans le code javascript. Ici il est en français. Personnellement j'ai modifié "1 de 15" par "1 sur 15" dans le fichier langue fr, dans le dossier lang.

Pour les autres options je te renvoie au site de l'auteur

En tout cas merci car c'est grâce à toi que j'ai pu découvrir shadowbox et résoudre tout mes problèmes J'espère avoir pu t'aider.

ps: j'ai pu remarquer que d'autres scripts javascript entrainaient un dysfonctionnement de shadowbox mais je ne m'y connais pas.

Salut, merci tu m'as bien aidé, et je t'en dois une . Peux-tu encore m'expliquer comment ouvrir un site externe dans la box ? J'adore ce script mais je ne digère plus le fait de parcourir le site de l'auteur (le fait que j'y ai passé plusieurs heures ne dois pas y être pour rien ).

Je t'en prie

Pour les box qui ouvrent sur des sites web c'est la même chose :

<a href="http://www.terrehabitatsante.com/" rel="shadowbox[2008]" title="Conception-réalisation du site de Terre Habitat Santé, bureau d'étude en habitat sain"><img src="img/Web/vignettes/ths.jpg" alt="Site Terre Habitat Santé" /></a>

Le script s'occupe de tout! Sinon regarde le code de cette page de mon site

Profite bien du script, c'est vrai que c'est très mal expliqué et qu'on ne trouve quasiment rien sur d'autres sites !

Ce script est vraiment fabuleux, faut être franc, et je ne vois pas pourquoi ils ont fait une documentation aussi compliquée, surtout que cette box ne souffre pas des problèmes de scroll comme bon nombre .
En tout cas, encore merci, tu m'auras bien aidé .

Bonsoir,

Jeune webmaster, je développe actuellement un site d'histoire où je souhaite présenter des galeries de trois portraits sur chaque page correspondant à un souverain. Pour cela, j'utilise des images réduites, qui sont souvent des détails d'images bien plus grandes (tableaux ou fresques). J'ai donc appliqué pour commencer le système des poppups pour voir l'image aggrandie ou complète en cliquant sur la miniature(comme ici http://www.souverains.com/souverains/e [...] 605-1665).htm). J'ai récemment découvert le génial concept des shadowbox et je souhaiterais les installer sur mon site. J'ai donc suivi les instructions que j'ai trouvées ici : le dossier src se trouve bien dans la racine du site, j'ai collé le code source à rajouter juste avant le /head de ma page test et j'ai rajouté dans le lien l'attribut rel="shadowbox". Seul problème, çà ne marche pas : l'image s'affiche comme si on cliquait sur un lien normal. J'ai relu à plusieurs reprises ce qu'il fallait faire, j'ai cherché ailleurs sur le net, mais rien n'y fait... J'espère que vous pourrez m'aider et me dire où se trouve l'erreur.
Voici ma page test : http://www.souverains.com/souverains/papaute/test.htm

PS : je n'ai jusqu'à présent fait que du htm et je ne connais pas grand chose en php ou en javascript, excepté le code utilisé jusqu'à maintenant pour les poppups. Les images aggrandies des poppups sont pour l'instant issues d'autres sites mais j'ai prévu de les héberger sur mon site une fois les shadowbox installées (si j'y parvient).

Merci d'avance pour votre aide,

Edit : J'ai finalement réussi à obtenir ce que je voulais. C'est tout simplement un chemin d'accès qu'il fallait changer et que Dreamweawer n'a pas daigné modifier lorsque j'ai déplacé le fichier dans un sous-dossier...

Bonjour à tous !

Superbe cette explication !

je voudrais juste pouvoir afficher une image avec des dimensions fixe...
la shadowbox (enfin ce script) permet d'adapter ma taille de l'image à celle de la fenêtre du navigateur !

Quelqu'un saurait-il me renseigner ?

J'ai ajouter une feuille de style "style=height:800px; etc.." il ne se produit rien même en utilisant 'max-eight'

Alors, à quel niveau intevenir et comment faire ???

Merci par avance !

Je m'apprête à installer la shadowbox pour ouvrir des images et quelques liens, mais avant j'ai une question :

Est ce que le script shadowbox avec les attributs inséré dans les balises altère t'il le référencement sur google ? ou pas ?

Je me pose cette question car j'ai entendu dire que les balises avec du javascript et ignoré par les robot des moteur de recherche.

Merci de vos réponses.

Bien le bonjour à tous.. je me permet de upper ce message, puisque là... je me sens Zero... je suis en train de faire un test pour vouloir installer une shadowbox.. mais j'avoue que je comprend pas...

j'ai ce resultat là :

http://2mprod.free.fr/test/

et je rencontre donc, le même souci que Trajan...

je passe pas par Dreamweaver mais Kompozer... et je ne vois pas ou je merde...


bien entendu, ce n'est qu'une page de test, c'est normal que la photo ne soit pas aux bonnes proportions...

si une ame charitable souhaite bien me venir en aide...

Yeah j'assure !

En faite, le code donné ci-dessous n'est plus valide, suite à plusieurs évolutions du script.

Il faut donc que tu remplaces :

<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('fr', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player');
window.onload = function(){
Shadowbox.init();
};
</script>

Par :

<link rel="stylesheet" type="text/css" href="src/shadowbox.css">
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Et c'est tout, le playeur se charge du reste. Et si tu veux du texte en français quand du survoles les icônes du player (par exemple "Fermer" sur la croix), tu le précises dans Shadowbox.init(); ainsi :

<link rel="stylesheet" type="text/css" href="src/shadowbox.css">
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "fr",
};
</script>

je teste ça, et reviens vers toi !!! mais en tout cas :

1000000000000 mercis !!!!

EDIT : bon... je viens de tester... et ça marche pas....

quesque je foire en fait ????

Edit 2 : bon, j'ai bidouillé 2-3 choses, ça a l'air de bien vouloir fonctionner là...
je suppose que les menus genre, suivants etc... s'affiche des qu'il y a plusieurs images ??? et est il possible via la shadowbox de pas rendre possible l'enregistrement des images ???

Dans le code que je t'ai donné, je suis parti du principe qu'un dossier nommé 'src' se trouvait au même endroit que ta page 'index' (donc /test/index.html et /test/src/).

Dans ce dossier 'src', tu dois avoir les sous-dossiers et fichiers présents dans l'archive téléchargée sur le site de shadowbox, c'est à dire :

• adapters/
• languages/
• libraries/
• players/
• resources/
• shadowbox.css
• prototype.js
• shadowbox.js

Les fichiers 'CHANGE', 'LICENCE' et 'README' ne servent à rien, ce n'est que de la lecture.

yep, ça j'ai fait

j'avais oublié d'enlever un caractere.. là, ça l'air de fonctionner, je refais des tests en local qui fonctionnent....pas !!! arf arf

Voici le lien de mon archive. Il contient une copie de l'image ainsi que les fichiers que je t'ai dit. La page 'index.html' contient le même code que ta page.

http://www.cijoint.fr/cjlink.php?file= [...] ijzSmiKdq.zip

merci

je reussi effectivement a bidouiller, ça a l'air de bien fonctionner...


autre question...

Est il possible de faire juste un lien qui mene a la galerie sans avoir de thumbnail ?

cad, une phrase du genre...

asseder au diaporama, et lorsque l'on clique sur le diaporama, que ça montre les photos via shadowbox, mais d'un repertoire specifique ???

par exemple...

Galerie CHAT... que le dossier des chats,
Galerie CHIEN... que le dossier des chiens ???

en tout cas, Alysto... 10000 mercis ! t'es un as !!!!

Bonsoir, je me permet de relancer le sujet car j'ai le même prbolème que "the trooper" : j'ai à priori tout installer comme il faut mais lorsque je clique sur le lien qui devrait s'ouvrir dans une box, il s'ouvre dans une nouvelle page. ...
Quelqu'un pourrait-il m'aider à changer ça ?
Merci d'avance !

Salut, ce que je peux te conseiller, c'est de télécharger l'archive que j'ai posté dans mon dernier message.

Il te suffira de modifier la page index.

Ca ne fonctionne pas :S

http://oh.my.tshirt.free.fr/videos.php
J'ai pas mis d'images pc j'ai fait ça à la va vite;
ps: je souhaiterai que la page video1.php s'ouvre dans la box lorsque l'on clique dessus

Chez moi, la vidéo s'ouvre bien dans shadowbox.

Oui en fait c'était juste sur un certain ordi que ça ne fonctionnait pas ;
seulement maintenant même sur celui sur lequel ça marchait avant, ça ne va s'ouvre plus dans une box : http://oh.my.tshirt.free.fr/videos.php

Merci pour l'aide

salut moi j'ai un autre souci avec le code mis cela m'ouvre d'office une autre page et je veux y mettre un swf qui malheureusement s'affiche en pleine page et non en shadow....

Bonjour,

Citation : Pyrrouh

Dans le code que je t'ai donné, je suis parti du principe qu'un dossier nommé 'src' se trouvait au même endroit que ta page 'index' (donc /test/index.html et /test/src/).

Dans ce dossier 'src', tu dois avoir les sous-dossiers et fichiers présents dans l'archive téléchargée sur le site de shadowbox, c'est à dire :

• adapters/
• languages/
• libraries/
• players/
• resources/
• shadowbox.css
• prototype.js
• shadowbox.js

Les fichiers 'CHANGE', 'LICENCE' et 'README' ne servent à rien, ce n'est que de la lecture.

Bonjour,
la dernière version du site (3.03) ne fait pas apparaître de sous dossiers et encore moins de dossier SRC!IL n'existe plus semble-t-il de fichier zip ou Full.
J'ai mis tout le dossier Shadowbox dans mon fichier de construction du site web plus le script que tu donnes et rien ne se passe!

Que faire?
Merci d'avance

Claude

Bonjour!

Je vous explique mon problème. J'aimerai que le contenu de mon site s'ouvre dans une shadowbox lorsque l'on clique sur le menu. J'ai installé le script mais je ne sais pas le faire fonctionner...

Voici mon "site" en fichier ZIP.

Ici

Merci à ceux qui m'aideront.

Bonjour,

Je cherche à installer shadowbox sur un site wordpress, mais tous les tutoriels que je croise disent d'appeler le fichier shadowbox.js ou encore shadowbox-base.js dans le code source, hors dans la dernière version de shadowbox il semble qu'aucun fichier ne se nomme ainsi. J'ai bien un fichier shadowbox.css, mais les fichiers javascripts ont tous d'autres noms. Si quelqu'un sait comment installer la dernière version de shadowbox je suis preneur!

Par avance merci!

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.