lien sur limage dans zoombox

arcadebox
Javascript

Bonjour je cherche a faire un truc un-peut trop compliquer pour ma petite tête :lol: .

J'ai une zoombox qui s'ouvre quand je clique sur une image.
Voici le code de l'image. :D
<code type="html">
<a href="image2/1.png" class="zoombox zgallery1"><img src="blank.png" alt="1" title="1" id="i1" onmouseover="ChangeImage('i1','image/1.jpg')" onmouseout="ChangeImage('i1','blank.png')" border="0" /> </a>
</code>

A la base elle est invisible et quand je passe la souris sur l'emplacement elle apparait d'ou la fonction javascript.

Ce que je cherche à faire c'est quand la zoombox est ouverte si je reclick sur l'image sa l'ouvre en plien ecran genre : http://www.emplacement-numero1.com/images/ann1\_2,961.jpg
mais la je suis complétement larguer.

apparament il faudrait un go to url mais comment l'inserer ??

3 réponses

golendercaria

Tu disposes de beaucoup de fonctionnalité rien qu'en JavaScript
-> récupération de la taille de la fenêtre.
-> modification des attributs, hauteur et largeur, de la balise <img>
-> manipulation du DOM

Si tu souhaites ouvrir l'image dans une nouvelle fenêtre tu utilises l'attribut "target"
-> voir "_blank" et "_self"

Tu me laisse deux minutes et je te fais un agrandissement d'image comme sur l'exemple mais avec un jolie effet ;)

golendercaria

Essaye ça dans un fichier .html, ensuite tu pourras l'adapter sur ta zoombox (j’espère t'avoir aider).

<html>
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    </head>
    <body>
        <img src="./Koala.jpg" style="height:77px; width:102px;" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script type="text/javascript">
        $("img").click(function(){
            var $this = $(this).css('width');
            if($this=='102px'){
                $('img').animate({'width':'1024px','height':'768px'},{queue:false , duration:300});
            }else{
                $('img').animate({'width':'102px','height':'77px'},{queue:false , duration:300});
            }       
        });  
        </script>
    </body>
</html>

EDIT: tu peux modifier {queue:false , duration:300} par une durée en milliseconde si tu n'utilise par de callback.

arcadebox
Auteur

ok merci je vais tester sa :)