Pb galerie photos

Résolu/Fermé
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008 - 10 avril 2007 à 10:06
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008 - 13 avril 2007 à 11:02
Bonjour,

Ce message s'adresse surtout à Txiki qui m'a aidé pour ce script, mais les autres commentaires seront les bienvenus.
Je viens de m'apercevoir que les photos s'ouvrent en grand et dans une nouvelle page, ce qui oblige à fermer la page pour revenir au site.
Tu avais parlé des titres trop longs pouvant gêner, est-ce cela ?
Je te joins le code pour t'aider.
Merci.
CN

http://legarrit.free.fr/gallery.php



// Création de la pseudo-popup : (le z-index est important pour etre sur qu'il soit au premier plan)
fe='<div id="pop" style="position:absolute;left:180px;top:300px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;'
//ajoute une ombre pour IE seulement

// (entête c'est là ou tu met le bouton avec la croix pour fermer le pseudo pop up (vire ces commentaires))
fe+='entête<img title="Fermer" src="http://chrisneau.free.fr/images/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"'
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>'

function initLienImg(){
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
gdim=D.getElementById('pop'); lx=D.getElementById('tet')
addEvent(D,"mousemove",controle_position)
elem=document.getElementsByTagName('select');

//création de l'image
im1=D.createElement("img");gdim.appendChild(im1);
with(im1.style){border=0;margin="1px";}
//écriture des évènements
l=D.getElementsByTagName('a');
for(var i=0;i<l.length;++i){
//ajoute onclick=grdimg dans liens image avec extention .jpg ou .JPG
result=l[i].href.search(/jpg$|JPG$/);
if(result!=-1){l[i].onclick=grdimg;}
}
}

function controle_position(e){
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
px=gk?e.pageX:event.clientX+sx; //curseur x
py=gk?e.pageY:event.clientY+sy; //curseur y
if(drag)with(gdim.style){left=px-dx+"px";top=py-dy+"px";}
return false
}
//Renvoi image et title dans le calque.
function grdimg(){
fx=gk?innerWidth-20:db.clientWidth //l fenêtre
fy=gk?innerHeight:db.clientHeight //h fenêtre
//charge l'image dans le cache du navigateur.
im=new Image();im.src=this.href;
//l'affiche en grandeur réduite repositionnée.
with(gdim.style){display="block";top=sy+2+'px'};
with(im1){src=im.src;width=height=100};
if(!cr)cr=gdim.offsetHeight-127;
if(gk)im1.style.marginBottom=-cr+"px";//correction Gecko
//montre le message d'attente.
lx.firstChild.data="patientez svp";
//colore le lien comme visité, récupère le message title
this.style.color=D.vlinkColor;txt=this.title;
//Lance le controle de chargement (c'est le temps que la grande image s'affiche, patientez patatipatata...)
actif=setTimeout('controleChargement()',100)
//désactive l'action normale du lien HTML
;return false
}
//controle du chargement de l'image
function controleChargement(){
//éxécute imgOK quand c'est terminé
im.complete?imgOK():
//sinon relance le contrôle toutes les 100 ms
actif=setTimeout('controleChargement()',100)
}

function imgOK(){ // image chargée.
clearTimeout(actif);lx.firstChild.data=txt;
//L'image ne dépasse pas la fenêtre:
if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;}
if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;}

//applique les dimensions recalculées à l'image.
im1.width=im.width;im1.height=im.height;
voirSelect('hidden')
}

// bug ie corrigé : cache les <select>
function voirSelect(v){
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}

function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
}

// initialisation
D=document;gk=window.Event?1:0/*Gecko*/;
dx=dy=e=drag=cr=0
addEvent(window,"load",initLienImg)
D.write(fe)
//-->
A voir également:

4 réponses

Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
11 avril 2007 à 05:03
Bonsoir,
D'après le code, la fenêtre qui ouvre est un div de la même page en position absolue. Oui, c'est ça.
Cependant, je viens de visiter ton site et il y a une erreur. La grande image est supposée être affichée dans ce div alors qu'elle est affichée toute seule dans une autre fenêtre.

L'erreur semble ne pas être dans le javascript mais dans le html. Quoique dur à dire comme ça rapidement puisque le javascript ajoute un événement. Faut revoir les instructions de l'original pour trouver l'erreur rapidement.

Serge.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
11 avril 2007 à 15:28
bonjour,

Merci pour la réponse, alors, pour ce qui est du code pour la galerie photos, je n'ai pas modifié par rapport à l'original.
Par contre, c'est peut être ma feuille de style pour la page qui implique cette ouverture.
Ci-joint une copie de la feuille de style plus le code de ma page.
MErci
CN

<div id="container">
<div id="content">
<h2>La galerie photos du Garrit</h2>
<h5>En attendant votre visite à Loubéjac, nous vous offrons la possibilité de décrouvir le Garrit à travers ces quelques photos.</h5>
<a href="diaporama/photos/legarrit-2.jpg" title="Les hortensias vue1"><img src="diaporama/vignettes/legarrit-2.jpg" alt="Les hortensias vue1" border="0" /></a>
<a href="diaporama/photos/legarrit-3.jpg" title="Les hortensias vue2"><img src="diaporama/vignettes/legarrit-3.jpg" alt="Les hortensias vue2" border="0" /></a>
<a href="diaporama/photos/jeux.jpg" title="Jeux pour enfants"><img src="diaporama/vignettes/jeux.jpg" alt="Jeux pour enfants" border="0" /></a>
<a href="diaporama/photos/legarrit.jpg" title="Salon de jardin vue1"><img src="diaporama/vignettes/legarrit.jpg" alt="Salon de jardin vue1" border="0" /></a>
<a href="diaporama/photos/legarrit-4.jpg" title="Salon de jardin vue2"><img src="diaporama/vignettes/legarrit-4.jpg" alt="Salon de jardin vue2" border="0" /></a>
<a href="diaporama/photos/lavande.jpg" title="Les belles lavandes"><img src="diaporama/vignettes/lavande.jpg" alt="Les belles lavandes" border="0" /></a>
<a href="diaporama/photos/legarrit-6.jpg" title="Le parc"><img src="diaporama/vignettes/legarrit-6.jpg" alt="Le parc" border="0" /></a>
<a href="diaporama/photos/legarrit-7.jpg" title="Verdure"><img src="diaporama/vignettes/legarrit-7.jpg" alt="Verdure" border="0" /></a>
<a href="diaporama/photos/piscine.jpg" title="Piscine vue1"><img src="diaporama/vignettes/piscine.jpg" alt="Piscine vue1" border="0" /></a>
<a href="diaporama/photos/piscine-1.jpg" title="Piscine vue2"><img src="diaporama/vignettes/piscine-1.jpg" alt="Piscine vue2" border="0" /></a>
<a href="diaporama/photos/legarrit-8.jpg" title="Belle porte"><img src="diaporama/vignettes/legarrit-8.jpg" alt="Belle porte" border="0" /></a>
<h5>* Un clic sur ces photos permet de les agrandir.</h5>
</div>

<<<<<feuille de style>>>>>

body {
background: #FFF url('images/back8.jpg') no-repeat top left fixed;
margin: 0 0 20px 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.95em;
color: purple;
line-height: 1.5em;
}

#header {
width: 80%;
background:transparent;
margin: 0 auto;
padding: 0;
height: 101px;

}

#header h1 {
padding: 30px 0;
color: purple;
font-size: 1.4em;
letter-spacing: 3px;
margin: 0;
text-align: right;
}

#nav {
position: absolute;
top: 85px;
left: 10%;
width: auto;
padding: 0;
margin: 0 auto;
font: bold 11px Verdana, sans-serif;
height: 25px;


}

#nav li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}

#nav li a {
padding: 3px;
margin: 0;
border: 1px solid #B78E96;
border-bottom: none;
background: transparent url(images/trans6.gif) repeat;
text-decoration: none;
}

#nav li a:link { color: purple;
}
#nav li a:visited { color: purple;
}

#nav li a:hover {
color: #ffffcc;
background: transparent url(images/trans7.gif) repeat;
}

#nav li a#current {
color: white;
background: transparent url(images/trans7.gif) repeat;
border-bottom: 1px solid #999;
}

#container {
background: transparent url(images/trans5.gif ) repeat;
width: 80%;
margin: 0 auto;
padding: 0;
}

#content {
margin: 0;
padding: 40px;
padding-bottom: 0px;
}

#content1 {
margin: 0;
padding: 40px;
padding-bottom: 0px;
}

#content2 {
margin: 0;
padding: 40px;
padding-top: 0px;
}

#footer {
background: transparent;
padding: 5px 10px 2px 0;
text-align: right;
font-size: 0.75em;
clear: both;
line-height: 1.15em;
}

a, a:visited {
background: transparent;
color: purple;
text-decoration: none;
font-weight: bold;
outline: none;
}

a:hover {
background: transparent;
color: #FFFFCC;
text-decoration: none;
}
a:active{
background: transparent;
color: purple;
text-decoration: none;
}

