Created
August 6, 2018 21:24
-
-
Save availit/44bba61b50f910b2c7ab1ac8d80c8957 to your computer and use it in GitHub Desktop.
Demo for a jQuery plugin for creating responsive and touch enabled image galleries
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Lightbox Plugin Demo</title> | |
| <!-- LINK TO REQUIRED PLUGIN CSS FILE --> | |
| <link href='https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'> | |
| <!-- LINK TO CUSTOM CSS --> | |
| <link href='https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/demo.css' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="gallery"> | |
| <!-- IMAGE ONE --> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image1.jpg" class="big"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb1.jpg" alt="Beautiful Image" title="Beautiful Image"/> | |
| </a> | |
| <!-- IMAGE TWO --> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image2.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb2.jpg" alt="" title=""/> | |
| </a> | |
| <!-- IMAGE THREE --> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image3.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb3.jpg" alt="" title="Beautiful Image"/> | |
| </a> | |
| <!-- IMAGE FOUR --> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image4.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb4.jpg" alt="" title=""/> | |
| </a> | |
| <div class="clear"></div> <!-- THIS CREATES A LINE BREAK IN THE GRID --> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image5.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb5.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image6.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb6.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image7.jpg" class="big"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb7.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image8.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb8.jpg" alt="" title=""/> | |
| </a> | |
| <div class="clear"></div> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image9.jpg" class="big"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb9.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image10.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb10.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image11.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb11.jpg" alt="" title=""/> | |
| </a> | |
| <a href="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/image12.jpg"> | |
| <!-- IMAGE THUMBNAIL --> | |
| <img src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/images/thumbs/thumb12.jpg" alt="" title=""/> | |
| </a> | |
| <div class="clear"></div> | |
| </div> | |
| <!-- JQUERY LIBRARY INCLUDE (do not include if you already load jquery on your page) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <!-- LOAD LIGHTBOX PLUGIN after jquery --> | |
| <script type="text/javascript" src="https://www.jqueryscript.net/demo/Responsive-Touch-enabled-jQuery-Image-Lightbox-Plugin/dist/simple-lightbox.min.js"></script> | |
| <!-- INITIALIZE PLUGIN AND CONNECT TO GALLERY MARKUP --> | |
| <script> | |
| $(function(){ | |
| var gallery = $('.gallery a').simpleLightbox({ navText: [ '‹', '›' ] }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment