zoombox sous firefox
Bonjour,
j'ai un problème avec mon zoombox sur firefox il me met les photos en double lorsque j'ouvre la galerie zoombox malgré que sur le site il n'y ait qu'une seule photo de chaque.
Quand je test sur internet explorer il me met bien une seule photo
Savez vous ce qui pourrait provoquer sa ?
3 réponses
J'ai un exemple en ligne que l'on peut voir sur http://worldwidewinnersrecord.com/index.php?page=photos
Voici le code de ma page index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" >
<title>World Wide Winners</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://127.0.0.1/test/" />
<link rel="stylesheet" href="style.css" type="text/css" charset="iso-8859-1" />
<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>
<link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
jQuery(function($){
$('a.zoombox').zoombox();
});
</script>
</head>
<body>
<?php
require "www_db.inc.php";
?>
<div id="outer">
<div id="wrapper">
<div id="nav">
<div id="head"></div>
<div id="head-pip"></div>
<ul>
<li id="m1"><a href="index.php?page=accueil">Accueil</a></li>
<li id="m2"><a href="index.php?page=news">News</a></li>
<li id="m3"><a href="index.php?page=artistes">Artistes</a></li>
<li id="m4"><a href="index.php?page=medias">Medias</a></li>
<li id="m5"><a href="index.php?page=evenements">Evenements</a></li>
<li id="m6"><a href="index.php?page=prestations">Prestations</a></li>
<li id="m7"><a href="index.php?page=liens">Liens</a></li>
<li id="m8"><a href="forum/index.php">Forum</a></li>
<li id="m9"><a href="mailto:staff@worldwidewinnersrecord.com">Contact</a></li>
</ul>
<div id="search"> <br>
<h2>Inscription à la newsletter</h2>
<br>
<form action="">
<input type="text" class="text" name="q" value="" id="q" />
<input type="submit" name="submit" value="Go > >" id="submit" class="submit" />
</form>
</div>
</div>
<div id="body">
<div id="body-inner">
<?php
// On définit le tableau contenant les pages autorisées
// ----------------------------------------------------
$pageOK = array( 'accueil' => 'accueil.php',
'news' => 'news.php',
'artistes'=> 'artistes.php',
'medias'=> 'medias.php',
'evenements' => 'evenements.php',
'prestations' => 'prestations.php',
'liens' => 'liens.php',
'artiste2' => 'artiste2.php',
'photos' => 'photos.php',
'sons' => 'sons.php',
'videos' => 'videos.php');
// On teste que le paramètre d'url existe et qu'il est bien autorisé
// -----------------------------------------------------------------
if ( (isset($_GET'page'])) && (isset($pageOK$_GET'page']])) ) {
include($pageOK$_GET'page']]); // Nous appelons le contenu central de la page
} else {
include('accueil.php'); // Page par défaut quant elle n'existe pas dans le tableau
}
?>
<div class="clear"></div>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="copyright">
<div id="copyright-left"> World Wide Winners © all right reserved | Webmaster: <a href="mailto:klemor.soldjah@gmail.com">Klemor Soldjah</a> | <a href="admin/authenfication.php">Administration</a>
</div>
</div>
</body>
</html>Ensuite voici le code de ma page photos
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h3>Photos</h3>
<hr align="left" width="200" size="1">
<div class="center">
<?php
require 'fonctions.php';
$photos_db = www_connecte_db();
$nombre = 15; // on va afficher 15 résultats par page.
if (!isset($limite)) $limite = 0; // si on arrive sur la page pour la première fois
// on met limite à 0.
$limitesuivante = $limite + $nombre;
$limiteprecedente = $limite - $nombre;
$path_parts = pathinfo($_SERVER'PHP_SELF']);
$page = $path_parts'basename'];
$select = "SELECT count(id) FROM table_photos";
$result = mysql_query($select,$photos_db) or www_mysql_die();
$row = mysql_fetch_row($result);
$total = $row[0];
$verifLimite= verifLimite($limite,$total,$nombre);
if(!$verifLimite)
{
$limite = 0;
}
$colonne=0;//début du comptage des colonnes
$ligne=0;//début du comptage des lignes
$rqt_photos = "SELECT * FROM table_photos_test ORDER BY id DESC LIMIT $limite,$nombre";
$rslt_photos = mysql_query ($rqt_photos,$photos_db) or www_mysql_die();
if (mysql_num_rows($rslt_photos) == 0)
{
print("Aucune photo pour le moment<hr align='left' width='300' size='1'>");
}
else
{
echo '<table width="450px" border="0">';
echo '<tr>';
while($photos = mysql_fetch_object($rslt_photos))
{
echo '<td><div class="min">
<a href="'.$photos->url.'" class="zoombox zgallery1">
<img src="'.$photos->urlmin.'" alt="'.$photos->commentaire.' '.$photos->url.'">
<h3>'.$photos->commentaire.'<h3>
</a>
<div class="clear"></div>
</div></td>';
$colonne++;
if($colonne==3)
{
$colonne=0;
$ligne++;
echo '</tr>';
if($ligne<3) echo '<tr>';
}
}
echo '</table>';
}
mysql_free_result($rslt_photos);
if($limite != 0)
{
echo '<a href="index.php?page=photos&limite='.$limiteprecedente.'"><<</a>';
}
if($total > $nombre)
{
affichePages($nombre,$page,$total);
}
if($limitesuivante < $total)
{
echo '<a href="index.php?page=photos&limite='.$limitesuivante.'">>></a>';
}
?>
</div>
<br>
<a href="index.php?page=medias">Retour</a>
</body>
</html>Et mon style CSS
html, body, ul, li, h1, h2, h3, h4 {
margin: 0;
padding: 0;
list-style: none;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #333;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #f00;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
text-align: center;
font: 12px arial, sans-serif;
background: #eee;
}
#outer {
background: top center url(images/header_bg.jpg) repeat-x;
width: 965px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#wrapper {
text-align: left;
margin: auto;
width: 956px;
}
#header {
background: top left url(images/logo-header.png) no-repeat;
height: 78px;
}
#header h1 {
color: #FD2E00;
font-weight: normal;
font-size: 22px;
padding: 20px 0 0 90px;
margin: 0;
}
#header p {
color: #333333;
padding: 0 0 10px 90px;
margin: 0;
}
#nav {
background: url(images/header_c_bg.gif) repeat-x;
position: relative;
height: 370px;
}
#nav a {
color: #E7E4E4;
text-decoration: none;
}
#nav a:hover {
color: #1D702D;
font-weight: bold;
font-size: 10px;
text-decoration: none;
}
#nav ul {
padding: 10px 0 0 382px;
margin: 0;
position: relative;
z-index: 1;
}
#nav li {
background: left center url(images/bullet.gif) no-repeat;
padding: 3px 0 8px 30px;
margin: 0;
}
#nav li:hover {
background: left center url(images/cd-anim.gif) no-repeat;
padding: 3px 0 8px 30px;
margin: 0;
}
#nav li#m1 { margin-left: 269px; }
#nav li#m2 { margin-left: 251px; }
#nav li#m3 { margin-left: 239px; }
#nav li#m4 { margin-left: 229px; }
#nav li#m5 { margin-left: 221px; }
#nav li#m6 { margin-left: 217px; }
#nav li#m7 { margin-left: 213px; }
#nav li#m8 { margin-left: 215px; }
#nav li#m9 { margin-left: 217px; }
#nav a {
font-weight: normal;
}
#search {
margin: 23px 0 0 600px;
}
#search h2 {
font-weight: normal;
}
#search form {
margin: 0;
padding: 0 0 10px 0;
}
#search input.text {
border: 1px solid #333;
background: #E7E4E4;
}
#search input.submit {
border: none;
background: #E7E4E4;
}
#search a {
color: #333;
padding: 0 5px;
}
#search a:hover {
color: #300;
}
#head {
background: url(images/header.jpg) no-repeat;
position: absolute;
top: 0;
left: 0;
width: 582px;
height: 370px;
}
#head-pip {
background: url(images/header_pip.jpg) no-repeat;
position: absolute;
top: 0;
left: 582px;
width: 48px;
height: 94px;
}
#body {
background: top left #EEEEEE url(images/body_bg.gif) repeat-y;
position: relative;
left: -10px;
width: 975px;
}
#body-inner {
padding: 28px 23px 28px 31px;
}
#body-inner .center{
position:relative;
left: 10%;
}
#body-left {
float: left;
width: 281px;
}
#body-right {
float: right;
width: 484px;
}
#topic-pic {
background: #666;
padding: 10px;
}
#body-inner h2
{
background: #1D702D;
font-size: 12px;
color: #fff;
padding: 6px 23px;
margin: 6px 0 60px 0;
}
#body-inner h3 {
font: 18px "arial narrow", arial, sans-serif;
}
#body-inner .box {
padding: 15px;
background: #fff;
border: 1px solid #999;
margin: 3em 100px 0 100px;
}
#body-inner .box2 {
width: 150px;
height: 350px;
padding: 15px;
background: #fff;
border: 1px solid #999;
}
#body-inner .box p {
margin: 0 0 1em 0;
}
#body-left h2 {
background: url(images/title.gif) no-repeat;
font-size: 12px;
color: #000;
padding: 6px 23px;
margin: 6px 0 10px 0;
}
#body-left ul {
margin: 30px 55px;
}
#body-left li {
margin: 5px;
}
#body-right .box {
padding: 15px;
background: #fff;
border: 1px solid #999;
margin: 3em 0;
}
#body-right h2 {
font: 18px "arial narrow", arial, sans-serif;
}
#body-right h1 {
background: #1D702D;
font-size: 12px;
color: #fff;
padding: 6px 23px;
margin: 6px 0 60px 0;
}
#body-right .box p {
margin: 0 0 1em 0;
}
#body-right .box .left {
margin-right: 15px;
border: 1px solid #999;
}
#body-right .box .btns {
text-align: right;
padding-top: 10px;
position: relative;
}
.btns a {
background: left #CC0000 url(images/btn.gif) repeat-y;
border: 2px solid #E68282;
border-color: #E68282 #650000 #650000 #9C2828;
color: #fff;
font-weight: normal;
padding: 3px 15px 3px 20px;
position: relative;
}
.btns a:hover {
background-color: #EF1818;
color: #fff;
}
#copyright {
background: top left url(images/footer.gif) no-repeat;
float: center;
width: 965px;
clear: both;
margin-right: 9px;
padding-bottom: 30px;
_margin-right: 5px;
}
#copyright-left {
padding: 27px 30px;
font-size: 11px;
text-align: center;
}
#copyright-right {
background: url(images/footer_right.jpg) no-repeat;
position: absolute;
top: 0px;
left: 425px;
width: 13px;
height: 57px;
}
a img{
border:none;
}
.min{
background:#456c35 none repeat scroll 0 0;
border-radius: 10px;
box-shadow: #666 0px 2px 3px;
float:left;
margin:0 4px 4px 0;
padding:7px;
position:relative;
height:112px;
width:215px;
margin-bottom:30px;
behavior: url(PIE.htc);
}
.min img{
position:relative;
width:100%;
}
.min:hover{
background-position:bottom left;
background:#3d5334 none repeat scroll 0 0;
}
.min:hover h3{
background:#3d5334 none repeat scroll 0 0;
bottom:0;
color:#FFF;
line-height:15px;
font-family:Arial;
font-size:9px;
font-weight:normal;
left:0;
margin:0;
width:215px;
display:block;
position:absolute;
}
.min h3{
display:none;
}
.min a{
display:block;
height:100%;
text-decoration:none;
position:relative;
width:100%;
overflow:hidden;
}Bonjour,
Je viens de tester ton lien sour Chrome et je n'ai pas de gallery du tout, même pas les flèches, tu es sur de l'avoir activé ?