PluXml.org

ajoutez ce morceau de code:(Edit)

                
		<script src="<?php $plxShow->template(); ?>/lightbox2.5/js/jquery-1.7.2.min.js"></script>
                <script src="<?php $plxShow->template(); ?>/lightbox2.5/js/lightbox.js"></script>
                <link href="<?php $plxShow->template(); ?>/lightbox2.5/css/lightbox.css" rel="stylesheet" />
                <style type='text/css'>
                    .gal {
                        margin-top:25px;
                        margin-left:75px;
                    }
                    .pic{
                        float:left;
                        margin:5px 5px 5px 5px;
                        border:0px none transparent;
                        width:120px;
                        height:120px;
                        box-shadow: 0px 0px 0px #666 inset;
                        -o-box-shadow: 0px 0px 0px #666 inset;
                        -ms-box-shadow: 0px 0px 0px #666 inset;
                        -moz-box-shadow: 0px 0px 0px #666 inset;
                        -khtml-box-shadow: 0px 0px 0px #666 inset;
                        -webkit-box-shadow: 0px 0px 0px #666 inset;
                        border-radius: 5px;
                        -o-border-radius: 5px;
                        -ms-border-radius: 5px;
                        -moz-border-radius: 5px;
                        -khtml-border-radius: 5px;
                        -webkit-border-radius: 5px;
                        transition: box-shadow 250ms linear;
                        -o-transition: -o-box-shadow 250ms linear;
                        -ms-transition: -ms-box-shadow 250ms linear;
                        -moz-transition: -moz-box-shadow 250ms linear;
                        -khtml-transition: -khtml-box-shadow 250ms linear;
                        -webkit-transition: -webkit-box-shadow 250ms linear;
                    }
                    .pic:hover{
                        box-shadow: 3px 3px 5px #666 inset;
                        -o-box-shadow: 3px 3px 5px #666 inset;
                        -ms-box-shadow: 3px 3px 5px #666 inset;
                        -moz-box-shadow: 3px 3px 5px #666 inset;
                        -khtml-box-shadow: 3px 3px 5px #666 inset;
                        -webkit-box-shadow: 3px 3px 5px #666 inset;
                    }
                    .pic a{
                        width:120px;
                        height:120px;
                        text-indent:-99999px;
                        display:block;}
                    .pic a, .pic a:visited {outline:none;}
                </style>
	        <?php 
	            $_get=plxUtils::getGets(); 
		    $id=explode('/',$_get); 
	            $directory = 'data/images/'.$id[1];	//where the gallery images are located
                    $allowed_types=array('jpg','jpeg','gif','png');	//allowed image types

                    $file_parts=array();
                    $ext='';
                    $title='';
                    $i=0;

                    //try to open the directory
                    $dir_handle = @opendir($directory) or die("There is an error with your image directory!");

                    echo '<div class="gal">';
                    while ($file = readdir($dir_handle))	//traverse through the files
                    {
	                    if($file=='.' || $file == '..') continue;	//skip links to the current and parent directories

	                    $file_parts = explode('.',$file);	//split the file name and put each part in an array
	                    $ext = strtolower(array_pop($file_parts));	//the last element is the extension
	                    $title_origin = implode('.',$file_parts);	//once the extension has been popped out, all that is left is the file name
	                    $title = htmlspecialchars($title_origin);	//make the filename html-safe to prevent potential security issues
	                    $nomargin='';
	                    if(in_array($ext,$allowed_types) and !in_array('tb',$file_parts))	//if the extension is an allowable type
	                    {
		                    if(($i+1)%4==0) $nomargin='nomargin';	//the last image on the row is assigned the CSS class "nomargin"
                            echo '
                    		<div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$title_origin.'.tb.'.$ext.') no-repeat 50% 50%;">
                    		<a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank" rel="lightbox[roadtrip]">'.$title.'</a>
                    		</div>';
		                    $i++;	//increment the image counter
	                    } 
                    }
                    echo '</div>';
                ?>
                

vous constaterez que j'utilise lightbox2.5 pour cet exemple, le dossier lightbox2.5 doit se trouver dans le dossier de votre thème.

Création d'une page statique:(Edit)

À partir de là, le processus est simple. À la création d'une page statique nommez la page, dans le champs URL, mettez galerie-1 et cliquez sur Modifier la liste des pages statiques

Une fois ajouté, cliquez sur le lien Éditer de votre nouvelle page. Dans template, choisissez static-galery.php, éditez votre page et sauvegardez le tout.

Administration de la galerie(Edit)

Maintenant, allons dans l'administration des médias et plus précisément dans les images. A la racine ajoutez un dossier nommé galerie-1 comme le champ URL de notre page statique.

Dans ce dossier, ajoutez les photos que vous voulez.

Et voilà votre galerie est prête, et on a même droit à une zone admin pour la gérer :)

je précise que le code php et une adaptation d'un script vu sur la toile qui traitait de galerie photos avec Shadowbox sur pluxml.

++ BeHuman