Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum Crea illusion Fantasy


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.

PublicationsAccueilFAQPortailS'enregistrerConnexionÉvènements
Ta bannière à la place d'honneur, Ici !

Partagez|

Carousel

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Carousel Dim 1 Aoû 2010 - 21:03

Faire un carousel avec images cliquables, qui mene à un lien.

J'ai mit des icones, mais on peut mettre sois des images de créations, ou les images des sites avec les liens.
[Vous devez être inscrit et connecté pour voir ce lien]


Dans le code changez les urls par les votres.
Pour ceux qui ce débrouille avec les codes, on peut changer la grandeur du carousel, la hauteur, mettre un cadre autour des images en couleur.


Code:
<body onload="Carousel()">
<script type="text/javascript">
/***********************************************
* Carousel Slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/********************************************************
Create a div with transparent place holder in your html <div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height: carousel image height+2
Insert onload in body tag
<body onload="Carousel()"> *********************************************************/
// 7 variables to control behavior
var Car_Image_Width=80;
var Car_Image_Height=150;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=8; // must be 4, 6, 8 or 12
/* array to specify images and optional links. For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"Url de votre image","Url de votre lien",
"Url de votre image","Url de votre lien",
"Url de votre image","Url de votre lien",
 //this slide isn't linked
""Url de votre image","Url de votre lien",
// NOTE No comma after last line
);
/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;
function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]); CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=0+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}
function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}
function C_LdLnk(){if(this.lnk)window.open(this.lnk, '_blank')}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
<div id="Carousel" style="position: relative;"></div>
<p> <span onmouseover="_tipon(this)"  onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left;"></span><font face="Arial" size="-2"> </font></span></p>
</body>
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 1336
Venue : 01/07/2009 Je suis: : Féminin
Né(e) le : 28/04/1952
Age : 65
Je vie à : Dijon
Humeur : Bonne Humeur
Mes Points : 2857
Admin

Mimi
18 - 16
MessageSujet: Re: Carousel Mar 10 Aoû 2010 - 18:42
Kikou Perle j'ai voulu me lancer et ben niet, peux-tu jeter un oeil de lynx Question

Spoiler:
 
Revenir en haut Aller en bas
http://www.mimicreations.fr
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Mar 10 Aoû 2010 - 20:07
Il doit te manquer un bout de code.

J'ai repris le code avec l'url de tes images est celà fonctionne


Voici le code avec tes urls images

Code:


<body onload="Carousel()">
<script type=text/javascript>

/***********************************************
* Carousel Slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
  Create a div with transparent place holder in your html 
  <div id="Carousel" style="position:relative">
      <img src="placeholder.gif" width="404" height="202">
  </div>
  placeholder width:
      4 sided: 1.42 * carousel image width + 3
      6 sided: 2 * carousel image width +4
      8 sided: 2.62 * carousel image width + 5
      12 sided: 3.87 * carousel image width + 7
  placeholder height:
      carousel image height+2

  Insert onload in body tag
      <body onload="Carousel()"> 
*********************************************************/

// 7 variables to control behavior
  var Car_Image_Width=80;
  var Car_Image_Height=150;
  var Car_Border=true;      // true or false
  var Car_Border_Color="white";
  var Car_Speed=4;
  var Car_Direction=true;      // true or false
  var Car_NoOfSides=8;      // must be 4, 6, 8 or 12

/* array to specify images and optional links.
  For 4 sided carousel specify at least 2 images
  For 6 sided carousel specify at least 3
  For 8 sided carousel specify at least 4
  For 12 sided carousel specify at least 6
 If Link is not needed keep it ""
*/
  Car_Image_Sources=new Array(
"http://nsa16.casimages.com/img/2010/08/10/100810053700226895.gif/Caroussel/1.png","http://www.mimicreations.fr/CreaConcours%20(4).html",
"http://img10.hostingpics.net/pics/71021249639deuxiemePrixMimi.png/Caroussel/11.png","http://www.mimicreations.fr/CreaConcours%20(4).html",
"http://img10.hostingpics.net/pics/134195gourmande.jpg/Caroussel/3.png","http://www.mimicreations.fr/MesCreaPhotosChocolat.html", //this slide isn't linked
"http://img10.hostingpics.net/pics/341099roseraie.gif/Caroussel/4.png","http://www.mimicreations.fr/MesCreaPhotoMeliMelo(3).html "
// NOTE No comma after last line
);



