Caroussel multi-directionnel

Aide générale [Réglé] Caroussel multi-directionnel mise en page et lien

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Le 05/11/2009 à 02h25

Bonjour à tous

Je fais appel à vous pour le caroussel multi-directionnel, je pêche pour un probleme d'affichage et de lien

J'ai mis le caroussel dans l'edito, celui ci se presente a gauche et impossible de le centrer, je recherche une solution

Pour les liens que j'ai appliqué aux 4 images, 3 dirigent vers des sites externes (album,blog et plan d'acces en jpg) la ras, mais pour le 4eme lien je voudrais affcher le forum.

j'ai donc saisie comme ceci le lien /forum/ et essayé aussi http:// mon url/forum/ mais en vain je sors du site, cela m'ouvre a nouveau une fenetre avec le forum au lieu de rester dans la frame du site

y a t'il une solution possible ?

Merci par avance pour votre aide, et félicitation pour les docs et phpboot extra c'est un regal

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/11/2009 à 08h41

Bonjour PascalID36,

Le caroussel multi-directionnel, que tu as trouvé sur csn dans la doc ?

Si tu peux me mettre le lien s'il te plait ^^ Et aussi le lien de là où tu as mis ce caroussel multi-directionnel (URL).

swan_signature

Site web

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 13h02

voila ou j'ai pris le tutorial
http://easy-design.net/wiki/faire-un-carrousel-multi-directionnel

lien ou est le caroussel
http://www.indre-poker.com/phpbootfull/news/news.php

Site web

KONA

EDN Enraciné(e)

Rang

Inscrit le : 05/10/2009 à 18h20

Messages: 691

Le 05/11/2009 à 13h09

Ajoute :

Code CSS :

margin:auto;

Dans ton <div id="Mesimage">

Recherche moto cross volée L'est de la france

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/11/2009 à 13h25

Merci Kona

Désolée pascalID36, mais je suis pas trop sur le site, vu que je suis sur le thème de Miguel et sur nom bureau (écran), c'est le grand chambardement

swan_signature

Site web

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 13h38

KONA:

Ajoute :

Code CSS :

margin:auto;

Dans ton <div id="Mesimage">

je ne trouve pas la reference <div id="Mesimage">

je mets le code

Code JAVASCRIPT :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript" title="carrousel_v2">
 
// Carousel Slideshow II - By Harry Armadillo 
 
function carousel(params){ 
  if(!(params.width>0 && isFinite(params.width)))params.width=137; //Réglez la largeur via celle de vos images. 
  if(!(params.height>0 && isFinite(params.height)))params.height=200; //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.sin(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]=window.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]*Math.sin(Math.PI/params.sides);   
    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='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_offset*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(img_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>
</head>
 
<body>
<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:150, //Enter width of image or entire carousel, depending on above value
          height:200, //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" 
 
          images:[
                    'http://Indre-Poker.com/perso/caroussel/asdecoeur2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdecoeur2.png', 
                    'http://Indre-Poker.com/perso/caroussel/asdepic2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdecarreau2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdetreffle2.png'],
 
          links: [
                 '/forum/index.php', //Entrez vos liens URL pour chaque liens images.
                              'http:/Indre-Poker.com/perso/caroussel/asdepic2.png', 
         'http:/Indre-Poker.com/perso/caroussel/asdepic2.png',
         'http:/Indre-Poker.com/perso/caroussel/asdecarreau2.png', 
         'http:/Indre-Poker.com/perso/caroussel/asdetreffle2.png'],
 
          titles:[
                  'Mon image 000',
          'Mon image 001', 
                                'Mon image 002', 
          'Mon image 003',
                               'Mon image 004'],
 
          image_border_width:1,
          image_border_color:'blue'
          });
</SCRIPT>
</body>

Pas grave Swan tu peux pas etre la 24h sur 24h

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/11/2009 à 13h48

Pour mettre le margin essais cela, en remplaçant ses lignes là dans le code:

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:150, //Enter width of image or entire carousel, depending on above value
          height:200, //Enter height of image or entire carousel, depending on above value 
          margin:auto, //centrage du caroussel (cf: KONA)
          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"

Sinon :

PascalD36:

Pour les liens que j'ai appliqué aux 4 images, 3 dirigent vers des sites externes (album,blog et plan d'acces en jpg) la ras, mais pour le 4eme lien je voudrais affcher le forum.

Bon ça je viens de regarder, il te faut mettre le lien en plein. Exemple pour ton forum:

