Nombre de membres 34 membres
Connectés : ( personne )
Snif !!!
 

actif  Sujet n° 157

le 06/03/2014 @ 11:53
par rod

rod



(Re)bonjour Sabine,

J'essaie de reproduire le diaporama du header du site de notre école (obtenu avec le plugin slideshow de dpfpic).

En suivant ton tuto, je suis parti du diaporama simple (avec défilement rapide).

Le voulant très simple, j'ai collé uniquement ces lignes dans le style.css :
.FB682 { /*boîte qui contient le diaporama simple (rapide)*/
    margin: 20px;
    width: 128px;
    background: transparent;
    padding: 0;
    /*border-radius: 18px;*/
}
.FB682 .slides_container { /*conteneur des diapositives*/
    width: 128px;
    height: 96px;
    background: transparent;
    padding: 0;
}

Qu'en penses-tu ? Est-ce suffisant ?

Hélas, je rencontre "quelques" problèmes...
1) Peut-on supprimer cette bordure ou (au moins les arrondis) ?
2) Et ces boutons ?
3) Quant à ces marges, peut-on également les supprimer de façon à ce que les dimensions de boîte qui contient le diaporama simple = celles du conteneur des diapositives) ?

Merci d'avance.

site test
Site web rod
Poster une réponse Haut  

Réponse n° 1
--------
le 06/03/2014 @ 18:53
par Sabine

Sabine



Bonjour,

Il faut mettre toutes les lignes qui sont dans le tuto.

Essaies de mettre les lignes ci-dessous, ça devrait aller :

 
Code : css
/**** Diaporama simple - Défilement RAPIDE *****/
.FB682
{ /*boîte qui contient le diaporama simple (rapide)*/
margin: 5px;
width: 128px;
background: transparent;
border: 0px;
padding: 0px;
}
.FB682 #leftslides
{ /*Ensemble diapositives + pagination du diaporama*/
display:block;
width: 128px;
height: 96px;
}
.FB682 #leftslides p
{ /*largeur et hauteur de l'espace pour le texte*/
width: 128px;
height: 96px;
}
.FB682 .slides_container
{ /*conteneur des diapositives*/
width: 128px;
height: 96px;
background: transparent;
padding: 5px;
}
.FB682 .slides_container p
{ /*attributs du texte*/
color: #fff;
}
.FB682 ul.pagination0
{ /*boîte de la pagination*/
width: 60px;
height: 16px;
margin: 4px;
margin-left: 110px;
}
.FB682 .pagination0 li
{ /*pagination*/
float:left;
width: 1px;
height: 1px;
list-style:none;
background: transparent;
background-position: 0 0;
}
.FB682 .pagination0 li.current
{ /*diapositive active*/
background: transparent;
background-position:0 0px;
}
/****Fin diaporama****/
 
Sabine e
Rectifié par Sabine le 06/03/2014 @ 18:55
Site web Sabine
Poster une réponse Haut  
Réponse n° 2
--------
le 06/03/2014 @ 19:23
par rod

rod

visiteur

Wunderbar !!!

Juste une dernière petite chose.

Est-il possible de changer l'effet de défilement ? J'aimerais utiliser l'effet "fade".

Merci.
Site web rod
Poster une réponse Haut  
Réponse n° 3
--------
le 06/03/2014 @ 19:34
par Sabine

Sabine



Et bien, je ne connaissais pas cet effet "fade"...

J'ai donc trouvé cette page : http://www.webdesignweb.fr/web/2-effets-css3-assez-saisissants-95#

Il faut que je me penche sur le sujet (ce week end si j'ai le temps, mais les tâches commencent à s'accumuler)... l'effet "lueur externe" peut être intéressant aussi.

Si tu trouves avant moi, merci de me le dire !

Sabine e
Site web Sabine
Poster une réponse Haut  
Réponse n° 4
--------
le 06/03/2014 @ 20:03
par rod

rod

visiteur

En fait, dans le plugin slideshow de Dpfpic, plusieurs effets sont proposés dont l'effet "fade", c'est celui que j'utilise actuellement dans le diaporama du header de ce site.
On le voit peut-être mieux ici.

Bonne nuit.
Rectifié par rod le 07/03/2014 @ 07:22
Site web rod
Poster une réponse Haut  
Réponse n° 5
--------
le 17/05/2014 @ 09:26
par rod

rod

visiteur

Bonjour Sabine,

Avez-vous eu le temps de regarder pour changer l'effet de défilement ?

Cordialement.
Site web rod
Poster une réponse Haut  
Réponse n° 6
--------
le 17/05/2014 @ 15:57
par Sabine

Sabine



Bonjour,

Non, pas encore !

Sabine
Site web Sabine
Poster une réponse Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 5.0 » Vos questions » diaporama