Votre espace

 



Question aléatoire

L'utilité d'un forum?
Livre d'or

Par theviking

Coucou,
Je n'avais pas mis mon petit mot, depuis le temps que je suis inscrit. Ho! le vilain!!
Merci à toi Swan et toute l'équipe de m'acceuilir. [Suite...]

Livre d'or

Statistiques

843 membres inscrits

Dernier membre:
NeoBlox10

Plus de stats

Vous soutenez CsN :


Sur les 3 derniers mois ...

[13/05/13] Damien.F: €10.00

[12/05/13] Mathieu.C: €10.00

[02/05/13] Xtian: €10.00

[31/03/13] Xtian: €10.00

[19/03/13] Lucho03: €10.00

[27/02/13] Xtian: €10.00

[26/02/13] Striker: €15.00

[30/01/13] Xtian: €20.00

[29/12/12] Xtian: €20.00

[01/12/12] Rudyos: €5,00

[29/11/12] Xtian: €20.00

[16/11/12] Sanfandrafa: €10,00

[12/11/12] Hight_Tower: €10,00

[06/11/12] Harper: €15,00

[31/10/12] Xtian: €20.00

[31/10/12] Laurent.L: €25.00

[24/10/12] Nicolas.P: €5.00

[21/10/12] Vincent.D: €10.00

[19/10/12] Mickael: €10.00

[06/10/12] Xtian: €15.00

[01/10/12] Hight_Tower: €20.00
..........................................
Nous vous remercions !
..........................................
Nous soutenir ?
Mini sondage
Chez-Swan.NeT










Résultats

En ligne
6 Visiteurs, 3 Membres, 0 Modérateur, 0 Administrateur En ligne.

worms
teyu38
Sonic
unknow_bot
Total : 9
Créer un diaporama simple - CssPlay
 
Table des matières
  1. Présentation
  2. Télécharger
  3. L'installation
  4. Les images
  5. Astuce
  6. Voir l'exemple



Présentation



Comme son grand frère, mais en galerie unique .
Le site original est en anglais et met la démo en visuel. Mais le site ne fourni pas d'archive de mise à disposition. Je précise toutefois que pour mettre ce diaporama, il vous faudra poser un lien vers le site de CSSPlay, pour en respecter les droits d'auteurs comme je viens de le faire. (Cela ne coute rien !).

Note: Pour vous faciliter le travail, j'ai partiellement traduit les parties les plus importantes et fais la compilation de la démonstration en archive.

Télécharger



Commencez par télécharger : Simple slideshow -CssPlay

La galerie vous permet d'ajouter un total de 24 images distinctes. Il est également possible d'avoir quelques lignes de texte descriptif qui apparaît sous les vignettes.

L'installation



Encore une fois, c'est très simple, l'index, dans l'archive est déjà prêt à l'emploi. Il ne vous reste juste qu'à faire vos propres modifications.

Les images



Note: Celui-ci est très simple et n'utilise pas d'images miniatures. L'image que vous voyez est la taille originale qui est d'abord réduite à un petit rectangle 22px par 22px taille. Le survol stationnaire agrandit l'image soit à 64px par 48px pour les paysages et pour le portraits en 48px par 64px. Un clic sur l'image vous permettra de l'afficher.

Placez vos images miniatures et larges dans le dossier : images.
Ensuite, ouvrez index.html avec votre éditeur web ou le bloc-note. C'est en regardant ce bout de code html que vous allez comprendre comment placer les images.

Code HTML :
<li><a href="#nogo" class="hor"><img src="images/pic_1h.jpg" alt="" title=""><b>Votre descriptif.</b></a></li>
<li><a href="#nogo" class="vert"><img src="images/pic_1v.jpg" alt="" title=""><b>Votre descriptif.</b></a></li>
<li><a href="#nogo" class="hor"><img src="images/pic_2h.jpg" alt="" title=""><b>Votre descriptif.</b></a></li>
<li><a href="#nogo" class="vert"><img src="images/pic_2v.jpg" alt="" title=""><b>Votre descriptif.</b></a></li>


Détails: Pour que vous compreniez bien la corrélation entre images et propriété css, je vais pousser un peu plus loin mes explications.

Ici la class dans lien href est très importante ! C'est la class qui définira si votre image est un format paysage ou portrait.

  • class="vert" signifiant une position verticale. Format portrait.
    • Miniature par CSS width (Largeur) :64px par height (hauteur) 48px
    • Large par CSS width (Largeur) : 240px par height (hauteur) 320px

  • class="hor" signifiant une position horizontale. Format paysage.
    • Miniature par CSS width (Largeur) : 48px par height (hauteur) 64px
    • Large par CSS width (Largeur) : 320px par height (hauteur) 240px


Et pour finir, remplacer les images dans le lien image <img src="images/pic_1h.jpg" etc ... par les vôtres.

Astuce



Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds etc... Dans simple-slide.css.

Voir l'exemple





 
Cette page a été vue 1565 fois   |   Dernières modifications par : infoking1