Drupal : ajouter le module Lightbox2 à une gallerie d'images créée avec le module Image

J'en profite pour vous signaler une nouveauté sur mon blog : le MICHFlickr en haut à droite!!

Lightbox2 est à priori un super module compatible avec tous les modules d'image sur Drupal! Il doit, toujours à priori, automatiquement modifier les liens existants vers des images avec les paramètres qui vont bien pour qu'elles puissent s'afficher dans le viewer JS Lightbox2.

En pratique, rien du tout!

Je possède plusieurs galeries d'images créées avec le module Image, et Lightbox2 ne m'a pas changé les liens de ces galeries! Aidé par ici, j'ai alors entrepris de développer une page compatible avec Lightbox2 à l'image de celle affichant les galeries (/?q=image).

 Pour votre information, voici un extrait de ma Drupal config:

Cette configuration doit probablement planter avec l'outil "Automatic image gandling" de Lightbox2.

Je vous communique le code, parce qu'à la vue des premiers résultats Google, ça peut intéresser du monde!

<style type="text/css" media="all">
    ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$result = db_query ("SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td");
while ($img = db_fetch_object($result)) {
    echo "<li class=\"subgalleries clear-block\">";
    echo "<h3>".$img->name."</h3>";
    echo "<div class=\"description\"><p>".$img->description."</p></div>";
    echo "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        echo "<li style='width : 100px;'>";
        echo "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        echo "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title."\">".$subimg->title."</a></h3>";
        echo "</li>";
    }
    echo "</ul>";
    echo "</li>";
}
?>
</ul>

Ce code est à insérer en PHP code dans une page par exemple.

EDIT 1 : Affichage des paramètres EXIF

<style type="text/css" media="all">
   ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$result = db_query ("SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td");
while ($img = db_fetch_object($result)) {
    echo "<li class=\"subgalleries clear-block\">";
    echo "<h3>".$img->name."</h3>";
    echo "<div class=\"description\"><p>".$img->description."</p></div>";
    echo "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        $res_exif = "";
        if(in_array(strtolower(end(explode('.', $_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath))), array('jpg', 'jpeg', 'tif', 'tiff'))){
            if($exif = exif_read_data($_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath, EXIF, true)){
                $res_exif = "<br />";
                $exif_tab = Array();
                foreach ($exif as $key => $section){
                    foreach ($section as $name => $value){
                        $exif_tab[$name] .= $value;
                    }
                }
                if($exif_tab['FocalLength']){
                    $focale = round($exif_tab['FocalLength'], 0)/10;
                    $focale = $focale." mm";
                }
                if($exif_tab['Make'])
                    $marque = $exif_tab['Make'];
                if($exif_tab['Model'])
                    $modele = $exif_tab['Model'];
                if($exif_tab['ExposureTime'])
                    $vit_obt = $exif_tab['ExposureTime']." s";
                if($exif_tab['ISOSpeedRatings'])
                    $iso = $exif_tab['ISOSpeedRatings'];
                if($exif_tab['ApertureFNumber'])
                    $ouverture = $exif_tab['ApertureFNumber'];
                $res_exif .= "<span style='font-size:7px'>Focale: <i>".$focale."</i> | Ouverture <i>".$ouverture."</i> | Vitesse d'obturation: <i>".$vit_obt."</i> | ISO: <i>".$iso."</i></span>";
            }
        }
        echo "<li style='width : 100px;'>";
        echo "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        echo "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\">".$subimg->title."</a></h3>";
        echo "</li>";
    }
    echo "</ul>";
    echo "</li>";
}
?>
</ul>

EDIT 2 : Pagination

