Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Demande pour Faire un Caroussel


2 participants

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Mer 28 Juil 2021 - 11:51

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour
J'ai posté a plusieurs endroits a chaque Phil me disait que ce n'était pas bon .
merci petite feuille pour ton aide .
voila il me faudrait le script excat pour mettre sur le portail
du carrousel je l'ai mais je ne sais pas comment m'en servir .
merci de votre aide
Bises
Chéryl
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 28 Juil 2021 - 16:02

Hello Chéryl,

il me faudrait le script exact pour mettre sur le portail
du carrousel je l'ai mais

Pourquoi ne pas l'avoir déposé lors de ta demande ?
Merci de le fournir chère amie entre les balise code de l'éditeur impeccable .

Voir l'aide pour les balises codes:
https://www.milouze14.com/t32647-comment-inserer-du-contenu-entre-les-balises-codes#621665

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Mer 28 Juil 2021 - 18:29

Code:
<div class="rotate">
<style><!--
width: 320px;
height: 279px;
}
.image {
width: 100%;
height: 100%;
}

*{box-sizing : border-box}

img{max-width:100%}

.contenu_carou_auto{
margin:2rem auto;
width:320px;
height:279px;
perspective:8000px
}
      
.caroussel-image{
animation:rotation 64s infinite alternate linear;  
transform-style:preserve-3d;
position:relative;  
}

.caroussel-image img{
position: absolute;
top:0;
left: 0;
}
      
.caroussel-image img{
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:400px;
height:266px;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
border: 3px inset rgba(0,100,0);
box-shadow: 0 0 15px 3px rgba(124,252,0);
}
      
.caroussel-image img:nth-child(1){
transform:translate3d(0,0,395px)
}
      
.caroussel-image img:nth-child(2){
transform:rotateY(45deg) translateZ(395px)
}
      
.caroussel-image img:nth-child(3){
    transform:rotateY(90deg) translateZ(395px)
}
    
.caroussel-image img:nth-child(4){
transform:rotateY(135deg) translateZ(395px)
}
    
.caroussel-image img:nth-child(5){
transform:rotateY(180deg) translateZ(395px)
}
    
.caroussel-image img:nth-child(6){
transform:rotateY(225deg) translateZ(395px)
}
    
.caroussel-image img:nth-child(7){
transform:rotateY(270deg) translateZ(395px)
}
    
.caroussel-image img:nth-child(8){
transform:rotateY(315deg) translateZ(395px)
}

@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}

>
--></style>


</div>
</div>


Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 28 Juil 2021 - 19:08

Ok merci,
il manque des informations chère amie, ou as-tu vu cette animation stp ?
Ou désires tu déposer ce Carrousel ?
En haut de page Chéryl?

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 10:19

Bonjour Phil
serait possible de la mettre au centre du Portail
s'il te plaît
Bises

Je l'ai trouvé sur un blog dont la blogueuse fait des codes .
j'ai demandé l'autorisation elle m'a dit oui .
Bonne journée
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 11:26

Hello Chantal,
merci pour ces explications mais c’est le codage qu’il me faut car il n’est pas complet

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 11:33

re
Je ne suis pas Chantal .
d'accord je vais te le prendre .

Code:
<div class="rotate">
<style><!--
width: 320px;
height: 279px;
}
.image {
width: 100%;
height: 100%;
}

*{box-sizing : border-box}

img{max-width:100%}

.contenu_carou_auto{
margin:2rem auto;
width:320px;
height:279px;
perspective:8000px
}
      
.caroussel-image{
animation:rotation 64s infinite alternate linear;   
transform-style:preserve-3d;
position:relative;   
}

.caroussel-image img{
position: absolute;
top:0;
left: 0;
}
      
.caroussel-image img{
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:400px;
height:266px;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
border: 3px inset rgba(0,100,0);
box-shadow: 0 0 15px 3px rgba(124,252,0);
}
      
.caroussel-image img:nth-child(1){
transform:translate3d(0,0,395px)
}
      
.caroussel-image img:nth-child(2){
transform:rotateY(45deg) translateZ(395px)
}
      
