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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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.



    avatar
    Deadpoolio
    MasculinAge : 27Messages : 277

    le Sam 14 Déc 2013 - 10:52

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

    le Sam 14 Déc 2013 - 11:50

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



    Underconstruction ♫
    avatar
    Kassou
    FémininAge : 18Messages : 43

    le Sam 14 Déc 2013 - 17:29

    Merci **
    avatar
    Etakine
    MasculinMessages : 17

    le Lun 16 Déc 2013 - 17:24

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

    le Lun 6 Jan 2014 - 23:25

    Mercii beaucoup !
    avatar
    rhino
    MasculinAge : 22Messages : 25

    le Ven 17 Jan 2014 - 0:34

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

    le Mar 18 Fév 2014 - 21:58

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

    le Jeu 20 Fév 2014 - 22:39

    merci
    avatar
    Enidech
    MasculinAge : 26Messages : 39

    le Sam 22 Fév 2014 - 16:06

    Merci Sparrow, je suis curieux de voir ce tutoriel Very Happy
    avatar
    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.
    avatar
    x_Titia
    FémininAge : 26Messages : 92

    le Mer 26 Fév 2014 - 13:01

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

    le Sam 1 Mar 2014 - 17:36

    merci =)
    avatar
    Isalia
    FémininAge : 17Messages : 125

    le Mar 4 Mar 2014 - 20:15

    Je cherchais ! Merci ♥
    avatar
    Choubakawa
    MasculinAge : 24Messages : 77

    le Mer 5 Mar 2014 - 21:30

    Merci :)



    avatar
    Ailou ~3
    FémininAge : 17Messages : 61

    le Mar 11 Mar 2014 - 15:26

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

    le Lun 17 Mar 2014 - 15:34

    merci
    avatar
    Minze
    FémininAge : 23Messages : 37

    le Mer 19 Mar 2014 - 18:39

    Merci !



    avatar
    Aya Hanazawa
    FémininAge : 26Messages : 72

    le Lun 7 Avr 2014 - 23:10

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

    le Sam 26 Avr 2014 - 12:05

    Merci :)
    avatar
    Faraday
    FémininAge : 27Messages : 39

    le Lun 28 Avr 2014 - 18:48

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

    le Ven 2 Mai 2014 - 13:32

    Merciiii  :love: 
    avatar
    Makuro
    FémininAge : 25Messages : 75

    le Lun 12 Mai 2014 - 10:54

    *.*

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

    le Jeu 15 Mai 2014 - 11:19

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

    le Ven 16 Mai 2014 - 16:47

    Merciii!
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Sep 2017 - 11:07