problème avec zoombox v2

Par vlad05, il y a 13 ans

Javascript

bonjour,
je précise que je suis nouveau sur le site et que ca fait bien longtemps que j'ai programmé. Ceci expliquera peut etre cela, bref...
J'essai de faire fonctionner zoombox v2 sur un site et j'en suis revenu a juste essayer de lui faire afficher une image en cliquant sur un lien texte. Je précise que j'ai bien copié le jquey.js et le dossier zoombox sous la racine de mon projet avec ma page de test.
toutes infos conseils ou aides pour me débloquer sont les bienvenues.
a vous les studios!
voici mon tout petit code de test (j'utilise firefox 19.0.2)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <!-- <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">-->
                <link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="zoombox/zoombox.js"></script>
                <script type="text/javascript">
                jQuery(function($){
                    $('a.zoombox').zoombox({
                    });
                });
                </script>
    </head>
    <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <a class = "zoombox" href= "masque2.jpg">afficher une image avec zoombox</a>
    <a href="http://grafikart.fr" class="zoombox">This is my site !</a>
  </body>
</html>

8 réponses

Djiins, il y a 13 ans

Salut !!

si tu regarde l'exemple fourni par Grafikart Ici

<script type="text/javascript">
        jQuery(function($){
            $('a.zoombox').zoombox();
            /**
            * Or You can also use specific options
            $('a.zoombox').zoombox({
                theme : 'zoombox', //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
                opacity : 0.8, // Black overlay opacity
                duration : 800, // Animation duration
                animation : true, // Do we have to animate the box ?
                width : 600, // Default width
                height : 400, // Default height
                gallery : true, // Allow gallery thumb view
                autoplay : false // Autoplay for video
            });
            */
        });
        </script>

tu vois qu'il précise des propriétés dans la fonction donc essaye de tester avec ces paramètres pour voir si cela s'affiche et je pense que oui :)

ou alors enlève tes accolades
Comme ceci 

$('a.zoombox').zoombox();

et non pas comme tu l'as mis 

$('a.zoombox').zoombox({
                    });
vlad05, il y a 13 ans

j'ai bien suivi les instructions sur garfikart (je crois, en tout cas parce que ca marche tjs pas)
j'ai essayer sans les accolades comme tu me l'as indiqué et aussi en remettant tout les paramètres : theme opacity...
Je n'ai toujours pas le résultat voulu.
j'ai l'impression que j'ai un pb de déclaration mais tout me semble bon, y'a peut etre des subtilités qui m'échappent.
si vous avez d'autres conseils, je suis preneur...
et merci djins de t'être penché sur le sujet.

Djiins, il y a 13 ans

j'ai testé aussi avec le Jquery téléchargé en local et en effet ca ne fonctionne pas mais je n'ai pas creusé dsl je regarderais parce que parfois c'est intéressant de dev en local sans être connecté au web.

Djiins, il y a 13 ans

tiens je te met ce que j'ai dans ma page je viens de tester ca marche

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <!-- <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">-->
                <link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                <script type="text/javascript" src="zoombox/zoombox.js"></script>
                <script type="text/javascript">
                jQuery(function($){
                    $('a.zoombox').zoombox({
                    });
                });
                </script>

    </head>
    <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <a class = "zoombox" href= "masque2.jpg">afficher une image avec zoombox</a>
    <a href="http://grafikart.fr" class="zoombox">This is my site !</a>
  </body>
</html>

Comme tu peux le voir je n'ai pas modifie ton fichier sauf 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

a la place de 

<script type="text/javascript" src="jquery.js"></script>

et çà fonctionne parfaitement.

j'ai a ma racine : un dossier zoombox avec ce qu'il doit contenir.

au meme niveau j'ai
index.php (page ou j'ai mis ton code

et image : masque2.jpg

voila j'espères que ca t'aidera

vlad05, il y a 13 ans

je viens d'essayer et c'est pas mieu. Mon image s'affiche toujours dans une nouvelle page et j'ai pas d'effet zoombox.

Djiins, il y a 13 ans

je viens de modifier le message :) ca devrais fonctionner la :)

vlad05, il y a 13 ans

effectivement, ca fonctionne!!
merci bcp, ca va me permettre d'avancer.
est ce que tu saurais m'expliquer pourquoi ca fonctionne avec la librairie jquery "google" et pas en local.( peut etre que j'ai pas la bonne version, mais il me semble que c'est la derniére).
merci encore pour le dépannage en tout cas.