Discussion

18/09/2019 à 22h12 : m-ickael : Bonne semaine :top

15/09/2019 à 14h47 : Swan : Bon dimanche à tous ^^

13/09/2019 à 20h27 : m-ickael : :top

13/09/2019 à 13h57 : Swan : :lu Bonjour, bon déjà 14H et j'ai fini, mais je bosse demain en non-stop :p la semaine prochaine , je serais peu connecté car pas chez moi! mais dans le 91...

13/09/2019 à 08h27 : m-ickael : Salut Swan .. Oui, nous ne sommes que poussière .. et surtout de passage. Mais faut en profiter de ce passage là :)

11/09/2019 à 20h09 : Swan : Bonsoir tout le monde . la vie est bizarre parfois, elle nous rappelle que nous sommes bien peu de choses ..

09/09/2019 à 12h35 : Swan : Bonjour tout le monde ^^ de retour avec Toujours pleins de questions, mais moins d'angoisse ;)

08/09/2019 à 18h00 : m-ickael : Salut Swan, en espérant que tout aille pour le mieux :) Au plaisir.

05/09/2019 à 18h49 : Swan : Bonsoir tout le monde , de nouveau ce WE , je ne serais pas dispo. Je vous dis donc à Lundi ^^

04/09/2019 à 08h18 : Swan : :lu hello tout le monde, cette aprem, je suis dispo ;)

03/09/2019 à 08h48 : Swan : Salut tout le monde , la rentrée des filles se sont bien passées ;) Le lien d'invite discord : https://discord.gg/WphBHhU | Quelques news sur le discord :p

02/09/2019 à 09h58 : Swan : De retour jusque Jeudi ;)

30/08/2019 à 07h44 : m-ickael : :)

29/08/2019 à 19h21 : Swan : Merci à vous deux ^^

29/08/2019 à 18h18 : MangaWorld : voila j'ai répondu ^^

29/08/2019 à 10h24 : m-ickael : Aucun soucis Swan, prend soin de toi, et règle tes soucis :)

29/08/2019 à 07h49 : Swan : Salut tout le monde, malheureusement la vie c'est pas tout rose et j'ai eu des soucis persos.. Mais je suis toujours là ^^ Ce week end je serais absente , donc pas de panique, si je ne réponds pas.

27/08/2019 à 21h44 : m-ickael : Faut attendre, il y a des gens en vacances ;)

27/08/2019 à 13h36 : MangaWorld : et slt

27/08/2019 à 13h35 : MangaWorld : ok http://easy-design.net/forum/topic-3566+modification-de-titre.php pas de reponse normal ?

26/08/2019 à 17h46 : m-ickael : Vacances jusqu'au 16.09.19 :)

26/08/2019 à 17h45 : m-ickael : Oui Swan est toujours dans le coin :)

26/08/2019 à 17h45 : m-ickael : Salut.

26/08/2019 à 15h04 : MangaWorld : il est tjrs actif ce site rassurez moi ?

26/08/2019 à 11h55 : Swan : :lu Pour certain c'est la reprise, pour d'autre, je ne reprends que Mardi Aprem' !!

24/08/2019 à 08h56 : Swan : Bonjour à tous et bon week end ^^ Merci au.x contributeur.s de continuer à nous soutenir :)

23/08/2019 à 07h35 : Swan : Salut à tous et bon vendredi ^^

20/08/2019 à 18h10 : Swan : Bonjour à tous ^^ de retour à la maison :)

18/08/2019 à 12h38 : Swan : Aujourd'hui c'est "King" !!

17/08/2019 à 19h13 : Swan : Depuis 17h ce soir , Enfin en week end ^^

14/08/2019 à 18h06 : Swan : Salut à tous, soleil ... frais, soleil ... frais ! AtchoumMMMm..

13/08/2019 à 12h54 : Swan : Bonjour à tous, cet aprem je suis au boulot ;)

10/08/2019 à 20h55 : Swan : Bonjour à tous !! Et bien vu que je travail dur depuis février en extérieur, j'ai plus beaucoup de temps pour EDN en ce moment et en PLUS c'est les vacances !! J'ai des week-end atypiques, vu que j'ai un planning tournant sur 3 semaines :p

28/04/2019 à 13h21 : Swan : Bonjour bien que pas visible la shoutbox reste active :)

21/04/2019 à 20h29 : Swan : Salut Salut ^^ Bon bah j'en connais qui ne vont pas retoucher un chocolat de sitôt ^^ !

19/04/2019 à 07h58 : Swan : :lu Coucou en week end à 13H ^^

18/04/2019 à 08h07 : Swan : Bonjour à tous, déjà jeudi !! le temps file très vite ;)

16/04/2019 à 09h25 : Swan : Bonjour :lu un peu de chaleur dehors serait bienvenue !

15/04/2019 à 09h29 : Swan : Bonjour tout le monde ^^ bon lundi à tous ;)

12/04/2019 à 09h51 : Swan : Salut salut ^^ c'est le désert ici ..

11/04/2019 à 07h44 : Swan : Salut tous le monde, encore en déplacement aujourd'hui ^^

10/04/2019 à 17h09 : Swan : Bonjour tout le monde et Merci à Ptithom et Xtian :)

06/04/2019 à 08h16 : Swan : Bon Week end à tous ^^ je bosse encore ce samedi ..

04/04/2019 à 08h10 : Swan : Petit bonjour rapide avant mon départ au boulot ;)

01/04/2019 à 09h28 : Swan : :lu Hello Touti , allez je place en 5.2 sous contrib :)

31/03/2019 à 11h45 : Swan : Salut Salut OuiIInnNNnn 1 heure de moins !!!!

31/03/2019 à 07h39 : hight_tower : Bon week end et bon dimanche, je viens de retrouver le chat seulemet maintenant :rire :rire :rire :rire

30/03/2019 à 09h24 : Swan : Salut tout le monde ^^ bon samedi, moi je bosse ;)

29/03/2019 à 09h47 : Swan : Salut ! Bon j'ai la gorge qui gratte .. pfff

28/03/2019 à 20h21 : Swan : Allez à demain ^^ je sais je passe tard, mais la journée a été longue :)

Vous n'êtes pas autorisé à ajouter un message !

Créer un diaporama multi-onglets - CssPlay

Présentation



Un slideshow uniquement en css sans javascript ? Oui cela existe. Je suis tombée dessus par le plus grand des hasards.
Ce script vous permettra de présenter des mini-albums d'images sur votre site/blog. Le site original est en anglais et met la démo en visuel. Mais 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 : Complex slideshow -CssPlay

Les quatre onglets vous permettent d'ajouter un total de 96 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 taille 22px par 22px. Le survol stationnaire agrandit l'image soit à 64px par 48px pour les paysages et pour les 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 complex-slide.css.

Voir l'exemple



Cette page a été vue 3909 fois