.caroussel-image img:nth-child(3){
   transform:rotateY(90deg) translateZ(395px)
}
   
.caroussel-image img:nth-child(4){
transform:rotateY(135deg) translateZ(395px)
}
   
.caroussel-image img:nth-child(5){
transform:rotateY(180deg) translateZ(395px)
}
   
.caroussel-image img:nth-child(6){
transform:rotateY(225deg) translateZ(395px)
}
   
.caroussel-image img:nth-child(7){
transform:rotateY(270deg) translateZ(395px)
}
   
.caroussel-image img:nth-child(8){
transform:rotateY(315deg) translateZ(395px)
}

@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}

>
--></style>
<div class="contenu_carou_auto">
<div class="caroussel-image"><img src="http://ekladata.com/W_4yWt8xvyjqTFt0puwydbolwCQ@900x720.jpg" alt="Buns 01" /> <img src="http://ekladata.com/s7Wg4VNJX0QK9KU1lUTE76NJ44E@900x630.jpg" alt="Buns 02" /> <img src="http://ekladata.com/rKzqOZQKIDiqWayCsQ3UAbwge9M@800x349.jpg" alt="Buns 03" /> <img src="http://ekladata.com/flcUL2IffG-4W3X613bcNL6q4GM@800x580.jpg" alt="Buns 04" /> <img src="http://ekladata.com/CEeq2tUdnn7W0qOihpPHLQqKdQc@800x500.jpg" alt="Buns 05" /> <img src="http://ekladata.com/7GF9SngJHdeduEDJsMaYGxXpwaU@800x600.jpg" alt="Buns 06" /> <img src="http://ekladata.com/5lVKHNGgbECuiM-PXIojB3MK-Vo@800x578.jpg" alt="Buns 07" /> <img src="http://ekladata.com/AO_lk35sYHo7BFDDM6Tid8g4NM8@800x531.jpg" alt="Buns 08" /></div>
</div>
</div>
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 16:37

Oups désolé Chéryl,

alors :
Dans le template portal_body
Affichage/Templates/Portail/portal_body


Juste après ceci:

Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
   <tr>
      <td colspan="3" width="100%"><!-- BEGIN giefmod0 --> {giefmod0.MODVAR} <!-- BEGIN saut -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
            <td height="{SPACE_ROW}"></td>
         </tr>
      </table>
      <!-- END saut --> <!-- END giefmod0 --></td>
   </tr>
</table>



Déposes le code fournit:

Code:
  <div class="rotate">
    <style><!--
    width: 320px;
    height: 279px;
    }
    .image {
    width: 100%;
    height: 100%;
    }

    *{box-sizing : border-box}

    img{max-width:100%}

    .contenu_carou_auto{
    margin:2rem auto;
    width:320px;
    height:279px;
    perspective:8000px
    }
          
    .caroussel-image{
    animation:rotation 64s infinite alternate linear;  
    transform-style:preserve-3d;
    position:relative;  
    }

    .caroussel-image img{
    position: absolute;
    top:0;
    left: 0;
    }
          
    .caroussel-image img{
    filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
    width:400px;
    height:266px;
    left:10px;
    outline:1px solid transparent;
    backface-visibility:hidden
    border: 3px inset rgba(0,100,0);
    box-shadow: 0 0 15px 3px rgba(124,252,0);
    }
          
    .caroussel-image img:nth-child(1){
    transform:translate3d(0,0,395px)
    }
          
    .caroussel-image img:nth-child(2){
    transform:rotateY(45deg) translateZ(395px)
    }
          
    .caroussel-image img:nth-child(3){
       transform:rotateY(90deg) translateZ(395px)
    }
      
    .caroussel-image img:nth-child(4){
    transform:rotateY(135deg) translateZ(395px)
    }
      
    .caroussel-image img:nth-child(5){
    transform:rotateY(180deg) translateZ(395px)
    }
      
    .caroussel-image img:nth-child(6){
    transform:rotateY(225deg) translateZ(395px)
    }
      
    .caroussel-image img:nth-child(7){
    transform:rotateY(270deg) translateZ(395px)
    }
      
    .caroussel-image img:nth-child(8){
    transform:rotateY(315deg) translateZ(395px)
    }

    @keyframes rotation{
    from{transform:rotatey(0)}
    to{transform:rotatey(1turn)}}

    >
    --></style>
    <div class="contenu_carou_auto">
    <div class="caroussel-image"><img src="http://ekladata.com/W_4yWt8xvyjqTFt0puwydbolwCQ@900x720.jpg" alt="Buns 01" /> <img src="http://ekladata.com/s7Wg4VNJX0QK9KU1lUTE76NJ44E@900x630.jpg" alt="Buns 02" /> <img src="http://ekladata.com/rKzqOZQKIDiqWayCsQ3UAbwge9M@800x349.jpg" alt="Buns 03" /> <img src="http://ekladata.com/flcUL2IffG-4W3X613bcNL6q4GM@800x580.jpg" alt="Buns 04" /> <img src="http://ekladata.com/CEeq2tUdnn7W0qOihpPHLQqKdQc@800x500.jpg" alt="Buns 05" /> <img src="http://ekladata.com/7GF9SngJHdeduEDJsMaYGxXpwaU@800x600.jpg" alt="Buns 06" /> <img src="http://ekladata.com/5lVKHNGgbECuiM-PXIojB3MK-Vo@800x578.jpg" alt="Buns 07" /> <img src="http://ekladata.com/AO_lk35sYHo7BFDDM6Tid8g4NM8@800x531.jpg" alt="Buns 08" /></div>
    </div>
    </div>



Penser a enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout


Voir l'effet sur le portail de mon fofo de tests phpbb2 :
https://testdesforums.1fr1.net/portal

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 17:09

dis moi comment je fais pour mettre mes propres images
merci

ou je dois déposer le code fourni merci


Dernière édition par Chéryl le Jeu 29 Juil 2021 - 19:01, édité 1 fois

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 18:45

Alors pour changer les images Chéryl, ce sera ici:

Il faut changer le lien de chaque image:

Code:

<img src="http://ekladata.com/W_4yWt8xvyjqTFt0puwydbolwCQ@900x720.jpg" alt="Buns 01" /> <img src="http://ekladata.com/s7Wg4VNJX0QK9KU1lUTE76NJ44E@900x630.jpg" alt="Buns 02" />
<img src="http://ekladata.com/rKzqOZQKIDiqWayCsQ3UAbwge9M@800x349.jpg" alt="Buns 03" />
<img src="http://ekladata.com/flcUL2IffG-4W3X613bcNL6q4GM@800x580.jpg" alt="Buns 04" /> <img src="http://ekladata.com/CEeq2tUdnn7W0qOihpPHLQqKdQc@800x500.jpg" alt="Buns 05" />
<img src="http://ekladata.com/7GF9SngJHdeduEDJsMaYGxXpwaU@800x600.jpg" alt="Buns 06" />
<img src="http://ekladata.com/5lVKHNGgbECuiM-PXIojB3MK-Vo@800x578.jpg" alt="Buns 07" /> <img src="http://ekladata.com/AO_lk35sYHo7BFDDM6Tid8g4NM8@800x531.jpg" alt="Buns 08" />

Donc actuellement 8 images, si tu désires en mettre que 4:

Code:

<img src="LIEN DE L IMAGE 1" alt="Image1" />
<img src="LIEN DE L IMAGE 2" alt="Image2" />
<img src="LIEN DE L IMAGE 3" alt="Image3" />
<img src="LIEN DE L IMAGE 4" alt="Image4" />

Si tu désires 8 images comme actuellement:
Code:
<img src="LIEN DE L IMAGE 1" alt="Image1" />
<img src="LIEN DE L IMAGE 2" alt="Image2" />
<img src="LIEN DE L IMAGE 3" alt="Image3" />
<img src="LIEN DE L IMAGE 4" alt="Image4" />
<img src="LIEN DE L IMAGE 5" alt="Image5" />
<img src="LIEN DE L IMAGE 6" alt="Image6" />
<img src="LIEN DE L IMAGE 7" alt="Image7" />
<img src="LIEN DE L IMAGE 8" alt="Image8" />

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 19:01