<style type="text/css" media="all">
    ul.galleries{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.galleries li.subgalleries {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:#EEEEEE none repeat scroll 0 0;
        border:1px solid #CCCCCC;
        margin:1em 0;
        padding:1em;
        position:relative;
    }
    ul.images {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    ul.images li {
        -moz-background-clip:border;
        -moz-background-inline-policy:continuous;
        -moz-background-origin:padding;
        background:transparent none repeat scroll 0 0;
        float:left;
        margin:1em 2em 1em 0;
        padding:0;
        width : 100px;
        height: 166px;
    }
    ul.images li h3{
        font-size:1em;
    }
</style>
<ul class="galleries">
<?php
$sql = "SELECT td.tid AS tid, td.name AS name, td.description AS description FROM {term_data} td ORDER BY td.tid DESC";
$result = pager_query(db_rewrite_sql($sql), 3);
while ($img = db_fetch_object($result)) {
    print "<li class=\"subgalleries clear-block\">";
    print "<h3>".$img->name."</h3>";
    print "<div class=\"description\"><p>".$img->description."</p></div>";
    print "<ul class=\"images clear-block\">";
    $gallery_tid=$img->tid;
    $subresult = db_query ("SELECT n.title AS title, f1.filepath AS originalpath, f2.filepath AS thumbpath FROM {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn WHERE tn.tid=%d AND i.nid=tn.nid  AND i.image_size='_original' AND i2.image_size='thumbnail' AND n.nid=tn.nid AND f1.fid=i.fid AND f2.fid=i2.fid AND i.nid=i2.nid", $gallery_tid);
    while ($subimg = db_fetch_object($subresult)) {
        $res_exif = "";
        if(in_array(strtolower(end(explode('.', $_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath))), array('jpg', 'jpeg', 'tif', 'tiff'))){ // Si fichier Jpeg ou Tiff
            if($exif = exif_read_data($_SERVER['DOCUMENT_ROOT']."/blog/".$subimg->originalpath, EXIF, true)){ // Si le fichier $img contient des infos Exif
                $res_exif = "<br />";
                $exif_tab = Array();
                foreach ($exif as $key => $section){ // On parcourt la première partie du tableau multidimensionnel
                    foreach ($section as $name => $value){ // On parcourt la seconde partie
                        $exif_tab[$name] .= $value; // Récupération des valeurs dans le tableau $exif_tab
                    }
                }
                if($exif_tab['FocalLength']){ // Si les données de la distance focale existent
                    $focale = round($exif_tab['FocalLength'], 0)/10; // j'arrondis la valeur
                    $focale = $focale." mm"; // Je rajoute l'unité millimètre
                }
                if($exif_tab['Make']) // Marque de l'appareil
                    $marque = $exif_tab['Make'];
                if($exif_tab['Model'])// Modèle de l'appareil
                    $modele = $exif_tab['Model'];
                if($exif_tab['ExposureTime'])// Vitesse d'obturation
                    $vit_obt = $exif_tab['ExposureTime']." s";
                if($exif_tab['ISOSpeedRatings']) // Valeur iso
                    $iso = $exif_tab['ISOSpeedRatings'];
                if($exif_tab['ApertureFNumber'])//valeur ouverture
                    $ouverture = $exif_tab['ApertureFNumber'];
                $res_exif .= "<span style='font-size:7px'>Focale: <i>".$focale."</i> | Ouverture <i>".$ouverture."</i> | Vitesse d'obturation: <i>".$vit_obt."</i> | ISO: <i>".$iso."</i></span>";
            }
        }
        print "<li>";
        print "    <a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\"><img src=\"/blog/".$subimg->thumbpath."\" width=\"100\" title=\"".$subimg->title."\"/></a>";
        print "    <h3><a href=\"/blog/".$subimg->originalpath."\" rel=\"lightshow[".$img->name."]\" title=\"".$subimg->title.$res_exif."\">".$subimg->title."</a></h3>";
        print "</li>";
    }
    print "</ul>";
    print "</li>";
}
?>
</ul>
<?php
    print theme('pager', NULL, 5);
?>

Commentaires

Poster un nouveau commentaire

Le contenu de ce champ ne sera pas montré publiquement.
Image CAPTCHA
Entrez les caractères affichés sur l'image sans espaces.
Syndiquer le contenu