Forum : zoombox sous firefox

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;
}

zoombox sous firefox

3 réponses