Bonjour,
Je voudrais vous faire profiter d'un petit slider que j'ai intégré dans mon site. Vous pouvez en voir le résultat à
http://pierre.basmoreau.free.frEn réalité il s'agit d'un code Javascript disponible gratuitement à
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm que j'ai adapté pour l'intégrer dans coppermine. Ce site (dynamicdrive) est une vraie mine d'or pour les développeurs et mérite le détour.
Au final, le script permet de choisir de manière aléatoire un certain nombre d'images présentes dans la base (15 par défaut) et de les faire défiler (scrolling) de droite à gauche à un emplacement déterminé.
Chaque image du slider dispose d'un lien qui permet d'accèder à l'image compléte dans l'album.
A chaque rafraichissement de la page, une nouvelle série d'images est recalculée.
J'avais essayé le mod "
Image Scroller based on Filmstrip", mais je voulais un slider moins important en occupation d'écran.
Voici donc le script complet appelé "
slider.php" que vous placerez à la racine de votre site :
<?php
/****************************************************************************
slider.php
Ce script permet de choisir aléatoirement des images présentes dans la base
et d'en faire un slider.
Chaque image est 'clickable' et possède un lien pour accéder à l'image de l'album.
Un code javascript fourni par Dynamic Drive at http://www.dynamicdrive.com
a été adapté pour l'insérer dans le portail Coppermine.
*****************************************************************************/
// Initialisation
define('IN_COPPERMINE', true);
//Pour TESTER le script dans coppermine, activer la ligne ci-dessous et appeler le script pas http://votre-site/slider.php
//require('include/init.inc.php');
//Pour intégrer le script dans coppermine, il est impératif de désactiver la ligne.
?>
<script type="text/javascript">
/**********************************************************************************************
* Le code initial a été coupé en 2 parties :
* 1ere partie du javascript : initialisation des variables
***********************************************************************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**********************************************************************************************/
//Specify the slider's width (in pixels)
var sliderwidth="1000px"
//Specify the slider's height (par défaut hauteur des images thumb en paysage)
var sliderheight="75px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color: ne rien mettre = couleur transparente et s'adapte a la couleur du theme
slidebgcolor=""
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
</script>
<?php
/******************************************************************************
Code PHP qui permet de :
- de lire les images de manière aléatoire dans la base de données
- d'alimenter le tableau leftrightslide initialisé dans le code javascript ci-dessus
- d'adapter la hauteur de la zone sur la hauteur maxi des images lues (75px ou 100px)
*******************************************************************************/
// Nombre maxi d'images à intégrer au scrolling
$limit=15;
// Requete à executer dans la base
$query = "SELECT * FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' ORDER BY RAND() LIMIT $limit";
// Réception du résultat
$result = cpg_db_query($query);
// Tableau de valeurs pour lecture des infos de chaque image
$rowset = array();
// Index du tableau
$i=0;
// Hauteur maxi des images : sera 75px ou 100px
$max_height=0;
// Pour chaque image.....
echo "<script type=\"text/javascript\">"."\n";
while($row = mysql_fetch_array($result)){
// Lecture du pid de l'image (numéro d'enregistrement dans le fichier)
$key=$row['pid'];
// Lecture de la hauteur de la vignette
$image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);
// Calcul de la hauteur maxi de la zone déroulante (par défaut = 75px)
if ($image_size['height'] > $max_height) {
$max_height = $image_size['height'];
}
// Chemin d'accès à l'image
$file="albums/".$row['filepath']."thumb_".$row['filename'];
// Lien pour accèder a l'image dans un clic du scrolling
$lien="<a href=\"displayimage.php?album=random&cat=0&pos=-$key\"><img src=\"".$file."\" border=0></a>";
// On construit le code Javascript
// Le tableau javascript initialisé plus haut est alimenté par la chaine : lien + chemin
echo "leftrightslide[".$i."]='".$lien."'"."\n";
$i=$i+1;
}
//Adapte la hauteur de la zone de scroll à la hauteur maxi des images (variable déja initialisée en javascript)
echo "sliderheight=\"".$max_height."px\""."\n";
echo "</script>"."\n";
// On libère la mémoire
mysql_free_result($result);
/******************************************************************************
Fin du code PHP
*******************************************************************************/
?>
<script type="text/javascript">
// *****************************************************************
// 2eme partie du code Javascript initial
// Ici rien n'a été modifié
// *****************************************************************
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
window.onload=fillup
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
// J'ai ajouté la propriété alignement du tableau au centre. Adapter au besoin à gauche(left) ou à droite (right)
document.write('<table border="0" cellspacing="0" cellpadding="0" align="center"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
Il y a 2 manières de l'utiliser :
Intégration dans le script 'anycontent.php'C'est la manière la plus simple. Voici le code final du script 'anycontent.php' :
if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');
starttable("100%", "Welcome");
include "slider.php";
?>
<tr><td class="tableb" >
</td></tr>
<?php
endtable();
?>
Il suffit de mettre la ligne d'include ....
A condition que la configuration de votre site permette l'affichage de cette section 'anycontent' (dans les outils d'administration : configuration -> Affichage de la liste des albums -> Contenu de la page principale : anycontent/catlist/alblist par exemple), le slider apparaîtra au-dessus de la liste des Catégories (ou des Albums)
Intégration du Slider dans un thèmePour ma part, c'est la solution que j'ai choisi :
J'utilise actuellement le thème "
Rainy Day" et le Slider se trouve dans l'en-tête de page.
Mais pour ce faire, il faut modifier 2 scripts dans le répertoire du thème :
En cherchant un peu (car il faut chercher un peu
) j'ai trouvé le code à insérer pour tenir compte du Slider.
(pour la petite histoire, j'avais modifié le fichier include/
themes.inc.php mais
il est formellement déconseillé de le faire sous peine de perdre les modifications lors d'une mise à jour ultérieure de coppermine
merci Frantz ! )
Voici le code que j'ai inséré juste avant le tag ?> (l'original de ce code se trouve à la ligne 1181 de themes.inc.php):
function pageheader($section, $meta = '')
{
global $CONFIG, $THEME_DIR;
global $template_header, $lang_charset, $lang_text_dir;
$custom_header = cpg_get_custom_include($CONFIG['custom_header_path']);
// Intégration du slider dans le theme. On définit une variable $bandeau qui contiendra le code final du slider
$bandeau=cpg_get_custom_include("slider.php");
$charset = ($CONFIG['charset'] == 'language file') ? $lang_charset : $CONFIG['charset'];
header('P3P: CP="CAO DSP COR CURa ADMa DEVa OUR IND PHY ONL UNI COM NAV INT DEM PRE"');
header("Content-Type: text/html; charset=$charset");
user_save_profile();
$template_vars = array('{LANG_DIR}' => $lang_text_dir,
'{TITLE}' => $CONFIG['gallery_name'] . ' - ' . strip_tags(bb_decode($section)),
'{CHARSET}' => $charset,
'{META}' => $meta,
'{GAL_NAME}' => $CONFIG['gallery_name'],
// Ajout du bandeau
'{BANDEAU}' => $bandeau,
'{GAL_DESCRIPTION}' => $CONFIG['gallery_description'],
'{SYS_MENU}' => theme_main_menu('sys_menu'),
'{SUB_MENU}' => theme_main_menu('sub_menu'),
'{ADMIN_MENU}' => theme_admin_mode_menu(),
'{CUSTOM_HEADER}' => $custom_header,
);
echo template_eval($template_header, $template_vars);
}
Les 2 lignes spécifiques au Slider sont annotées. J'utilise une variable $bandeau et {BANDEAU}.
A ce stade, le bandeau n'apparaîtra pas encore. Il faut ajouter la variable {BANDEAU} dans le template.html, à l'emplacement choisi.
Pour placer le bandeau, il suffit d'indiquer {BANDEAU} à l'emplacement désiré. Plusieurs essais ont été nécessaires pour trouver l'emplacement idéal (à mon goût bien sûr).
En espérant avoit été clair dans mes explications...
Bon scroll à tous
Author
Topic: Slider dans coppermine (Read 48782 times)