Galeries, Diaporamas & SlideShows

Faire un carrousel vertical

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Table des matières

Insertion dans le Head
Insertion dans le Body
Détails paramétrables du script:
Démonstration:

un second script avec défilement multi-directionnel, pour présenter des images sur votre site/blog.

Insertion dans le Head

Voici le code à insérer dans votre page HTML entre les balises
<head> et </head> :

Code JAVASCRIPT :

<script type="text/javascript" 
 
title="Carrousel_vertical">
// Carousel Slideshow II - By Harry Armadillo
 
 
 
function carousel(params){
 
 
 
 
  if(!(params.width>0 && isFinite(params.width)))params.width=200; 
 
//Réglez la largeur via celle de vos images. 
  if(!(params.height>0 
 
&& isFinite(params.height)))params.height=150; //Réglez la hauteur via celle 
 
de vos images.
  if(!(params.sides>2 && 
 
isFinite(params.sides)))params.sides=4;  
  if(!(params.steps>0 
 
&& params.steps<100 && isFinite(params.steps)))params.steps=20;   
 
 
if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
 
 
  if(!(params.image_border_width>=0 && 
 
isFinite(params.image_border_width)))params.image_border_width=0;  
 
 
 
 
if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random()
 
;  
 
 
 
 
 
 
 
  document.write("<div style='position:relative;overflow:hidden;' 
 
id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
  var 
 
cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
 
 
 cdiv.style.width=params.width+'px';
 
 
  cdiv.style.height=params.height+'px';
 
 
 
 
cdiv.style.border=params.border;
 
 
  cdiv.style.position='relative';
 
 
 
 
  cdiv.style.overflow='hidden';
 
 
  cdiv.title=params.id;
 
 
 
 
 
 
 
 
 
  var 
 
counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/
 
params.speed)-5;  
  interval=isNaN(interval)?200:interval;
 
 
  var 
 
img_position=[],images=[],img_dimension=[];
 
 
  var 
 
img_index=params.images.length+1,img_index_cap=2*params.images.length;  
 
 
  var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, 
 
faraway;
 
 
 
 
 
  function init(){
 
 
 
 
if(params.direction=="left" || params.direction=="right"){  
 
 
      direction=params.direction;
 
 
      dimension="width";
 
 
 
 
}
 
 
    else 
 
if(params.direction=="top" || params.direction=="bottom"){ 
 
 
direction=params.direction;
 
 
      dimension="height";
 
 
      }
 
 
 
 
    else {
 
 
 
 
      direction="left";
 
 
      dimension="width";
 
 
 
 
      }      
 
 
 
 
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
 
 
 
 
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.si
 
n(Math.PI/params.sides):1)+'px';
    var img=new Image();
 
 
 
 
    img.style.position='absolute';
 
 
 
 
img.style[direction]=faraway;
 
 
 
 
img.style.width=params.width-2*params.image_border_width+'px'; 
 
 
    img.style.height=params.height-2*params.image_border_width+'px';
 
 
    img.style.border=(params.image_border_width||0)+'px solid 
 
'+params.image_border_color;  
 
 
 
 
 
    for(var i=0;i<params.images.length;i++){
 
 
 
 
images[i]=img.cloneNode(true);
 
 
      images[i].src=params.images[i];
 
 
      if(params.links && 
 
params.links[i] && params.links[i]!=''){
 
 
targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new'; 
 
 
        if(targ=="_blank"){
 
 
 
 
attr=(params.lnk_attr && 
 
params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";  
 
 
images[i].onclick=new 
 
Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");  
 
 
         }
 
 
 
 
        else if(targ.substr(0,1)=="_"){
 
 
 
 
          images[i].onclick=new 
 
Function(targ.substr(1)+".location='"+params.links[i]+"'");   
 
 
 }
 
 
        else{
 
 
 
 
 
 
attr=(params.lnk_attr && 
 
params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; 
 
 
images[i].onclick=new Function("var 
 
t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=wind
 
ow.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
 
 
}
 
 
        images[i].style.cursor=document.all?'hand':'pointer'; 
 
 
       }
 
 
 
 
 
if(params.titles && params.titles[i] && params.titles[i]!='')   
 
 
 images[i].title=params.titles[i];
      if(document.all)
 
 
        images[i].alt=images[i].title;
 
 
images[i+params.images.length]=images[i]; 
 
 
if(params.images.length==faces)   
 
 
images[i+2*params.images.length]=images[i]; 
 
 
cdiv.appendChild(images[i]); 
      }   
 
 
 
    var 
 
face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Ma
 
th.sin(Math.PI/params.sides);   
    var 
 
face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mo
 
de=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
    var 
 
pi_piece=2*Math.PI/params.steps/params.sides;
 
 
for(i=0;i<=params.steps*faces;i++){
 
 
img_dimension[i]=face_size*Math.sin(pi_piece*i);
 
 
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]
 
/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offse
 
t*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
 
 
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(im
 
g_dimension[i])-2*params.image_border_width+'px':'1px';
      }
 
 
   }
  init();  
 
  cdiv.rotate = function(){ 
 
 
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
 
 
    if(!spinning) return;
    if(++counter>=params.steps){
 
 
      counter=0; 
 
 
if(++img_index>=img_index_cap) 
        img_index=params.images.length;
 
 
      }  
 
 
images[img_index-faces].style[direction]=faraway; 
    for(var 
 
i=faces-1;i>=0;i--){
 
 
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
 
 
 
 
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps]; 
 
 
      } 
    } 
 
 
cdiv.onmouseover=function(){  
    spinning=false; 
    }
 
 
  cdiv.onmouseout=function(){  
    spinning=true;
 
 
   } 
 
 
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
 
 
 }   
