with kittens! Next step is to add scrolling options.
A Pen by Lindsey Jacks on CodePen.
Last active
August 29, 2015 14:18
-
-
Save linzjax/45bed8e47299dbf3846b to your computer and use it in GitHub Desktop.
Lightbox from Scratch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <DOCTYPE! html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <meta name='viewpoint' content='width=device-width, initial-scale=1'> | |
| <title>Kittens!</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <header> | |
| <nav> | |
| </nav> | |
| </header> | |
| <section id='gallery'> | |
| <div class="three-column"> | |
| <div class='image'> | |
| <a href='http://buzzerg.com/wp-content/uploads/8589130569538-two-playful-kittens-wallpaper-hd.jpg' class='lightbox_trigger'><img src="http://buzzerg.com/wp-content/uploads/8589130569538-two-playful-kittens-wallpaper-hd.jpg" alt="Smirk Sing" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://hdwallpapercollection.com/wp-content/uploads/2012/12/two-cute-kitten-wallpaper.jpg" class='lightbox_trigger'><img src="http://hdwallpapercollection.com/wp-content/uploads/2012/12/two-cute-kitten-wallpaper.jpg" alt="Rent holding hands" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://www.lovethispic.com/uploaded_images/41500-Playful-Kittens.jpg" class='lightbox_trigger'><img src="http://www.lovethispic.com/uploaded_images/41500-Playful-Kittens.jpg" alt="Comedy of Errors pointing" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href='http://1.media.collegehumor.cvcdn.com/60/65/f683752ebb1eb0cfdf2302400f703cef-k14.jpg' class='lightbox_trigger'><img src="http://1.media.collegehumor.cvcdn.com/60/65/f683752ebb1eb0cfdf2302400f703cef-k14.jpg" alt="Hospital sitting" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://stuffpoint.com/kittens/image/223699-kittens-cute-kitten.jpg" class='lightbox_trigger'><img src="http://stuffpoint.com/kittens/image/223699-kittens-cute-kitten.jpg" alt="Pig Mailman 2" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://images2.fanpop.com/image/photos/13200000/Cute-Kittens-kittens-13247984-536-440.jpg" class='lightbox_trigger'><img src="http://images2.fanpop.com/image/photos/13200000/Cute-Kittens-kittens-13247984-536-440.jpg" alt="Comedy of Errors awkward" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href='http://www.signsfunny.com/wp-content/uploads/2012/09/cute-kittens-3.jpg' class='lightbox_trigger'><img src="http://www.signsfunny.com/wp-content/uploads/2012/09/cute-kittens-3.jpg" alt="Camalot" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://imgc.allpostersimages.com/images/P-473-488-90/21/2144/PCBCD00Z/posters/jane-burton-blue-dutch-rabbit-and-four-3-week-babies-and-black-and-white-kitten.jpg" class='lightbox_trigger'><img src="http://imgc.allpostersimages.com/images/P-473-488-90/21/2144/PCBCD00Z/posters/jane-burton-blue-dutch-rabbit-and-four-3-week-babies-and-black-and-white-kitten.jpg" alt="Smirking" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://images2.fanpop.com/image/photos/9800000/-Getting-Up-To-Mischief-cute-kittens-9820830-1024-768.jpg" class='lightbox_trigger'><img src="http://images2.fanpop.com/image/photos/9800000/-Getting-Up-To-Mischief-cute-kittens-9820830-1024-768.jpg" alt='Rent holding her' class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://images4.fanpop.com/image/photos/16100000/Cute-Kittens-kittens-16123995-1280-800.jpg" class='lightbox_trigger'><img src="http://images4.fanpop.com/image/photos/16100000/Cute-Kittens-kittens-16123995-1280-800.jpg" alt="Pig Mailman 2" class=''></a> | |
| </div> | |
| <div class='image'> | |
| <a href="http://www.awesomelycute.com/gallery/2013/09/super-cute-kitten-2268.jpg" class='lightbox_trigger'><img src="http://www.awesomelycute.com/gallery/2013/09/super-cute-kitten-2268.jpg" alt="Pig Mailman 2" class=''></a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // create lightbox styling | |
| function injectStyles(rule) { | |
| var div = $("<div />", { | |
| html: '<style>' + rule + '</style>' | |
| }).appendTo("body"); | |
| }; | |
| function lightbox_style() { | |
| injectStyles("#lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0, .7) repeat; text-align:center; }"); | |
| injectStyles("#content img { box-shadow:0 0 25px #111; -webkit-box-shadow:0 0 25px #111; -moz-box-shadow:0 0 25px #111; max-width: 90%; max-height: 90%; height: auto; width: auto;}"); | |
| injectStyles("#content {padding-top: 20px; height: 98%;}"); | |
| }; | |
| // if lightbox does not exist: create light box. ONLY DO THIS ONCE. | |
| function lightbox_create(image_clicked) { | |
| var create_lightbox = '<div id="lightbox">' + '<div id="content">' + '<img src = "' + image_clicked + '">' + '</div>' + '</div>'; | |
| $('body').append(create_lightbox); | |
| }; | |
| // if lightbox DOES exist: insert new image | |
| function lightbox_add_image(image_clicked) { | |
| $('#content').html('<img src = "' + image_clicked + '">'); | |
| }; | |
| $(document).ready(function(){ | |
| // lightbox pattern: | |
| // on clicking a gallery image | |
| $('.lightbox_trigger').click(function(e){ | |
| e.preventDefault(); | |
| // store clicked images href | |
| var image_href = $(this).attr("href"); | |
| //check if lightbox exists | |
| if ($('#lightbox').length === 0) { | |
| //insert lightbox style onto the page | |
| lightbox_style(); | |
| //insert lightbox html onto the page | |
| lightbox_create(image_href); | |
| } | |
| //if lightbox exists: do this instead | |
| else { | |
| //remove .hide(); | |
| $('#lightbox').show(); | |
| lightbox_add_image(image_href); | |
| } | |
| }); | |
| $('#lightbox').live('click', function() { | |
| $('#lightbox').hide(); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /***************** | |
| GENERAL | |
| *****************/ | |
| body { | |
| width: 60%; | |
| margin: 0 auto; | |
| padding: 0 auto; | |
| } | |
| #wrap{ | |
| width: 100%; | |
| background-color: #aaa; | |
| padding: 1% 5%; | |
| margin: 0 auto; | |
| margin-top: 5%; | |
| box-shadow: 0px 0px 50px rgba(0,0,0, .5); | |
| border: solid white 5px; | |
| } | |
| img { | |
| border: solid white 4px; | |
| } | |
| /***************** | |
| GALLERY | |
| *****************/ | |
| #gallery { | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .three-column { | |
| /* Prevent vertical gaps */ | |
| line-height: 0; | |
| -webkit-column-count: 3; | |
| -webkit-column-gap: 20px; | |
| -moz-column-count: 3; | |
| -moz-column-gap: 15px; | |
| column-count: 3; | |
| column-gap: 15px; | |
| } | |
| #gallery img { | |
| /* Just in case there are inline attributes */ | |
| width: 100% !important; | |
| height: auto !important; | |
| margin: 15px 15px 0 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment