AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Effet "lightbox" pour afficher un élément (CSS)

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31751

    le Ven 13 Déc 2013 - 11:52

    Effet "lightbox" en CSS

    Bonjour,

    Dans ce tutoriel je vais vous expliquer comment créer une sorte de "lightbox" pour y placer un élément de votre choix. Une "lightbox" est un effet crée en javascript qui, lors d'un clic sur une image par exemple, va placer un voile noir sur la page et agrandir l'image au centre. L'élément est alors "au dessus" de la page et celle-ci n'est plus accessible momentanément. Pour fermer l'élément il faut alors cliquer sur un bouton "X" ou "fermer", ou bien directement sur la zone sombre autour de l'image ou de l'élément.
    Un petit exemple vous parlera peut-être d'avantage.

    Puisque nous n'allons ici crée qu'un "effet" lightbox, il n'y aura pas autant de transition (ça serait possible mais nous allons faire simple) et nous allons l'utiliser pour un élément unique et non comme dans l'exemple pour une série d'images type "galerie".

    Pour vous montrer ce que donnera ce tutoriel concrètement, voici quelques screens :


    Le bouton, qui se situe ici dans la PA.


    Au clic sur ce bouton le voile descend sur la page progressivement.


    Au final nous avons notre zone de contenu, isolée du reste par ce voile noir en opacité réduite.

    Commençons !

    Information : j'ai souhaité réaliser ce code en "tutoriel", il y a donc des étapes, une progression, des explications... Si vous voulez utiliser directement le code allez en fin de tuto' où il est récapitulé en entier. Cependant, avant d'aller poster toute demande d'aide en codage le concernant, lisez entièrement ce tutoriel.

    Crédit svp !En cas d'utilisation de ce tutoriel merci de placer un crédit (lien vers Never-Utopia) sur votre forum où est utilisé le code, même modifié. C'est un remerciement simple qui ne coûte pas grand chose Wink


    Pour pouvoir lire le contenu merci de poster un message à la suite Wink



    Un problème sur ce tutoriel ?Si vous avez un problème dans la réalisation de ce tutoriel, merci d'ouvrir un topic dans "Problème avec mon code"l afin que l'aide apportée puisse être efficace.



    Deadpoolio
    MasculinAge : 27Messages : 277

    le Sam 14 Déc 2013 - 10:52

    Prems mon capitaine + merci :)
    Pony62
    FémininAge : 21Messages : 61

    le Sam 14 Déc 2013 - 11:50

    Ouuuh ! voilà qui me semble bien intéressant!MERCI beaucoup ♥



    Underconstruction ♫
    Kassou
    FémininAge : 17Messages : 43

    le Sam 14 Déc 2013 - 17:29

    Merci **
    Etakine
    MasculinMessages : 17

    le Lun 16 Déc 2013 - 17:24

    Merci, enfin je vais savoir !
    SellsDreamsTV
    MasculinAge : 26Messages : 4

    le Lun 6 Jan 2014 - 23:25

    Mercii beaucoup !
    rhino
    MasculinAge : 21Messages : 25

    le Ven 17 Jan 2014 - 0:34

    Merci ! Very Happy
    [W]endy
    FémininAge : 26Messages : 117

    le Mar 18 Fév 2014 - 21:58

    Merci pour ce tuto ! (:
    Databar
    MasculinAge : 23Messages : 142

    le Jeu 20 Fév 2014 - 22:39

    merci
    Enidech
    MasculinAge : 26Messages : 39

    le Sam 22 Fév 2014 - 16:06

    Merci Sparrow, je suis curieux de voir ce tutoriel Very Happy
    Enidech
    MasculinAge : 26Messages : 39

    le Dim 23 Fév 2014 - 0:25

    Alors, c'est superbe, je me suis servi de cet effet pour une iframe centrée en lightbox, en revanche, j'ai juste question, est-il normal qu'à l'ouverture de "la lightbox", la page descend un peu, et qu'à sa fermeture, le forum retourne automatiquement en haut de page?

    C'est dommage, en soi, ça gâche un peu l'effet, quelqu'un sait-il comment éviter ce défilement de la page en arrière de la lightbox?

    Cordialement.
    x_Titia
    FémininAge : 25Messages : 92

    le Mer 26 Fév 2014 - 13:01

    Ca m'interresse beaucoup! Merci! Very Happy
    Lady Doll
    FémininAge : 27Messages : 101

    le Sam 1 Mar 2014 - 17:36

    merci =)
    Isalia
    FémininAge : 20Messages : 121

    le Mar 4 Mar 2014 - 20:15

    Je cherchais ! Merci ♥
    Choubakawa
    MasculinAge : 23Messages : 59

    le Mer 5 Mar 2014 - 21:30

    Merci :)



    Ailou ~3
    FémininAge : 17Messages : 60

    le Mar 11 Mar 2014 - 15:26

    Merci du partage ! :DD
    -Mishirame-
    FémininAge : 23Messages : 26

    le Lun 17 Mar 2014 - 15:34

    merci
    Minze
    FémininAge : 22Messages : 37

    le Mer 19 Mar 2014 - 18:39

    Merci !



    Aya Hanazawa
    FémininAge : 25Messages : 72

    le Lun 7 Avr 2014 - 23:10

    Han je le rechercher ce code, mille merci
    Darsey
    MasculinAge : 22Messages : 20

    le Sam 26 Avr 2014 - 12:05

    Merci :)
    Faraday
    FémininAge : 26Messages : 39

    le Lun 28 Avr 2014 - 18:48

    Thank's a lot!
    bibi0712
    FémininAge : 39Messages : 66

    le Ven 2 Mai 2014 - 13:32

    Merciiii  :love: 
    Makuro
    FémininAge : 24Messages : 74

    le Lun 12 Mai 2014 - 10:54

    *.*

    Exactement le genre d'effet que je recherchais pour mon forum. Thank you, Captain.
    Elora Hanta
    FémininAge : 25Messages : 69

    le Jeu 15 Mai 2014 - 11:19

    Merci  Very Happy 
    Canibal
    FémininAge : 25Messages : 26

    le Ven 16 Mai 2014 - 16:47

    Merciii!
    Contenu sponsorisé

    Aujourd'hui à 11:46


      La date/heure actuelle est Jeu 19 Jan 2017 - 11:46