/***************** DO NOT EDIT BELOW **********************************/
  CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
  C_Coef=new Array(
      3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,  0,
      Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
  var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
  C_Pre_Img=new Array(Car_Image_Sources.length);
  var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
  C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

  function Carousel(){
      if(document.getElementById){
        for(i=0;i<Car_Image_Sources.length;i+=2){
            C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
        C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
        Car_Div=document.getElementById("Carousel");
        for(i=0;i<C_HalfNo;i++){
            CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]); 
            CW_I[i].style.position="absolute";
            CW_I[i].style.top=0+"px";
            CW_I[i].style.height=Car_Image_Height+"px";
            if(Car_Border){
              CW_I[i].style.borderStyle="solid";
              CW_I[i].style.borderWidth=1+"px";
              CW_I[i].style.borderColor=Car_Border_Color}
            CW_I[i].src=Car_Image_Sources[2*i];
            CW_I[i].lnk=Car_Image_Sources[2*i+1];
            CW_I[i].onclick=C_LdLnk;
            CW_I[i].onmouseover=C_Stp;
            CW_I[i].onmouseout=C_Rstrt}
        CarImages()}}

  function CarImages(){
      if(!C_Stppd){
        C_TotalW=0;
        for(i=0;i<C_HalfNo;i++){
            C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
            C_TotalW+=C_ClcW[i]}
        C_LeftOffset=(C_MaxW-C_TotalW)/2;
        for(i=0;i<C_HalfNo;i++){
            CW_I[i].style.left=C_LeftOffset+"px";
            CW_I[i].style.width=C_ClcW[i]+"px";
            C_LeftOffset+=C_ClcW[i]}
        C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
        if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
            if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
            if(Car_Direction){
              CW_I[C_HalfNo]=CW_I[0];
              for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
              CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
              CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
            else{  for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
              CW_I[0]=CW_I[C_HalfNo];
              CW_I[0].src=Car_Image_Sources[C_CrImg];
              CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
            C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
      setTimeout("CarImages()",50)}

  function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
  function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
  function C_Rstrt(){C_Stppd=false}
</script><div id=Carousel style=position:relative></div>
<p> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><font face=Arial size=-2></a></span> </p>
</body>

Cette image ne fonctionne pas, c'est la première dans le code
[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 1336
Venue : 01/07/2009 Je suis: : Féminin
Né(e) le : 28/04/1952
Age : 65
Je vie à : Dijon
Humeur : Bonne Humeur
Mes Points : 2857
Admin

Mimi
18 - 16
MessageSujet: Re: Carousel Mar 10 Aoû 2010 - 21:24
J'ai changé d'image et on ne voit rien
Deux captures avec Kompozer et le navigateur

[Vous devez être inscrit et connecté pour voir ce lien]


[Vous devez être inscrit et connecté pour voir ce lien]

Revenir en haut Aller en bas
http://www.mimicreations.fr
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Mar 10 Aoû 2010 - 21:44

Tu dois oublier quelque chose

Regarde une capture avec tes images dans le carousel

Avec l'apercue je vois tes images tourner.

[Vous devez être inscrit et connecté pour voir ce lien]


En mettant le code dans dream, je ne voit que ceci
[Vous devez être inscrit et connecté pour voir ce lien]

Fait attention que le body et /body , ne soit pas deja sur le code de ta page.


Si tu n'y arrive pas, envoie moi ta page par MP
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Mer 11 Aoû 2010 - 10:37

Bon voila à rien y comprendre lol

Si je met le script sur la page par ex : mon index

Celui ci transforme tout mon index, donc pas bien bon ça

Mais j'ai trouvée une solution pour que tout fonction

Alors on y vas lol

Vous créez une nouvelle page, sur cette page vous mettez le code du carrousel.
Mettez la couleur ou le fond de votre image de la page ou ce trouvera le carrousel
Changer les urls des images par les votres.
Vous pouvez aussi changer la hauteur et la largeur, dans le code du carrousel, selon la grandeur de vos images.

Enregistrer cette page dans le dossier de votre site, nommé la par ex: CodexCarrousel.html

Ensuite sur la page ou vous voulez le carrousel, vous allez ajouter simplement ce code

Code:

<iframe src="Mettez url de votre page carrousel.html" style="background: transparent; height: 190px; width: 250px;" frameborder="no"; scrolling="no"></iframe>

Dans ce code adaptez les dimensions par rapport au tailles des images
height:XXXpx width: XXXpx
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 1336
Venue : 01/07/2009 Je suis: : Féminin
Né(e) le : 28/04/1952
Age : 65
Je vie à : Dijon
Humeur : Bonne Humeur
Mes Points : 2857
Admin

Mimi
18 - 16
MessageSujet: Re: Carousel Mer 11 Aoû 2010 - 13:58
Après plusieurs essais niet, il m'apparait une partie de l'header qui n'y est pas sur la page
Revenir en haut Aller en bas
http://www.mimicreations.fr
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Mer 11 Aoû 2010 - 17:52

Il faut créer une nouvelle page, tu met la couleur du fond de ta page index, vue que c'est là que tu veux que le carrousel apparaisse.

Ensuite sur cette nouvelle page, tu met le code du carrousel en mettant les url de tes images et les liens.

Ensuite cette page tu l'enregistre dans le dossier de ton site sous le nom par ex: CodexCarousel.html

Ensuite tu vas sur ta page index et sur celle ci à l'endroit ou tu veux que ton caroussel apparaisse.
Tu met le code que j'ai donner plus haut iframe ect....
Dans ce code tu met l'url de ta nouvelle page du caroussel

Ex: [Vous devez être inscrit et connecté pour voir ce lien]
Ceci va te faire apparaitre ton caroussel sans probléme à l'endroit que tu as choisi
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 1336
Venue : 01/07/2009 Je suis: : Féminin
Né(e) le : 28/04/1952
Age : 65
Je vie à : Dijon
Humeur : Bonne Humeur
Mes Points : 2857
Admin

Mimi
18 - 16
MessageSujet: Re: Carousel Mer 11 Aoû 2010 - 19:31
Je n'y arrive pas je pête un plomb Perle voila ce que cela donne
[Vous devez être inscrit et connecté pour voir ce lien]

affraid
Revenir en haut Aller en bas
http://www.mimicreations.fr
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Mer 11 Aoû 2010 - 20:21
J'espère que tu vas y arriver, avec les explications en privé.
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
avatar
Messages : 1336
Venue : 01/07/2009 Je suis: : Féminin
Né(e) le : 28/04/1952
Age : 65
Je vie à : Dijon
Humeur : Bonne Humeur
Mes Points : 2857
Admin

Mimi
18 - 16
MessageSujet: Re: Carousel Jeu 12 Aoû 2010 - 10:12
Merci Perle du temps passé sans oublier Kazounet

Autre chose puis-je rajouter deux ou trois photos et la procédure à suivre sans faire de bêtise,
je me connais lol!
Revenir en haut Aller en bas
http://www.mimicreations.fr
AuteurMessage
avatar
Messages : 6357
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9516
Admin

Ptite_Perle
18 - 16
MessageSujet: Re: Carousel Jeu 12 Aoû 2010 - 17:23
Ah je me suis pas penché sur l ajout d images

Essaie d ajouter un ligne de code des url + lien dans le code des images
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
AuteurMessage
Contenu sponsorisé
18 - 16
MessageSujet: Re: Carousel
Revenir en haut Aller en bas

Carousel

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Codes-