Forum ZitePLUS

mon-adc

Membre

Inscription : 09/11/2010

Messages : 19

slide show avec lien url ou grande image

Bonjour
un petit script a copier coller dans une page type php
le code est amplement commenté
vous pouvez créer un slide show avec des liens externe vers une url ou un lien vers une image plus grande

il suffit de peut de connaissance en javascript et html suivez les indications des commentaires dans le script
Bon amusement
Mon-Adc

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<center>
<script type="text/javascript">
// largeur du diaporama (en pixel)doit correspondre a la largeur des images
var sliderwidth="300px"
// hauteur du diaporama (en pixel) doit correspondre a la hauteur des images pour l'estetique les images doivent avoir la meme taille
var sliderheight="225px"
// vitesse de défilement (de 1 à 10)
var slidespeed=2
// couleur du fond
slidebgcolor="#EAEAEA"

// SPECIFICATIONS DU CARROUSEL : chemin des images
// Vous pouvez rendre l'image cliquable
//lien dans <a href="url""> si l'interieur de url n'est pas rempli pas de lien
//vous pouvez afficher une image plus grande sur le lien en tapant le chemin suivant "view.php/grandeimage.png"
//pour le chemin des img mettre view.php/ devant le nom de l'image contenue dans le dossier document
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.premier-lien.com/"><img src="view.php/1.jpg" border=0></a>'
leftrightslide[1]='<a href="http://www.deuxieme-lien.fr/"><img src="view.php/2.jpg" border=0></a>'
leftrightslide[2]='<a href="http://troisieme-lien.org/"><img src="view.php/3.jpg" border=0></a>'
leftrightslide[3]='<a href="http://enieme-lien.net/"><img src="view.php/4.jpg" border=0></a>'
//vous pouvez ajouter autant d image que vous voulez copier coller la ligne precedante sans oublier d incrementer le chiffre entre crochet de 1
// Spécifiez l'espace entre chaque image (se servir du HTML):
var imagegap=""

// Spécifiez le nombre de pixels/espace entre chaque rotation du carrousel (nombre entier)
var slideshowgap=300

////NE RIEN EDITER A PARTIR D'ICI////////////

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

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)
}
window.onload=fillup

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){
document.write('<table border="5" cellspacing="0" cellpadding="0"><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;center:-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>
</center>

Super_chemist

Membre

Inscription : 27/05/2011

Messages : 417

Re : slide show avec lien url ou grande image

Salut

Dans le même genre, tu as les modules zdiaporama http://www.zitecms.org/zite/forum/viewtopic.php?id=997 et fdiapo http://www.zitecms.org/zite/forum/viewtopic.php?id=1011 que snypi et moi on a développé cet été.

Les dernières versions sont intégrées à tinymce, il suffit d'attribuer les images à une "rubrique" de ziteplus, puis de cliquer sur une icone intégrée dans tinymce...

Le développement est un peu en standby actuellement (j'attends la 092 finale), mais n'hésite pas à nous faire part de tes remarques si tu les utilises !

A+