|
By: Macbee
Date: 2006-07-05
Time: 12:10
|
Realiser une galerie de photos
Bonjour,
Encore merci pour ce moteur de template que j'ai découvre de jours en jours et apprécie sa puissance mais moins sa simplicité.
En effet, je voudrais réaliser une galerie photo qui est composée d'une ligne de photos miniatures, d'une photo de taille normale placé sous la ligne de miniature et d'un agrandissement pleine page.
Voici le code xHTML :
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><a href="images/big_photo1.png" title="Titre de la photo 1"><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></a></dd>
</dl>
</div>
|
Lorsque l'on survole une photo miniature, la photo de taille normal est actualisé grace à un script JS dont voila la source :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onmouseover = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
|
Pour améliorer la présentation, il est important de rajouter le code de la feuille de style :
div#galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 3px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 5px 0px ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
|
Je précise que ces sources sont libres de droit.
Voila pour le principe de construction de la galerie. Pour corser le tout, j'aimerais que le nombre de photos miniature soit paramétrable dans une variable $nb_col. Maintenant, j'aimerais intégrer dans ces sources TBS pour le chargement des photos.
Avez vous une idée pour réaliser cela ?
Merci de votre contribution. |
|
By: Macbee
Date: 2006-07-05
Time: 13:27
|
Re: Realiser une galerie de photos
Pour réaliser cette galerie, je suis parti de l'exemple décrit dans 'colonnes dynamiques' (voir post précédent).
Voici le code PHP (je passe les détails pour l'affichage des pages suivantes) :
//liste of column
$nb_row=1;
$nb_col=3;
columns = array();
for ($col=1;$col<=$nbr_col;$col++) {
columns[$col] = 'column_'.$col;
}
//create data
$i=1;
$data = array();
for ($row=1;$row<=$nbr_row;$row++) {
$record = array();
for ($col=1;$col<=$nbr_col;$col++) {
$record[columns[$col]]['image'] = $path . $pics[$i]['imagename']:"";
$record[columns[$col]]['big_image'] =$path."big_".$pics[$i]['imagename'];
$record[columns[$col]]['tn_image'] =$path . "tn_" . $pics[$i]['imagename'] ;
$record[columns[$col]]['title']=htmlentities(stripslashes($pics[$i]['title']),ENT_QUOTES,$use_charset);
$record[columns[$col]]['desc'] = htmlentities(stripslashes($pics[$i]['descr']),ENT_QUOTES,$use_charset);
$record[columns[$col]]['makeUrl']= $path . $pics[$i]['imagename'];
$i++;
}
$data[$row] = $record;
}
// Extension des colonnes
$TBS->MergeBlock('c1',$columns) ;
// Fusion des lignes
$TBS->MergeBlock('r',$data) ;
$TBS->Show() ;
|
Voici le code xHTML :
<div id="galerie">
<ul id="galerie_mini">[r;block=ul]
<li><a href="[r.[c1.val;block=li].file]" title="[r.[c1.val;block=li].title]"><img src="[r.[c1.val;block=li].tn_file]" alt="[r.[c1.val;block=li].title]" /></a></li>
</ul>
<dl id="photo">[r;block=dl]
<dt>Titre de la photo</dt>
<dd>
<a href="[r.[c1.val;block=dd].big_file]" title="[r.[c1.val;block=dd].title]">
<img id="big_pict" src="[r.[c1.val;block=dd].file]" alt="[r.[c1.val;block=dd].title]" />
</dd>
</dl>
</div>
|
Pour l'affichage des photos miniatures (tn_file), cela donne un bon résultat. Ma difficulté se situe sur la deuxième partie, l'affichage de la photo de taille normal (file) et du lien vers la photo agrandie (big_file).
Comme toutes les données sont dans le tableau $data j'ai pensé à utiliser le même bloc [r;block=ul] dans la deuxième partie [r;block=dl] avec [r.[c1.val;block=dl]...]. Je n'obtiens plus rien même plus l'affichage des miniatures.
Pourrais-je avoir des explications et surtout des conseils pour la suite du code ?
Encore une fois un grand Merci pour ce moteur de template.
Marc |
|
By: Skrol29
Date: 2006-07-05
Time: 13:43
|
Re: Realiser une galerie de photos
Bonjour,
Comment est établie la liste des photos miniatures ? S'agit-il de la liste des images présentes dans un répertoire, une liste fixe, une liste provenant d'une base de données ?
Quand tu dis que le nombre de photos miniatures est paramétrable, est-ce que cela veut dire qu'il faut pouvoir faire "glisser" la barre des miniatures vers d'autres pages (pécédent - suivant ?)
Il me semble déjà que ton modèle n'aura besoin que d'un bloc dynamique pour fusionner la barre miniature. En fonction des réponses aux questions ci-dessus, tu pourrais le faire avec un bloc simple ou une barre de navigation (voir plug-in NavBar). Quoi qu'il en soit tu devras établir la liste des miniatures du côté PHP.
Le changement de l'image principale peut se faire avec JavaScript avec ton code. c'est le mieux.
Pour l'affichage plein écran, il suffit de préparer un deuxième template qui sera chargé côté PHP si un certain paramètre GET est fourni avec l'id de l'image à afficher.
|
|
By: Skrol29
Date: 2006-07-05
Time: 13:45
|
Re: Realiser une galerie de photos
Pas besoin de colonnes dynamiques pour affiche une liste horizonale. Un petit "block=td" devrait suffir.
|
|
By: Macbee
Date: 2006-07-05
Time: 16:53
|
Re: Realiser une galerie de photos
La liste des photos miniatures est établie à partir d'une base de données qui contient les noms des fichiers, les titres, les descriptions, etc. Les photos (miniatures, photos et agrandissements) sont stockées dans un répertoire.
Quand je dis que je souhaite avoir le nombre de photos miniatures en paramétre, il s'agit, comme tu l'as bien compris, d'afficher un nombre de photos miniatures sur une ou plusieurs lignes avec une barre (précédent - ... - suivant).
Cette partie de code est déjà réalisée et fonctionne correctement. J'ai utilisé pour cela un bloc dynamique (en prenant exemple sur 'colonne dynamique') pour l'affichage des photos miniatures et le plugin barre de navigation pour les liens (précédent - ... - suivant).
Le changement d'image de taille normale s'effectue grace au code JS que j'ai cité plus haut et qui fonctionne correctement pour l'avoir testé seul.
Le souci est de renseigner les données de la première photo entre les balises <dd>. Peux-t-on réutiliser les données contenues dans la variable $data hors du bloc auquel il fait référence ?
Exemple :
<dl id="photo">[r;block=dl]
<dt>Titre de la photo</dt>
<dd>
<a href="[r.[c1.val;block=dd].big_file]" title="[r.[c1.val;block=dd].title]">
<img id="big_pict" src="[r.[c1.val;block=dd].file]" alt="[r.[c1.val;block=dd].title]" />
</dd>
</dl>
|
en remplaçant c1.val par c1.column_1 dans l'exemple.
J'ai essayé sans succès. |
|
By: Macbee
Date: 2006-07-06
Time: 19:10
|
Re: Realiser une galerie de photos
J'ai trouvé la solution.
En fait il s'agit d'une erreur de logique de ma part. La photo taille normal ne doit pas être inclus dans un bloc. Je dois simplement renseigner les valeurs par des variables passées dans TBS.
Merci encore Skrol pour tes conseils et chapeau pour cet outil merveilleux.
PS : La gallerie photos est quasiment terminée. Elle est intégrée dans le cms MODx (que je conseille de découvrir). Vous la trouverez dans le snippet MaxiGallery dans la version qui va sortir prochainement, celle qui intégre TBS.
|
|
Posting in progress.
Please wait...
|