Grafikart,
il y a 14 ans
Tu as un exemple online c'est vraiment bizarre.
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 :)
Tu as un exemple online c'est vraiment bizarre.
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