php + jquery + zoombox

JaxX
Javascript

Bonjour à tous,

J'essaie de faire une galerie multiple, en ajoutant le module zoombox de Grafikart sur une galerie qui est générée en listant en php un dossier qui se trouve sur le serveur.

Je vais essayer de décrire les étapes du script pour être plus clair :

1 - php liste le contenu d'un dossier
2 - il génère les vignettes
3 - en javascript/jQuery au click sur la vignette ça affiche l'image en taille 'medium' dans un contener.
4 - au clic sur l'image 'medium' ça lance zoombox

Je cherche à faire en sorte à ce que l'image actuellement dans le contener 'medium' ne soit plus listé par zoombox afin qu'elle ne se retrouve pas en doublon.

Le problème c'est qu'il semble que ZoomBox (ainsi que l'autre galerie), liste les class"zoombox" au chargement de la page et non au moment du click sur l'image medium. Pourtant ZoomBox prend bien en compte la nouvelle image qui se trouve dans 'medium'... :'{

Voici où j'en suis actuellement :

[code]
<?
// fonction qui me permet de switcher entre Zoombox et touch-gallery en cas de mobile--------------
include 'mobilDetect.php';
$detect = new Mobile_Detect();
// fonction qui me permet de switcher entre Zoombox et touch-gallery en cas de mobile--------------

// définition dynamique des albums----------------------
$dosHD = "galeries/".$galerie."/hd/";
$dosMed = "galeries/".$galerie."/medium/";
$dosMin = "galeries/".$galerie."/min/";
// définition dynamique des albums----------------------

// lecture des contenus des albums
if ( file_exists ($dosHD) )
{
$liste_rep = scandir($dosHD);
$i = 0;
$num = count($liste_rep);

//affichage des miniatures
$minTab="";
$minTab.= '<div class="thumbs">';

 while($i < $num)
{
          // fonction rewriting du tuto 'génération de vignette à la volée' de Grafikart--------------
    $miniatureF = preg_replace ('/.jpg/','_60x60.jpg',$liste_rep[$i]);
    $viewerImg = preg_replace ('/.jpg/','_450x300.jpg',$liste_rep[$i]);
          // fonction rewriting du tuto 'génération de vignette à la volée' de Grafikart--------------

     // extensions autorisées jpg, jpeg, png pour le listing des images du dossier--------------
    $allow_ext = array ("jpg");
    $ext = strtolower (substr ($liste_rep[$i],-3));
    if (in_array ($ext, $allow_ext))
    {
        //afficher les miniatures-----------------------------------------------------------------
        $minTab .=  '
        <div class="minGalerie" >
        <a href="'.$dosMed.$viewerImg.'" class="lienMin" rel="'.$dosHD.$liste_rep[$i].'">
            <img src="'.$dosMin.$miniatureF.'" width="100%" />
        </a>

                 // liens masqué en css pour le listing de zoombox-------------------------------------
                    <a href="'.$dosHD.$liste_rep[$i].'" class="zoombox zgallery1 cache" id="'.$i.'" >
                    <img src="css/images/spacer.gif" width="1px" height="1px" />
                    </a>
                 // liens masqué en css pour le listing de zoombox-------------------------------------

                    </div>';
    }
     $i++;
};

$minTab.= '</div>';

$minTab.= '

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

// Fonction d'affichage de l'image 'medium' au click sur la vignette-----------------------------------
$(function()
{

    // initialisation pour la première image---------------
$(\'#contener img\').hide();
var PremsImg = $(\'.lienMin:lt(1)\').attr("href");
var PremsHDImg = $(\'.lienMin:lt(1)\').attr("rel");

$(\'#contener img\').attr("src", PremsImg) ;
$(\'#contener a\').attr("href", PremsHDImg) ;

$(\'#contener img\').fadeIn(1500);

$(\'.lienMin:lt(1) img\').css("border", "'.$color.' 6px solid" );
$(\'.lienMin:lt(1) img\').css("width", "70%" );
    // initialisation pour la première image---------------

    // Fonction d'affichage de l'image 'medium' au click sur la vignette-----------
$(\'.lienMin\').click(function(){
    $(\'#contener img\').hide();
    var URLImgViewer = (this);
    var HDImg = $(this).attr("rel");
    //$(\'#contener\').text(URLImgViewer);
    $(\'#contener img\').attr("src", URLImgViewer) ;
    $(\'#contener a\').attr("href", HDImg) ;
    $(\'#contener a\').attr("class", "zoombox zgallery1") ;
    $(\'#contener img\').fadeIn(1500);
    $(\'.lienMin img\').css("border", "'.$color.' 0px solid");
    $(\'.lienMin img\').css("width", "100%" );
    $(this).children("img:first").css("border", "'.$color.' 6px solid" );
    $(this).children("img:first").css("width", "70%" );
    // Fonction d'affichage de l'image 'medium' au click sur la vignette-----------

//ici ma commande qui supprime la class zoombox sur la vignette cliqué.
$(this).next("a").removeClass ( "zoombox zgallery1") ;

    return false;

});

//---------------------------------------------------------------------------------------------
/ concept :
1 - Lors du clique sur une miniature le contener de la version medium de l\'image est affichée,
2 - On identifie l\'image qui a été cliquée pour retirer la class zoombox à l\'élément qui vient d\'être cliqué,
3 - Au click suivant sur une autre image on ré-attribut la class zoombox à l\'élément à qui on vient de la supprimer.
Résultat : l\'image est retiré de la liste des image à traiter par zoombox dans les différentes galeries
/

//---------------------------------------------------------------------------------------------
//réccupère l\'identifiant de la dernière balise sélcetionnée-------------------------------
var CurrId = $(\'#contener a\').attr("href");

$(this).next("a").css("border", "red 10px solid");

//$(\'#contener\').text(CurrId);
//alert ("coucou");
//var LastImg = "";
//réccupère l\'identifiant de la dernière balise sélcetionnée-------------------------------

});

});
</script>
';
}

if ($detect->isMobile()|| ($detect->isTablet()))
{
//<h1> Mobile </h1>
$minTab .= '
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touch-gallery-1.0.0.js"></script>
<script>
$(\'a.zoombox\').touchGallery();
</script>
';
} else
{
// appel de la fonction ZoomBox====================================================================================================
//<h1> Desktop</h1>
$minTab .= '
<script type="text/javascript" src="http://grafikart.fr/js/main.js"></script>
<script type="text/javascript" src="js/Grafikart-Zoombox/zoombox.js"></script>
<link href="js/Grafikart-Zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
jQuery(function($){
$(\'a.zoombox\').zoombox();
});
</script>
';
}
?>
[/code]

Pour vous donner une idée voici le lien de la page sur laquelle je travaille :
http://www.alpagesdauguste.com/beta_2012/photo-appartement.php?appartement=galta

Merci d'avance pour ceux qui auront eu le courage de m'aider ;)

Aucune réponse