Membres connectés récemment
[PHPBB2] Demande pour Faire un Caroussel
2 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
- 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
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
Hello Chéryl,
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 .
Voir l'aide pour les balises codes:
https://www.milouze14.com/t32647-comment-inserer-du-contenu-entre-les-balises-codes#621665
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 .
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
- 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>
re
Je ne suis pas Chantal .
d'accord je vais te le prendre .
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>
Oups désolé Chéryl,
alors :
Dans le template portal_body
Affichage/Templates/Portail/portal_body
Juste après ceci:
Déposes le code fournit:
Penser a enregistrer puis à valider en cliquant respectivement sur puis
Voir l'effet sur le portail de mon fofo de tests phpbb2 :
https://testdesforums.1fr1.net/portal
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 puis
Voir l'effet sur le portail de mon fofo de tests phpbb2 :
https://testdesforums.1fr1.net/portal
Chéryl aime ce message
Alors pour changer les images Chéryl, ce sera ici:
Il faut changer le lien de chaque image:
Donc actuellement 8 images, si tu désires en mettre que 4:
Si tu désires 8 images comme actuellement:
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" />
Hello Chéryl,
alors remplaces dans le template tout le code donné ici par celui-ci:
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:
Lien image:
Et voilou.
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
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 ?
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
Re Chéryl,
Oui c'est bien cela.
Tu veux parler des nouvelles images?
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.
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
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 .
Et changer les liens d'images ici:
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:
Si tu veux changer, il faudra modifier juste ce qui se trouve entre les guillemets:
Et voilou
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 .
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
Chéryl aime ce message
Page 1 sur 2 • 1, 2
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum