Renvoi d'images dans une fausse popup sans recharger la page

Soyez le premier à donner votre avis sur cette source.

Vue 28 025 fois - Téléchargée 1 469 fois

Description

Utile pour ceux qui ont des images à montrer.
Page de test : http://moncastel.free.fr/gimg/gimg.htm
Simple à incorporer au fichier HTML. Fichier JS externe.
programme automatique et autonome qui redirige les liens vers des images dans un calque de la page en cours.

Il suffit d'incorporer en fin de body:
<script type="text/javascript" src="g_img.js"></script>
dans le head:
<link rel="stylesheet" href="gimg.css" type="text/css" />

Copier les images et fermer.gif dans un répertoire nommé img.
La pseudo-fenêtre se positionne automatiquement à 2px en haut et à gauche. Si vous souhaitez l'avoir à droite, remplacer left par right dans le fichier gimg.css
Soyez sympa, si vous utilisez ce script de me donner l'URL, je ferai un lien ici comme exemple.

Essayé avec succés avec win98 et les browsers IE5 à 6,Opéra7,Netscape6 et +, Mozilla .6, Firefox

Source / Exemple :


<!-- redirection des liens image jpg. Michel Deboom 05/2005 
//modifié 01/06  

function initLienImg(){ 
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6 
gdim=D.getElementById('pop'); lx=D.getElementById('tet') 

addEvent(lx,"mousedown",function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;}) 
addEvent(lx,"mouseup",function(){drag=0}) 
addEvent(D,"mousemove",controle_position) 
  
//création de l'image 
im1=D.createElement("img");gdim.appendChild(im1); 
if(gk)im1.style.marginBottom=-4+"px";//correction Gecko 
//écriture des évènements 
l=D.getElementsByTagName('a'); 
for(var i=0;i<l.length;++i){ 
  //ajoute onclick=grdimg dans les liens image 
  result=l[i].href.search(/.jpg$|.jpeg$|.png$|.gif$/i); 
  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} 
} 
  
// bug ie corrigé : cache les <select> 
function voirSelect(v){ 
elem=document.getElementsByTagName('select');
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;} 
} 

//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; 
//la montre. 
with(gdim.style){display="block";top=sy+2+'px'}; 
//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; 
voirSelect('hidden');
//Lance le controle de chargement 
actif=setTimeout('controleChargement()',100) 
//désactive l'action normale du lien HTML 
;return false 
} 

//controle du chargement de l'image 
function controleChargement(){ 
clearTimeout(actif); 
//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;} 
//relance le contrôle toutes les 100 ms 
if(im.complete){lx.firstChild.data=txt;
with(im1){src=im.src;width=im.width;height=im.height;};  
}
else actif=setTimeout('controleChargement()',100) 
} 
    
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 

// Création de la pseudo-popup : 
D.write('<div id="pop"><div id="tet">titre<img title=" Fermer " src="img/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" /></div></div>'); 
//addEvent(window,"load",initLienImg) 
initLienImg()
//--> 

Le style CSS du fichier gim.css :

#pop{ /* fausse popup */
position:absolute;
left:3px;
top:3px;
display:none;
z-index:200;
background-color:#FFF;
border:3px outset;
/* pour IE seulement */
filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)
}
#tet{ /* titre */
cursor:move;
background-color:maroon;
font:12px/18px "Comic Sans MS", "Times New Roman", Times, serif;
color:white;
padding:0 20px 0 .5em;
}
#tet img{ /* croix pour fermer */
position:absolute;
right:0;
top:0;
height:14px;
width:16px;
cursor:default;
margin:2px 1px 1px;
border:0
}

Conclusion :


J'ai ajouté des commentaires dans le script.
J'attend les votres et vos notes bien sûr, merci ;o)
Images test : mes animaux familiers

le5/04/2004 amélioré la page démo.

le 7/04/2004 report du message title.

le 11/04/04 aspect popup

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
126
Date d'inscription
samedi 28 novembre 2009
Statut
Membre
Dernière intervention
9 juin 2013

merci!tu me donne une piste que je cherchait depuis bien longtemps!car ton code fait des fenetres modales et que j'essaye de trouver un code de fenetres modales sans php,si je prend un petit peu de mon temp,j'aurais ce que je veux!merci,t un géniale,mem si c'est peut etre pas de toi le code,tu me l'a fait découvrir et je t'en suis reconnaisant!mais par cont,jle un peu customisé ta fenetre du genre wn 98==>a==>win7 !
bye
Messages postés
1
Date d'inscription
mardi 10 février 2009
Statut
Membre
Dernière intervention
10 février 2009

Bravo et merci pour ce script. Exactement ce que je cherchais à reproduire depuis des mois. Comme demandé voici le site sur lequel vous pourrez voir le résultat : www.luxury-club.fr
Plus précisément sur les pages détails des news (http://www.luxury-club.fr/news.php) et également sur les pages détails des véhicules (http://www.luxury-club.fr/location/Ferrari/F430.php). Je vais au fur et à mesure l'appliquer à tout le site. MERCI
Messages postés
6
Date d'inscription
dimanche 19 août 2007
Statut
Membre
Dernière intervention
31 janvier 2008

Bonjour,

Le script est visible à : http://r1223.adelex.fr/journal.html

J'en suis très contant, mais je n'arrive pas à fermer la pseudo pop-up avec un 'onmouseout'

J'ai rajouté la fonction :

function clsimage(){
??? <- c'est là ou je sêche.
}

qui est appelé par : if(result!=-1){l[i].onmouseout=clsimage()}

si vous pouvez m'aider.

Merci d'avance,

Xav'
Messages postés
2
Date d'inscription
lundi 26 mars 2007
Statut
Membre
Dernière intervention
20 avril 2007

je retire ce que j'ai dit !!!

Une petite mise à jour du code et plus de problèmes !

Ce script est vraiment excellent, merci beaucoup !!!!!!!
Messages postés
2
Date d'inscription
lundi 26 mars 2007
Statut
Membre
Dernière intervention
20 avril 2007

Bonjour, je suis vraiment bluffé par ce script, qui correspond exactement à ce que je recherche depuis longtemps !

Mais j'ai un problème
Le script nu fonctionne sans problème avec tous les navigateurs que j'ai pu tester
Par contre, intégré à mon site donc associé à Dotclear2, il y a un bug avec Internet Explorer 6 : le popup reste petit et bloqué sur "patientez svp"
cela fonctionne par contre très bien avec firefox ou internet Explorer 7

J'imagine qu'il doit y avoir un conflit entre les fonctions du script et les fonctions de Dotclear2... Quelqu'un a une idée de ce qui peut bien se passer ?
voici le lien de la page : http://www.electron-liberezvous.com/garocheurs/index.php?category/hongrie

Merci d'avance

Pierro
Afficher les 71 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.