le second code ou je le place . merci
merci de me le dire Phil

c'est super en haut comme toi
pourrais tu me donner un conseil
merci beaucoup Phil
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 19:04

Tu as 8 images d'hébergés ?
Il vaut mieux me donner le lien de ces dernières,
ce sera bien plus simple et le carrousel centré de base!!

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 19:07

je te l'ai envoie hébergée

pourrais les changer a chaque mois
en ce moment je suis sur mon test ; je ne veux pas faire de bêtises
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 19:10

pourrais les changer a chaque mois


Oui comme tu le souhaites ok .
Je verrais tout cela demain désormais.

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 19:16

ceux sont des créations des membres
[
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 29 Juil 2021 - 19:20

Hum,
je ne vois rien de mon côté!!!!!!!!!!!!!!!!!!!!!!!
Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Jeu 29 Juil 2021 - 20:56



Spoiler:

je t'en ai mis ajouté si par hasard il y en avait qui n'allaient

merci bisous

bonne nuit
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 30 Juil 2021 - 4:11

Hello Chéryl,
alors remplaces dans le template tout le code donné ici par celui-ci:

Code:
    <div class="rotate">
    <style><!--
    width: 320px;
    height: 279px;
    }
    .image {
    width: 100%;
    height: 100%;
    }

    *{box-sizing : border-box}

    img{max-width:100%}

    .contenu_carou_auto{
    margin:2rem auto;
    width:320px;
    height:279px;
    perspective:8000px
    }
         
    .caroussel-image{
    animation:rotation 64s infinite alternate linear; 
    transform-style:preserve-3d;
    position:relative; 
    }

    .caroussel-image img{
    position: absolute;
    top:0;
    left: 0;
    }
         
    .caroussel-image img{
    filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
    width:400px;
    height:266px;
    left:10px;
    outline:1px solid transparent;
    backface-visibility:hidden
    border: 3px inset rgba(0,100,0);
    box-shadow: 0 0 15px 3px rgba(124,252,0);
    }
         
    .caroussel-image img:nth-child(1){
    transform:translate3d(0,0,395px)
    }
         
    .caroussel-image img:nth-child(2){
    transform:rotateY(45deg) translateZ(395px)
    }
         
    .caroussel-image img:nth-child(3){
      transform:rotateY(90deg) translateZ(395px)
    }
     
    .caroussel-image img:nth-child(4){
    transform:rotateY(135deg) translateZ(395px)
    }
     
    .caroussel-image img:nth-child(5){
    transform:rotateY(180deg) translateZ(395px)
    }
     
    .caroussel-image img:nth-child(6){
    transform:rotateY(225deg) translateZ(395px)
    }
     
    .caroussel-image img:nth-child(7){
    transform:rotateY(270deg) translateZ(395px)
    }
     
    .caroussel-image img:nth-child(8){
    transform:rotateY(315deg) translateZ(395px)
    }

    @keyframes rotation{
    from{transform:rotatey(0)}
    to{transform:rotatey(1turn)}}

    >
    --></style>
    <div class="contenu_carou_auto">
    <div class="caroussel-image">
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085335121926.png" alt="Buns01" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085407962816.jpg" alt="Buns02" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085527128486.png" alt="Buns03" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085614205460.gif" alt="Buns04" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085734785888.jpg" alt="Buns 05" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/21072908582342409.jpg" alt="Buns06" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729085951404586.jpg" alt="Buns07" />
      <img src="https://nsa40.casimages.com/img/2021/07/29/210729090020183723.jpg" alt="Buns08" />
      </div>
    </div>
    </div>

Ensuite si tu veux changer les images,
il faut bien prendre en compte le lien de l'image et non le lien cliquable.

Exemple:
Lien cliquable:
Code:

