Problèmes avec lightbox

Bonjour, je ne sais pas si vous connaissez cette fonction, mais j'ai quelques problèmes que j'aimerais corriger

petit explication de cette fonction: sur la page nous avons une miniature, nous cliquons dessus et la grande taille apparait par dessus le corps avec un fond gris...


Source de cette fonction

voila ce que ça donne:

Exemple sur mon site

Cependant le fond gris avec firefox marche correctement sur toute la page, alors qu'avec IE7 quand on descend pour regarder le bas de la photo on voit que le fond gris s'arrette...

comment corriger ce premier problème ?


mon deuxième problème, comment ça se fait que je n'ai pas l'apparition du gif "loading.gif" avertissant le chargement ?


il y a t-il une solution à ces ou à un de ces problèmes?

merci
Modifié par PJK (24 Mar 2007 - 00:05)

houla j'ai l'impression que tu parles en chinois lol

je me débrouille un peu en CSS, et autres, mais j'suis pas très callé

peux-tu m'aider un peu plus par rapport à ce problème de linkage

D'après ce qu'écrit le type sur le site, tu dois indiquer au script js où se trouvent les images que tu as au préalable uploader sur ton serveur (ou en local). Il indique, je cite :

a écrit :
1 - ouvrez le fichier lightbox.js avec un éditeur de texte, le bloc-notes par exemple,
2 - cherchez les lignes (vers le début):

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

Ces deux lignes sont les chemins d'accès aux images que le script utilise. Si ces chemins sont érronés, les images ne s'afficheront pas. Tu te dois de renseigner les chemins exactes, de la même manière que tu renseignes un href correcte à une balise link pour inclure du CSS à ta page :

var loadingImage = 'dossier/des/images/loading.gif';
var closeButton = 'dossier/des/images/close.gif';

Pour ce qui est des CSS, le type te propose d'inclure à ton document CSS une série de class que le script utilise :

/*--------- Lightbox -----------*/
#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
}

#lightboxDetails{
    font-size: 0.9em;
    color: #555;
    padding-top: 0.5em;
}

#closeButton{ top: 5px; right: 5px; }

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#lightbox img{ border: none; }

#overlay img{ border: none; }

#overlay{ background-image: url(XXX/overlay.png); }

* html #overlay{ /*Hack IE */
    background-color: #000;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XXX/overlay.png", sizingMethod="scale");
}
/*-------- fin lightbox -------*/

Ici tu n'as qu'à te préoccuper que d'une chose : toutes ces class CSS doivent être disponibles dans le document où agit le script.

PS : soit dit en passant, je trouve ce script plutot complèxe à mettre en place. Ce genre d'option est d'autant plus attrayante que sa capacité à être intégrée facilement est forte. Et là... bof

[EDIT] hack IE pour activer du png alors qu'un simple div avec background noir en filter:alpha pour IE, -moz-opacity / opacity suffit largement. C'est se prendre la tête quand même. D'autaut qu'un png 24, c'est pas ce qu'il y a de plus léger
Modifié par Ze Nenex (24 Mar 2007 - 14:51)

le problèmes c'est que mes link sont bons

j'ai un dossier images avec tout dedans

j'ai mis 'images/loading.gif' mais ça fonctionne toujours pas

et je te l'accorde aussi c'est assez complexe à mettre en place

Essai ça :

var loadingImage = 'kreations_galerie/images/loading.gif';
var closeButton = 'kreations_galerie/images/close.gif';

toujours pas...

Bon alors j'ai regardé d'un peu plus prêt.
Il a l'air d'utiliser la méthode onload sur ses objets Image, mouais.

Essai ceci :

var loadingImage = '../images/loading.gif';
var closeButton = '../images/close.gif';

[Edit] Si ça ne fonctionne toujours pas, un conseil : mets tous tes fichiers au même niveau que ta page html pour vérifier le fonctionnement puis déplace tes fichiers un par un tout en mettant à jour leur url.
Modifié par Ze Nenex (24 Mar 2007 - 15:55)

merci ça marche enfin

sinon pour le fait que ça coupe le fond gris j'ai pas compris ce que je devais faire ?

finalement j'ai décidé de garder cette fonction mais sans le fond gris

par contre j'ai encore un autre problème

si je veux centrer mon corps verticalement, l'affichage de la grande taille est completement décalé, regardez:

Page

voici le code utilisé pour centrer verticalement:

     position:absolute;
     left: 50%; 
     top: 50%;
     width: 840px;
     height: 590px;
     margin-top: -295px; /* moitié de la hauteur */
     margin-left: -420px; /* moitié de la largeur */

Y a t-il une solution, ou bien non, et si c'est le cas tant pis

Merci
Modifié par PJK (25 Mar 2007 - 13:25)

En fait je crois que ton probléme n'est pas lightbox, c'est que tes photos sont trop grandes pour casiment toutes les écrans, et c'est pour cela que tu as tous ces bug et ces problémes. Il faut que tu revois comment tu permets la visualisations de tes photos. Lightbox est un script sur-utilisé, et il est plutot fiable, au passage il vaut mieux travailler à partir des fichiers et des indications du site de l'auteur : http://www.huddletogether.com/projects/lightbox/

Si tu veux donner a visualiser des grands formats, le mieux c'est de mettre un lien tout simple vers ton grand format (voir en grand format 700X100 - 80k).

Parceque dans ce cas lightbox perd tout son intéret, ici par exemple avec firefox ecran 1024, j'ai une marge de 200px pour une image qui sort de la page!