Forum ZitePLUS

La communauté des utilisateurs du CMS ZitePLUS

Vous n'êtes pas identifié(e).

Pages : 1

#1 16/02/2012 10:38:33

mon-adc
Membre
Inscription : 09/11/2010
Messages : 19

Une loupe sur image

Bonjour
Une loupe configurable en taille et en grossissement par clic droit pour une image contenue dans le dossier document
le chemin de l'image est view.php/votreimage.ext
il se définie en bas de page dans la ligne..............<!--taper ici le chemin de l images precede de view.php/ -->
                                                                 <input type="image"     id="alpha" src="view.php/img.jpg" /> 

Bien cordialement


Mon-Adc








<html>
    <head>
<SCRIPT LANGUAGE="JavaScript">

function zi( prm )   
{    this.init=prm['image'];
    this.zoom=prm['zoom']||3;
    this.carre=prm['loupe']||80;
    var div1=document.createElement("div");
        div1.id=prm['iddiv']||this.init.id+"_div";
        div1.style.position="absolute";
        div1.style.overflow="hidden";
        div1.style.top=this.init.offsetTop+"px";
        div1.style.left=this.init.offsetLeft+"px";
        div1.style.display="none";
        div1.style.height=(this.carre*2)+"px";
        div1.style.width=(this.carre*2)+"px";
        //---------------------------------------------------------
        div1.oncontextmenu=function(event)    //-- menu contextuel --
        //---------------------------------------------------------
        {    var menu=document.createElement("div");
                var l1=document.createElement("span");
                    l1.innerHTML=" Loupe ";
                    menu.appendChild(l1);
                var b1=document.createElement("button");
                    b1.innerHTML=" + ";
                    //----------------------------------------------------------------
                    b1.onclick=function(event)    //-- augmenter la taille de la loupe --
                    //----------------------------------------------------------------
                    {    if (     ( fnct.carre*2 )<fnct.init.offsetHeight &&
                                ( fnct.carre*2 )<fnct.init.offsetWidth )
                        {    fnct.carre+=5;
                            fnct.div.style.height=(fnct.carre*2)+"px";
                            fnct.div.style.width=(fnct.carre*2)+"px";
                        }
                    }
                    menu.appendChild(b1);
                b1=document.createElement("button");
                    b1.innerHTML=" - ";
                    //--------------------------------------------------------------
                    b1.onclick=function(event)    //-- réduire la taille de la loupe --
                    //--------------------------------------------------------------
                    {    if (     ((fnct.carre*2)-5)>this.parentNode.offsetWidth &&
                                ((fnct.carre*2)-5)>this.parentNode.offsetHeight )
                        {    fnct.carre-=5;
                            fnct.div.style.height=(fnct.carre*2)+"px";
                            fnct.div.style.width=(fnct.carre*2)+"px";
                        }
                    }
                    menu.appendChild(b1);
                l1=document.createElement("br");
                    menu.appendChild(l1);
                l1=document.createElement("span");
                    l1.innerHTML=" Zoom ";
                    menu.appendChild(l1);
                b1=document.createElement("button");
                    b1.innerHTML=" + ";
                    //--------------------------------------------------
                    b1.onclick=function(event)    //-- augmenter le zoom --
                    //--------------------------------------------------
                    {    //if
                        {    fnct.zoom+=1;
                            fnct.image.height=(fnct.zoom*fnct.init.offsetHeight);
                            fnct.image.width=(fnct.zoom*fnct.init.offsetWidth);
                        }
                    }
                    menu.appendChild(b1);
                b1=document.createElement("button");
                    b1.innerHTML=" - ";
                    //----------------------------------------------
                    b1.onclick=function()    //-- diminuer le zoom --
                    //----------------------------------------------
                    {    if ( fnct.zoom>1 )
                        {    fnct.zoom-=1;
                            fnct.image.height=(fnct.zoom*fnct.init.offsetHeight);
                            fnct.image.width=(fnct.zoom*fnct.init.offsetWidth);
                        }
                    }
                    menu.appendChild(b1);
                l1=document.createElement("br");
                    menu.appendChild(l1);
                l1=document.createElement("span");
                    l1.innerHTML=" Loupe ";
                    menu.appendChild(l1);
                b1=document.createElement("button");
                    b1.innerHTML="Quitter";
                    //-------------------------------------------------------
                    b1.onclick=function()    //-- fermer le menu contextuel --
                    //-------------------------------------------------------
                    {    this.parentNode.parentNode.removeChild(this.parentNode);    }
                    menu.appendChild(b1);
            menu.style.position="absolute";
            menu.style.top=this.offsetTop+"px";
            menu.style.left=this.offsetLeft+"px";
            menu.style.backgroundColor="#FFFFFF"
            menu.style.border="1px solid #FF0000";
            document.body.appendChild(menu);
            return false;
        }
        //--------------------------------------------------------------
        div1.onmousemove=function(event)    //-- déplacement de la loupe --
        //--------------------------------------------------------------
        {    deplace(event)    };
        var img1=document.createElement("img");
            img1.id=prm['idimage']||this.init.id+"_image";
            img1.style.position="absolute";
            /*@cc_on    img1.style.cursor="url(Img/loupe.ico)";    @*/
            img1.src=this.init.src;
            img1.height=(this.zoom*this.init.offsetHeight);
            img1.width=(this.zoom*this.init.offsetWidth);
            div1.appendChild(img1);
    document.body.appendChild(div1);
    this.div=document.getElementById(div1.id);
    this.image=document.getElementById(img1.id);
    var fnct=this;
    //---------------------------------------------------------------
    this.init.onmouseover=function(event)    //-- survol d'une image --
    //---------------------------------------------------------------
    {    fnct.div.style.display="inline";
        deplace(event);
    };
    //-----------------------------------------
    function deplace(event)    //-- déplacement --
    //-----------------------------------------
    {    var x,y;
        if ( window.event )
                {    x=window.event.x+document.body.scrollLeft;
                    y=window.event.y+document.body.scrollTop;
                }
        else    {    x=event.pageX;
                    y=event.pageY
                }
        if (         x<fnct.init.offsetLeft ||  x>(fnct.init.offsetLeft+fnct.init.offsetWidth)
                ||    y<fnct.init.offsetTop  ||  y>(fnct.init.offsetTop+fnct.init.offsetHeight)     )
                {    fnct.div.style.display="none";    }
        else    {    fnct.image.style.top=((-y+fnct.init.offsetTop)*fnct.zoom)+"px";
                    fnct.image.style.left=((-x+fnct.init.offsetLeft)*fnct.zoom)+"px";
                    fnct.div.style.top=(y-fnct.carre)+"px";
                    fnct.div.style.left=(x-fnct.carre)+"px";
                }
    }
}



</SCRIPT>
      <title>° Zoom Images © Bul ° Novembre 2009 °</title>
      <meta http-equiv="content-language" content="fr-FR" />
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body    {    font-family:Comic Sans Ms;
            font-weight:bold;
        }
p        {    text-align:center;
            font-size:20px;
        }

  </style>
    </head>
    <body>
        <p>    placez la souris sur l'image, une loupe est activée<br />
                on augmente/diminue la taille de cette loupe et/ou du zoom<br />
                en cliquant sur le bouton droit de la souris.
        </p>
        <p>
        <!--taper ici le chemin de l images precede de view.php/ -->
            <input type="image"     id="alpha" src="view.php/img.jpg" />
           
        </p>
        <script     type="text/javascript">
            window.onload=function()
            {   
                new zi (    {    'image':document.getElementById("alpha"),
                                'loupe':100,
                                'zoom':4,
                                'iddiv':'tmpdiv',
                                'idimage':'tmpimage'
                            }    );
            };
        </script>
    </body>
</html>

Hors ligne

#2 18/02/2012 00:42:24

jpg
Administrateurs
Inscription : 19/11/2008
Messages : 2 086
Site Web

Re : Une loupe sur image

Merci pour ce partage wink

Au cas ou ce code serait réutilisé par un membre, quel est la licence de ce code (j'ai vu un Zoom Images © Bul ° Novembre 2009 dans le source) ?

J'ai fait un petit test: Chrome et IE OK, Pour Firefox cela ne marche pas.

Une petite remarque: la loupe est incomplète dans certain cas.
par exemple si on explore l'image en partant du bas ou de la droite de l'image

a+
Jean-Paul

Hors ligne

#3 19/12/2013 08:51:48

Abbysam007
Nouvel utilisateur
Inscription : 19/12/2013
Messages : 1

Re : Une loupe sur image

Bonjour
un tout petit script pour un accès direct au forum ziteplus (ou n'importe quel site d'ailleurs google etc...) dans une iframe

***UsEr***

Hors ligne

Pages : 1

Pied de page des forums

Propulsé par FluxBB