Last active
April 1, 2016 11:46
-
-
Save abedsujan/f995d0befc9222c30064b8f014c27e9f to your computer and use it in GitHub Desktop.
Jquery Modal or lightbox example
This file contains hidden or 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
| //Problem: User when clicking on image goes to a dead end | |
| //Solution: Create an overlay with the large image - Lightbox | |
| var $overlay = $('<div id="overlay"></div>'); | |
| var $image = $("<img>"); | |
| var $caption = $("<p></p>"); | |
| //An image to overlay | |
| $overlay.append($image); | |
| //A caption to overlay | |
| $overlay.append($caption); | |
| //Add overlay | |
| $("body").append($overlay); | |
| //Capture the click event on a link to an image | |
| $("#imageGallery a").click(function(event){ | |
| // Stop click on an image the browser follows | |
| event.preventDefault(); | |
| var imageLocation = $(this).attr("href"); | |
| //Update overlay with the image linked in the link | |
| $image.attr("src", imageLocation); | |
| //Show the overlay. | |
| $overlay.show(); | |
| //Get child's alt attribute and set caption | |
| var captionText = $(this).children("img").attr("alt"); | |
| $caption.text(captionText); | |
| }); | |
| //When overlay is clicked | |
| $overlay.click(function(){ | |
| //Hide the overlay | |
| $overlay.hide(); | |
| }); |
This file contains hidden or 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> | |
| <title>Jquey modal example by Image Gallery</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| background: #384047; | |
| } | |
| h1 { | |
| color: #fff; | |
| text-align: center | |
| } | |
| ul { | |
| list-style:none; | |
| margin: 0 auto; | |
| padding: 0; | |
| display: block; | |
| max-width: 780px; | |
| text-align: center; | |
| } | |
| ul li { | |
| display: inline-block; | |
| padding: 8px; | |
| background:white; | |
| margin:10px; | |
| } | |
| ul li img { | |
| display: block; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| /** Start Coding Here **/ | |
| #overlay { | |
| background:rgba(0,0,0,0.7); | |
| width:100%; | |
| height:100%; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| display:none; | |
| text-align:center; | |
| } | |
| #overlay img { | |
| margin-top: 10%; | |
| } | |
| #overlay p { | |
| color:white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Image Gallery</h1> | |
| <ul id="imageGallery"> | |
| <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Image of Refferal Machine" title="Refferal Machine By Matthew Spiel"></a></li> | |
| <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Image of Space Juice" title="Space Juice by Mat Helme"></a></li> | |
| <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Image of Education" title="Education by Chris Michel"></a></li> | |
| <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Image of Wanted: Copy McRepeatsalot" title="Wanted: Copy McRepeatsalot by Chris Michel"></a></li> | |
| <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Image of Sebastian" title="Sebastian by Mat Helme"></a></li> | |
| <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Image of Skill Polish" title="Skill Polish by Chris Michel"></a></li> | |
| <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Image of Chuck" title="Chuck by Mat Helme"></a></li> | |
| <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Image of Library" title="Library by Tyson Rosage"></a></li> | |
| <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Image of Boat" title="Boat by Griffin Moore"></a></li> | |
| <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Image of Illustrator Foundations" title="Illustrator Foundations by Matthew Spiel"></a></li> | |
| <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Image of Treehouse Shop" title="Treehouse Shop by Eric Smith"></a></li> | |
| </ul> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="jquery_modal.js" type="text/javascript" charset="utf-8"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment