Problème Zoom box 2

Par elsie82, il y a 14 ans


Bonjour,

J'ai beau retourner le pb je ne vois pas ce qui cloche... Grrr !!!
Seul le background noir en opacité se lance mais pas la galerie photo.
Si quelqu'un a une idée ?
Ci-dessous :

mon head

<head>
        <title></title>
        <link rel="shorcut icon" href="images/favicon.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

Ma galerie

<div id="galerie"> 
<ul id="galeriea">               
<li><a class="zoombox zgallery1" href="images/img/maxi_roland_garros.png" title="E-mailing Jeux-concours Roland-Garros - Le parisien.fr" ><img src="images/img/mini_roland_garros.png"/></a></li>           
<li><a class="zoombox zgallery1" href="images/img/maxi_guide_shopping.jpg" title="Proposition de d'une page 'Guide Shopping' enassociation avec Le Guide.com - Le parisien.fr"><img src="images/img/mini_guide_shopping.png"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_robin_bois.png" title="E-mailing Jeux-concours Avant-Première au Festival de Cannes - Le parisien.fr"><img src="images/img/mini_robin_bois.png"/></a></li> 
<li><a class="zoombox zgallery1" href="images/img/maxi_bon_deco.jpg" title="E-mailing Jeux-concours Bons d'ahat déco - Le parisien.fr"><img src="images/img/mini_bon_deco.png"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_meteo_plage.jpg" title="Création de la Météo des plages sous Illustrator - Le Parisien.fr"><img src="images/img/mini_meteo_plage.png"/></a></li>
</ul>
<ul id="galerieb">
<li><a class="zoombox zgallery1" href="images/img/maxi_retouche_img.jpg" title="Retouche de photographie noir et blanc"><img src="images/img/mini_retouche_img.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_retouche_img_2.jpg" title="Retouche de photographie couleurs"><img src="images/img/mini_retouche_img_2.jpg"/></a></li>  
<li><a class="zoombox zgallery1" href="images/img/maxi_catalogue_ekobo.jpg" title="Utilisation d'une des 2 pompes à pieds de Koutoubéti lors de l'évaluation du projet en novembre 2007"><img src="images/img/mini_catalogue_ekobo.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_refonte_lamer_1.jpg" title="Refonte de la page d'accueil de 'La mer toute l'année.com'"><img src="images/img/mini_refonte_lamer_1.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_refonte_lamer_2.jpg" title="Refonte d'un page du site 'La mer toute l'année.com'"><img src="images/img/mini_refonte_lamer_2.jpg" /></a></li>
</ul>
<ul id="galeriec">
<li><a class="zoombox zgallery1" href="images/img/maxi_nf_foret.jpg" title="Mini-site crée en partenariat avec l'association 'Couer de forêt' - Nouvelles Frontières"><img src="images/img/mini_nf_foret.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_nf_costa_rica.jpg" title="Newsletter spécial Costa Rica - Nouvelles Frontières"><img src="images/img/mini_nf_costa_rica.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_nf_st_valentin.jpg" title="Opération spéciale Saint-Valentin - Nouvelles Frontières"><img src="images/img/mini_nf_st_valentin.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_nf_ski.jpg" title="Newsletter hebdomadaire spéciale ski - Nouvelles Frontières"><img src="images/img/mini_nf_ski.jpg"/></a></li>
<li><a class="zoombox zgallery1" href="images/img/maxi_nf_ocean.jpg" title="Animation réalisée pour la sorie du fim Océans - Nouvelles Frontières"><img src="images/img/mini_nf_ocean.jpg"/></a></li>
</ul>   
</div>

Et mes scripts

<!-- The JavaScript -->
<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">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
              $(function() {
                $('h2 a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
              </script>
           <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>

Merci d'avance :)

2 réponses

Grafikart, il y a 14 ans

Tu as un exemple online c'est vraiment bizarre.

elsie82, il y a 14 ans

Ci-joint mon lien :
Texte du lien
La galerie est sur la page works
En y regardant de plus près la lightbox s'affiche mais pas au bon endroit...
Je jetterai un oeil au css de la zoombox