Oki , allora traduco letteralmente dal creatore
pbasmoSalve, ho creato questo questo codice integrato nel mio sito :
http://pierre.basmoreau.free.fr/E’ un codice java disponibile gratuitamente qua :
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htmche ho adattato per integrarlo in Coppermine.
(questo sito è una vera miniera d’oro per tutti gli sviluppatori, visitatelo!)
Questo script permette di scegliere in maniera aleatoria un certo numero di immagini già presenti nel vostro db di Coppermine (15 di base) e di creare un slidebar (farle scorrere) da destra verso sinistra , potendo scegliere la posizione che preferite nella Gallerie.
Ogni immagine dello slider è collegata a quella di origine dell’album. Un click e la apre con tutte le informazioni all’interno dell’album stesso.
A ogni refresh della pagina, una nuova serie di immagini viene caricata.
Questo è lo script completo da inserire nella cartella principale del vostro sito di Coppermine , che copiate, incollate su block notes e salvate come : slider.php
(occhio scrivete anche l’estensione perché altrimenti ve lo salva come txt )
<?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>
Vi sono due modi per utilizzarlo.
Il primo che ho utilizzato io ve lo mette direttamente sopra lista album ecc.
Vedi :
www.monicafiore.altervista.org/my_monicafioreEd è la maniera più semplice, da integrare nello script “anycontent.php”.
In questo caso andate in configurazione-> visualizzazione lista album-> contenuto pagina principale_>e scrivete anycontent/
(senza cancellare le altre opzioni che eventualmente già avete
)
Poi andate nella cartella vostra di coppermine , e nel file 'anycontent.php'
aggiungete come da sotto solo la stringa : include "slider.php";
if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');
starttable("100%", "Welcome");
include "slider.php";
?>
<tr><td class="tableb" >
</td></tr>
<?php
endtable();
?>
Seconda parte per posizionarlo dove si vuole /includerlo in un tema
By il Creatore lui ha utilizzato, questo ,e lo slidebar si trova sulla pagina in alto .
Attenzione : non modificare il file include/themes.inc.php, se non come scritto sotto e cmq , salvatevi il file prima in una altra cartella per sicurezza, in caso di sbagli, fate copy e paste e bon , costa nulla e siete tranquilli in caso di errori
Ecco il codice che ha inserito subito prima del tag ?> )l’originale di questo codice si trova alla linea 1181 del themes.inc.php)
[b]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);
}[/b]
Le due linee specifiche dello slider sono evidenziate. Utilizza una variabile
$bandeau e {BANDEAU}.
In questo momento, le bandeau non é ancora visibile. Bisogna aggiungere la variabile {BANDEAU} nel template.html, nel posto scelto .
• template.html
per sistemare il bandeau , basta indicare {BANDEAU} nel punto in cui lo si vuole. Magari ci vogliono più tentativi , se si vuole posizionarlo in posto preciso
p.s. 2 pour pbasmo et meme Franz ..argh , J’espère d’avoir fait une bonne traduction ……..(http://www.news3d.eu/Smileys/News3D/aargh.gifé)
Author
Topic: Slidebar veramente bello imho con molte opzioni [by pbasmo] (Read 13932 times)