h2 {
color: #FFFFCC;
border-bottom: 1px solid #666;
margin: 0px;
padding: 0px 0 1px 0;
font-size: 1.2em;
}

h3 {
color: #FFFFCC;
border-bottom: 1px solid #666;
margin: 0;
padding: 10px 0 1px 0;
font-size: 1em;
}
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
11 avril 2007 à 19:07
Bonjour,
le css semble correct. Je vois deux choses qui peuvent causer problèmes.
- dans le javascript:
// Création de la pseudo-popup : (le z-index est important pour etre sur qu'il soit au premier plan) 
fe='<div id="pop" style="position:absolute;left:180px;top:300px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;' 
//ajoute une ombre pour IE seulement 

// (entête c'est là ou tu met le bouton avec la croix pour fermer le pseudo pop up (vire ces commentaires)) 
fe+='entête<img title="Fermer" src="http://chrisneau.free.fr/images/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"' 
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>'

Il y a une balise div d'ouverture et deux de fermeture.

- dans le html.
<div id="container">
<div id="content">

Le code est correct mais le javascript est peut être confus par le fait que les mini images sont dans un div à l'intérieur d'un autre div.


Essayes en enlevant un des </div> du javascript, en premier.
C'est quand même un beau javascript qui permet de bouger l'image en la déclic-glissant.

Serge.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
12 avril 2007 à 00:26
Bon alors, je viens d'enlever la balise <div> dans le javacript, effectivement, je ne vois pas pourquoi elles étaient deux.
PAr contre, pas de changement, enfin sur mon ordi.
Et pour le html, c'est vrai c'est entre deux <div>, mais comment faire pour ne pas changer la mise en forme.
Merci beaucoup pour ton aide en tout cas.
Mais ce problème doit être résolu, ça gêne tout le monde cette histoire d'affichage, quel dommage, ça gâche tout !!
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47 > poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
12 avril 2007 à 01:32
Bon, attends. Tu peux l'essayer sur une page test.
Le javascript est assez sophistiqué. Je vais regarder de plus près et je reviens.

Serge.
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
12 avril 2007 à 02:04
Bonjour,
J'ai trouvé un bout de code manquant. J'espère que Txiki respecte les droits d'auteurs en te passant ce code. Tu devrais au moins mettre le crédit à l'auteur, qui semble être Michel Deboom. Je te passe le bout de code du début. Il y a deux div.

//redirection des liens image jpg. Michel Deboom 05/2005 
  
// Création de la pseudo-popup : 
fe='<div id="pop" style="position:absolute;left:180px;top:300px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;' 
//ajoute une ombre pour IE seulement 
fe+='filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)">' 
fe+='<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="cursor:move;background-color:#267726;line-height:18px;color:white;font-size:12px;padding:0 20px 0 .5em;font-family:Verdana, Helvetica, Arial;">' 
fe+='entête<img title=" Fermer " src="../images/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"' 
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>' 


Bon, je l'ai essayé ici et ça fonctionne. Noubliez pas de respecter les droits d'auteurs en passant des codes comme ça. Moi, j'aime bien me faire payer pour mon travail. C'est pareil pour tout le monde. Faut obtenir les permissions.

Serge.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
12 avril 2007 à 10:29
Bonjour,

Ah ben voilà, merci, merci beaucoup, heureusement que tu es là, ça marche, effectivement, ce bout de code était parti et je ne sais pas comment, mais c'est de ma faute. Par contre, je viens de regarde ce que m'avait envoyé Txiki, et ce morceau était bien présent donc c'est de ma faute, j'en ai perdu un bout en route !!!
Par contre, peux-tu m'en dire plus sur les droits d'auteur, j'ai laissé le nom de l'auteur dans le code, ça suffit ? Est-ce qu'il faut demander la permission pour l'utiliser ?
Merci encore.
CN
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47 > poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
12 avril 2007 à 21:14
Ah, bien.
Pour les droits d'auteurs, normalement l'auteur du code spécifie si le code peut être reproduit et sous quelles conditions. Faut voir le site d'où provient le code en question.

Je viens de faire une recherche Google avec son nom. La source du code est: http://www.javascriptfr.com
et il a une mise à jour du code là: http://moncastel.9online.fr/gimg/gimg.htm

Le code semble bien gratuit. Il en a fait une mise à jour cette année. Mettre la note avec son nom semble suffisant. Tu peux lui envoyer l'url de ta page et tes commentaires.
: )
Serge.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008 > Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009
13 avril 2007 à 11:02
bonjour,


Ok, ok, merci pour toutes ces informatiions et pour ton aide.
CN
0