</script>

Pour modifiez la largeur et hauteur du carrousel, aidez vous des balises commentaires signalées comme suit:

Code JAVASCRIPT :

// ceci est un 
 
commentaire en javascript.

Insertion dans le Body

Voici le code à insérer dans votre page HTML entre les balises
<body>... </body>

Code JAVASCRIPT :

 
<SCRIPT language="JavaScript" 
 
title="carrousel_v2" type="text/javascript">
carousel({id:'Mes Images', 
 
//Enter arbitrary but unique ID of this slideshow instance 
 
 
border:'',
          size_mode:'image', //Enter "carousel" or 
 
"image". Affects the width and height parameters below.
 
 
width:107, //Enter width of image or entire carousel, depending on above 
 
value
          height:140, //Enter height of image or entire carousel, 
 
depending on above value 
          sides:6, //# of sides of the 
 
carousel. What's shown = sides/2. Even integer with sides/2< total images 
 
is best
          steps:23, //# of animation steps. More = smoother, but 
 
more CPU intensive 
          speed:5, //Speed of slideshow. Larger = 
 
faster. 
          direction:'top', //Direction of slideshow. Enter 
 
"top", "bottom", "left", or "right" 
 
          images:[
 
 
          'Mon-image-000.jpg', 
 
 
'Mon-image-001.jpg',
                    'Mon-image-002.jpg',
 
 
               'Mon-image-003.jpg'],
 
          links: [
 
 
         'http://lien_URL', //Entrez vos liens URL pour chaque liens 
 
images. 
         'http://lien_URL',
 
 
'http://lien_URL', 
         'http://lien_URL'],
 
 
 
 
          lnk_base:'',
 
 
 
          lnk_targets:['_blank',  
 
 
        '_blank',
 
 
      '_blank',  
 
 
                '_blank' ],
 
 
 
 
 
          titles:['Opens in blank window',
 
 
 
 
  'Opens in blank window',   
 
 
'Opens in blank window', 
 
 
                  'Opens in blank window'],
 
 
 
          image_border_width:1,
 
 
 
 
image_border_color:'white'
 
 
 });
 
</SCRIPT>

Détails paramétrables du script:

Code JAVASCRIPT :

 
 
 
border:'',
          size_mode:'image', //Enter "carousel" or 
 
"image". Affects the width and height parameters below.
 
 
width:107, //Enter width of image or entire carousel, depending on above 
 
value
          height:140, //Enter height of image or entire carousel, 
 
depending on above value 
          sides:6, //# of sides of the 
 
carousel. What's shown = sides/2. Even integer with sides/2< total images 
 
is best
          steps:23, //# of animation steps. More = smoother, but 
 
more CPU intensive 
          speed:5, //Speed of slideshow. Larger = 
 
faster. 
          direction:'left', //Direction of slideshow. Enter 
 
"top", "bottom", "left", or "right"

Les images

width:107, //Entrez la largeur des l'images
height:140, //Entrez la hauteur des l'images

Attention : Toutes les images doivent avoir la même largeur et même hauteur.

La direction du carrousel

direction:'top', //Entrez la direction des l'images

width:top, //Du haut vert le bas en vertical
height:bottom, //Du bas vert le haut en vertical
width:left, //De gauche vers la droite en horizontal
height:right, //De droite vers la gauche en horizontal

Insérer les images

Remplacer Mon-image-000.jpg par le lien de vos images.

Code JAVASCRIPT :

          images:[
 
 
                  'Mon-image-000.jpg', 
 
 
'Mon-image-001.jpg',
                    'Mon-image-002.jpg',
 
 
               'Mon-image-003.jpg'],

Insérer les liens url

Remplacer http://lien_URL par le lien url voulu.

Code JAVASCRIPT :

          links: [
 
 
           'http://lien_URL', //Entrez vos liens URL pour chaque liens 
 
images. 
         'http://lien_URL',
 
 
'http://lien_URL', 
 
 
'http://lien_URL'],

Insérer le titre de vos images

Remplacer Mon image XXX par vos titres personnalisés .

Code JAVASCRIPT :

          titles:[
 
 
                 'Mon image 000',
          'Mon image 001', 
 
 
  'Mon image 002', 
          'Mon image 
 
003'],

La bordure

Réglez la largeur de la bordure comme vous le souhaitez avec ou sans (valeur="0").
Pour la couleur, soit en passant par le nom de couleur html ou en Hexadécimale

Code JAVASCRIPT :

          image_border_width:1,
 
 
image_border_color:'blue'

Insertion dans le Head

Insertion dans le Body

Détails paramétrables du script:

Les images

La direction du carrousel

Insérer les images

Insérer les liens url

Insérer le titre de vos images

La bordure

Démonstration:

A voir aussi