Discussion

22/02/2020 à 11h57 : Swan : Bon week end à tous :)

21/02/2020 à 11h01 : Myster : Bonjour les gens :)

20/02/2020 à 15h44 : m-ickael : Salut :)

20/02/2020 à 09h10 : Swan : Bonjour tout le monde ^^

18/02/2020 à 10h54 : Swan : :lu Bonjour à tous , j'ai quelques thèmes St valentin sur le départ, "Mais c'est passé la St Valentin !!!" Oui je sais .. Pas grave ;)

10/02/2020 à 09h10 : Swan : :lu Bonjour tout le monde ^^ Le thème LightManga à été ajouté à la section des téléchargements ^^

09/02/2020 à 19h21 : m-ickael : Oui :)

09/02/2020 à 12h58 : Swan : Coucou tout le monde ^^ Bientôt la St Valentin :p

07/02/2020 à 09h16 : m-ickael : Salut à tous :)

06/02/2020 à 12h04 : Swan : Salut la compagnie ^^ Heuu .. je crois qu'aujourd'hui j'ai rien à faire :waw

05/02/2020 à 12h18 : Swan : Coucou tout le monde ^^ Je remercie tous pour EDN Merci de votre soutien de par votre présence , vos commentaires et votre soutien financier pour que le site continue d'exister;)

31/01/2020 à 22h12 : m-ickael : Bonjour, et courage :)

30/01/2020 à 11h34 : Swan : Hey salut :lu Enfin ré-inscrite au code ;) J'espère que cette fois sera la bonne pour le permis..

25/01/2020 à 08h13 : m-ickael : Salut. J'en ai parlé avec Myster. Je lui ai montré un exemple de mon site bien arrondi. Ce sera la futur version en radius 50px :) Mais je le ferai plus tard, quand ça me pétera, ou après une grosse version du genre 5.3 :)

24/01/2020 à 12h34 : Swan : Salut tout le monde ^^ Je vais revenir à un thème plus perso.. le Flat me gave ! Mickael oui il était superbe ton site en 2012 et il l'est toujours avec son design flat, mais il est vrai que je regrette le temps ou les thèmes était plus rond et graphique. Cela revient à la mode en plus !

24/01/2020 à 11h15 : Myster : Mais ouis ils étaient beaux vos thèmes ! :D, maintenant les sites en général je trouve qu'on a plus l'aspect "personnel" sur les sites, c'est souvent des chartes graphiques qui font "pro" maintenant :)

24/01/2020 à 08h46 : m-ickael : Le ON - OFF sur mon site en 2012 était une révolution :D .. Il est propre en plus, je l'aime encore !

24/01/2020 à 08h40 : m-ickael : OMG

24/01/2020 à 08h39 : m-ickael : Et moi alors : https://web.archive.org/web/20120205130624/http://passion-truck.com/site/news/news.php

23/01/2020 à 13h02 : Swan : Bonjour tout le monde ^^ Oui Myster , mais le 1er ça date ... Je l'ai toujours ce thème en plus :rire Pour le deuxième c'est vrai que pour l'époque il était très beau ^^

21/01/2020 à 12h15 : Myster : Coucou les gens, @Swan https://web.archive.org/web/20110822033819/http://chez-swan.net/ ou https://web.archive.org/web/20130118150158/http://chez-swan.net/ Quelle nostalgie ! La bonne époque ! :D

20/01/2020 à 17h15 : MangaWorld : ok merci

20/01/2020 à 09h06 : Swan : :lu Bonjour à tous et bon début de semaine! MangaWorld Jem'y colle aujourd'hui ;)

18/01/2020 à 22h21 : m-ickael : Yep :)

18/01/2020 à 20h05 : Myster : Bonsoir :)

18/01/2020 à 14h48 : Swan : Bonjour ^^ J'ai du mal à dégager du temps en ce moment .. mais soit patient ;)

14/01/2020 à 16h39 : MangaWorld : ok j'attend de tes news ^^

11/01/2020 à 15h13 : Swan : MangaWorld , non je suis seule maintenant à gérer ^^

11/01/2020 à 15h12 : Swan : Bonjour tout le monde :lu Voilà je viens de rentrer de mes 15 jours de soutien de famille ^^ Bon vœux de nouvel an à tous :fete

10/01/2020 à 16h10 : m-ickael : Salut Myster :)

09/01/2020 à 21h32 : Myster : Bonjour les gens et meilleure voeux ! :)

06/01/2020 à 16h49 : MangaWorld : slt bonne année tjrs aucune reprise de la team ?

02/01/2020 à 16h21 : m-ickael : Bonjour, et meilleurs voeux !

30/12/2019 à 09h33 : m-ickael : Bonjour. Pareillement :)

28/12/2019 à 11h30 : xtian68 : Bonnes fêtes de fin d'année

25/12/2019 à 12h39 : Swan : Bonjour à tous :lu Joyeux Nowel !!! :noel1 :noel3 :noel1

25/12/2019 à 11h35 : m-ickael : Joyeux Noël :)

24/12/2019 à 19h13 : Swan : Bonjour tout le monde ^^ Hé oui passez tous un très beau réveillon :noel3 :noel2 :noel !!

24/12/2019 à 11h19 : m-ickael : Bonjour à tous. Passez un bon réveillon :top :noel3 :noel2

16/12/2019 à 22h18 : m-ickael : Salut. En vacances depuis le 13 jusqu'au 13 janvier 2020.

15/12/2019 à 17h04 : Swan : En vacance le 21/12 au soir ^^

15/12/2019 à 15h01 : Swan : Coucou à tous :)

14/12/2019 à 12h38 : xtian68 : Bonjour tout le monde

11/12/2019 à 21h55 : m-ickael : Okay ;)

08/12/2019 à 15h28 : Swan : :lu Salut, je suis sur la partie code ^^

07/12/2019 à 07h20 : m-ickael : Bien le bonjour. Alors cette conduite ??

02/12/2019 à 21h57 : m-ickael : :)

02/12/2019 à 09h19 : Swan : Bonjour tout le monde :lu Hoo chouette !! :lovely

30/11/2019 à 09h16 : m-ickael : Oui, un petit garçon de 500grs et 25 cm :)

29/11/2019 à 10h23 : Swan : Hey ^^ bientôt en congé de noël !! C'est vrai, je me motive pour me reposer prochainement! Merci Mickael :) Alors et le bébé il pousse ?

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 4164 fois