[url=https://www.casimages.com/i/210729085407962816.jpg.html][img]https://nsa40.casimages.com/img/2021/07/29/210729085407962816.jpg[/img][/url]


Lien image:
Code:
https://nsa40.casimages.com/img/2021/07/29/210729085407962816.jpg


Et voilou.

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Ven 30 Juil 2021 - 8:54

Bonjour Phil

Merci
donc il faut que je retire du Templates celui que j'ai mis
et ensuite les autres codes ou je dois les placer

c'est la que je nage

merci tu es très fort .
et tu aimes ça comme dis mon mari
bisous

PS Si je rajoute des créations dois je ajouter des rotations ?

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 30 Juil 2021 - 17:40

Re Chéryl,

donc il faut que je retire du Templates celui que j'ai mis

Oui c'est bien cela.


et ensuite les autres codes ou je dois les placer

Tu veux parler des nouvelles images?


PS Si je rajoute des créations dois je ajouter des rotations ?

Je te déconseille d'en mettre plus car l'es animations vont passer asse vite et le rendu ne sera pas terrible.
Actuellement 8 images est largement suffisant chère amie.

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Ven 30 Juil 2021 - 17:57

dis moi , tu as tout mis dans le template
merci de me le dire

peux tu regarder sur le forum
et tu me dis

si cela va ou pas

merci

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 30 Juil 2021 - 18:01

Oui tout est dans le template Chéryl.
Tout à l'air correct ok

Chéryl aime ce message

Chéryl
Chéryl
https://graphismelesangesden.forumactif.org/

MessageChéryl Ven 30 Juil 2021 - 18:03

Merci beaucoup .
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 30 Juil 2021 - 18:06

De rien chère amie ok .

Chéryl aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 30 Juil 2021 - 18:39

Alors,
j'ai revu ton carrousel (10 images)  et pour te faciliter les modifications d'images, je t'es créé un script nommé:"CAROUSSEL [SUR LE PORTAIL]" dans la gestion des scripts (coché sur le portail).

Pour modifier les images:

Il faut éditer le script en cliquant sur le petit edit .

Et changer les liens d'images ici:
Code:
  
//LIEN PREMIERE IMAGE
var a="https://nsa40.casimages.com/img/2021/07/29/210729085335121926.png";
  //LIEN DEUXIEME IMAGE
var b="https://nsa40.casimages.com/img/2021/07/29/210729085407962816.jpg";
  //LIEN TROISIEME IMAGE
var c="https://nsa40.casimages.com/img/2021/07/29/210729085527128486.png";
  //LIEN QUATRIEME IMAGE
var d="https://nsa40.casimages.com/img/2021/07/29/210729085614205460.gif";
  //LIEN CINQUIEME IMAGE
var e="https://nsa40.casimages.com/img/2021/07/29/210729085734785888.jpg";
  //LIEN SIXIEME IMAGE
var f="https://nsa40.casimages.com/img/2021/07/29/21072908582342409.jpg";
  //LIEN SEPTIEME IMAGE
var g="https://nsa40.casimages.com/img/2021/07/29/210729085951404586.jpg";
  //LIEN HUITIEME IMAGE
var h="https://nsa40.casimages.com/img/2021/07/29/210729090020183723.jpg";
    //LIEN NEUVIEME IMAGE
var i="https://nsa40.casimages.com/img/2021/07/29/210729091107767009.jpg";
  //LIEN DIXIEME IMAGE
var j="https://nsa40.casimages.com/img/2021/07/29/210729091028416863.jpg";

Tu as 10 variables lettre (a b c d e f g h i et j)
Chaque lettre aura un lien:

Exemple avec la première:
Code:
  
//LIEN PREMIERE IMAGE
var a="https://nsa40.casimages.com/img/2021/07/29/210729085335121926.png";

Si tu veux changer, il faudra modifier juste ce qui se trouve entre les guillemets:

Code:
  
//LIEN PREMIERE IMAGE
var a="AUTRE LIEN D IMAGE";

Et voilou ok


Dernière édition par Milouze14 le Mar 3 Aoû 2021 - 19:12, édité 2 fois

Chéryl aime ce message

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum