Rounded Gallery with magnific-popup
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<div class="ct-galleryRounded ct-galleryRounded--8people ct-u-paddingBoth50 ct-gallery-popup"> <div class="container"> <!-- Rounded Gallery: 1 line --> <div class="row"> <div class="col-md-12"> <div class="ct-galleryFirstLine"> <div class="row"> <div class="col-lg-3 col-lg-offset-3 col-md-4 col-sm-4 col-sm-offset-2 col-xs-12"> <div class="ct-personImage"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/wallhaven-113665.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #1."> <img class="img-responsive img-circle img1" src="../assets/images/demo-content/roundedGallery-person1.png" alt="Person 1"> </a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft25"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/46e7a3321e16c34e8d4b44f248df4a32.jpeg" data-effect="mfp-move-from-top" title="Space on appropriate title #2."> <img class="img-responsive img-circle img2" src="../assets/images/demo-content/roundedGallery-person2.png" alt="Person 2"> </a> </div> </div> </div> </div> </div> </div> </div> <!-- Rounded Gallery: 2 line --> <div class="row"> <div class="col-md-12"> <div class="ct-gallerySecondLine"> <div class="row"> <div class="col-lg-3 col-lg-offset-2 col-md-4 col-sm-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft25"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/32e54468767ce97dfbc99ddf03d3a983.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #3."> <img class="img-responsive img-circle img3" src="../assets/images/demo-content/roundedGallery-person3.png" alt="Person 3"> </a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft50"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/wallhaven-86108.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #4."> <img class="img-responsive img-circle img4" src="../assets/images/demo-content/roundedGallery-person4.png" alt="Person 4"> </a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft75"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/wallhaven-93028.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #5."> <img class="img-responsive img-circle img5" src="../assets/images/demo-content/roundedGallery-person5.png" alt="Person 5"> </a> </div> </div> </div> </div> </div> </div> </div> <!-- Rounded Gallery: 3 line --> <div class="row"> <div class="col-md-12"> <div class="ct-galleryThirdLine"> <div class="row"> <div class="col-lg-3 col-lg-offset-3 col-md-4 col-sm-4 col-sm-offset-2 col-xs-12"> <div class="ct-personImage"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/wallhaven-119023.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #6."> <img class="img-responsive img-circle img6" src="../assets/images/demo-content/roundedGallery-person6.png" alt="Person 6"> </a> </div> </div> </div> <div class="col-lg-3 col-sm-4 col-md-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft25"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/3ac547676d5d3dbb8b2be73e2d214acc.jpg" data-effect="mfp-move-from-top" title="Space on appropriate title #7."> <img class="img-responsive img-circle img7" src="../assets/images/demo-content/roundedGallery-person7.png" alt="Person 7"> </a> </div> </div> </div> </div> </div> </div> </div> <!-- Rounded Gallery: 4 line --> <div class="row"> <div class="col-md-12"> <div class="ct-galleryFourLine"> <div class="row"> <div class="col-lg-3 col-lg-offset-5 col-md-4 col-sm-4 col-sm-offset-4 col-xs-12"> <div class="ct-personImage ct-personImage--MarginLeft50"> <div class="ct-imageHovered"> <a href="../assets/images/demo-content/roundedGallery-person8-huge.png" data-effect="mfp-move-from-top" title="Space on appropriate title #8."> <img class="img-responsive img-rounded img8" src="../assets/images/demo-content/roundedGallery-person8.png" alt="Person 8"> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> |
JavaScript files:
|
1 2 |
<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script> <script src="../assets/plugins/magnificPopup/init.js"></script> |
Screenshot