http://www.indre-poker.com/phpbootfull/forum/index.php <== pas juste l'abréviation.

PascalD36:

j'ai donc saisie comme ceci le lien /forum/ et essayé aussi http:// mon url/forum/ mais en vain je sors du site, cela m'ouvre a nouveau une fenetre avec le forum au lieu de rester dans la frame du site

y a t'il une solution possible ?

A moins de rajouter une fonction en javascript pour forcer le lien href à s'ouvrir dans la même fenêtre, je vois pas comment, mais cela n'est pas vraiment gênant cette autre fenêtre qui s'ouvre..

La portion qui gère les liens est celle-ci :

Code JAVASCRIPT :

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]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
          }  
        images[i].style.cursor=document.all?'hand':'pointer'; 
        }

Il y a bien la fonction "_blank" inclus dedans.. mais comment le modifier

Je ne sais pas...

swan_signature

Site web

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 14h06

je l'ai oté cela change rien mais bon cela est pas grave je ferai pas de lien vers le forum car vu que l'on sort du site il faut s identifier a nouveau donc galere

par contre il faut que je trouve pour centrer le carousel et vu le code c'est hard

Site web

KONA

EDN Enraciné(e)

Rang

Inscrit le : 05/10/2009 à 18h20

Messages: 691

Le 05/11/2009 à 15h40

Pour center :

Remplacer

Code JAVASCRIPT :

  document.write("<div style='position:relative;margin:auto;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");

Par

Code JAVASCRIPT :

  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");

Pour l'ouvrir dans la même fenêtre :

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:150, //Enter width of image or entire carousel, depending on above value
          height:200, //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" 
 
          images:[
                    'http://Indre-Poker.com/perso/caroussel/asdecoeur2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdecoeur2.png', 
                    'http://Indre-Poker.com/perso/caroussel/asdepic2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdecarreau2.png',
                    'http://Indre-Poker.com/perso/caroussel/asdetreffle2.png'],
 
          links: [
                 '/forum/index.php', //Entrez vos liens URL pour chaque liens images.
                              'http:/Indre-Poker.com/perso/caroussel/asdepic2.png', 
         'http:/Indre-Poker.com/perso/caroussel/asdepic2.png',
         'http:/Indre-Poker.com/perso/caroussel/asdecarreau2.png', 
         'http:/Indre-Poker.com/perso/caroussel/asdetreffle2.png'],
 
    lnk_targets:['_self',
                       '_self',
                       '_self',
   '_self',
                       '_self' ],
 
          titles:[
                  'Mon image 000',
          'Mon image 001', 
                                'Mon image 002', 
          'Mon image 003',
                               'Mon image 004'],
 
          image_border_width:1,
          image_border_color:'blue'
          });
</SCRIPT>

Swan il suffit de rajouter :

Code JAVASCRIPT :

    lnk_targets:['_self',
                       '_self',
                       '_self',
   '_self',
                       '_self' ],

Recherche moto cross volée L'est de la france

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 17h07

Excellent vraiment excellent Kona tu es un grand homme

merci c'est le top

Site web

KONA

EDN Enraciné(e)

Rang

Inscrit le : 05/10/2009 à 18h20

Messages: 691

Le 05/11/2009 à 17h47

De rien

Swan faudrait que tu modifie ton tuto je pense

Recherche moto cross volée L'est de la france

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/11/2009 à 18h34

Pas de soucis KONA, je le ferais ce soir. Merci

Edit Swan: C'est fait : Faire un carrousel multi-directionnel

swan_signature

Site web

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 18h55

j'ai une autre question kona vu que tu as l'aire de te promener dans ce scripte si je veux rajouter une banniere en dessous du caroussel ou dois je placer ma ligne de syntaxe

Code HTML :

<p align="center"><img src="http://indre-poker.com/perso/quillard.gif"/></p>

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/11/2009 à 19h05

PascalID36, juste à la fin en dessous de </SCRIPT>

swan_signature

Site web

PascalD36

EDN Motivé(e)

Rang

Inscrit le : 08/10/2009 à 13h31

Messages: 386

Le 05/11/2009 à 19h29

ben non j'ai essayé il y a que la bannière qui apparait cela supprime le caroussel

j'ai essayé juste après <body>

et juste avant </body>

il est très compliquer ce scripte

je me demande même comment KONA arrive à s'y retrouver. Edité par PascalD36 Le 05/11/2009 à 19h31

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...