Last active
August 14, 2018 18:48
-
-
Save LouisWhit/cc4fccbf68f0e054ab20e68d31071622 to your computer and use it in GitHub Desktop.
A multi image sliding gallery to track the mod ul left and right depending on navigation arrow clicked.
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> | |
| <title>Gallery</title> | |
| <style></style> | |
| </head> | |
| <body> | |
| <div class="container container-fluid greyBand galleryBand" data-questions="background-color|border-top-color" data-options="color|color"> | |
| <div class="row"> | |
| <div class="col-md-12 col-sm-12" data-droppable="none" data-dummy=""> | |
| <div class="container container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="arrowLeft"> | |
| <i class="fa fa-arrow-left"></i> | |
| </div> | |
| <div data-editor="element" data-title='Body Copy' class="galleryData"> | |
| [EXAMPLE Gallery] | |
| </div> | |
| <div class="arrowRight"> | |
| <i class="fa fa-arrow-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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
| /* Client Specific - Gallery | |
| ============================================== */ | |
| .galleryBand { | |
| overflow:hidden; | |
| } | |
| .galleryBand .arrowLeft{ | |
| position: absolute; | |
| left:15px; | |
| top: 90px; | |
| cursor: pointer; | |
| z-index: 9999; | |
| } | |
| .galleryBand .arrowLeft i{ | |
| font-size:24px; | |
| } | |
| .galleryBand .arrowRight{ | |
| position: absolute; | |
| right:15px; | |
| top: 90px; | |
| cursor: pointer; | |
| z-index: 9999; | |
| } | |
| .galleryBand .arrowRight i{ | |
| font-size:24px; | |
| } | |
| .galleryData{ | |
| position: relative; | |
| overflow:hidden; | |
| margin-right: 55px; | |
| } | |
| .galleryData ul{ | |
| display: block; | |
| padding:0; | |
| margin:15px 50px; | |
| height: 200px; | |
| overflow:hidden; | |
| position: relative; | |
| left:0; | |
| transition: 0.5s all ease; | |
| } | |
| .galleryData ul li{ | |
| display: block; | |
| padding:0; | |
| margin:0; | |
| height: 185px; | |
| width:185px; | |
| margin:0 8px; | |
| float: left; | |
| } | |
| .galleryData ul li a{ | |
| cursor: default; | |
| } | |
| .galleryData ul li img{ | |
| max-height: 185px; | |
| height: 185px; | |
| object-fit:cover; | |
| } | |
| /* ============================================= */ |
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
| // 04 - Gallery | |
| $(".galleryData").each(function() { | |
| var galleryData = $(this); | |
| var numberOfItems = galleryData.find("ul li").length; | |
| var widthOfItem = galleryData.find("ul li").width() + 16; | |
| galleryData.find("ul").width(numberOfItems * widthOfItem); | |
| }); | |
| $(".galleryBand .arrowLeft").on('click', function(event) { | |
| var thisGallery = $(this).parent().find(".galleryData ul"); | |
| var currentLeft = parseInt(thisGallery.css('left')); | |
| console.log(currentLeft); | |
| if (currentLeft !== 0) { | |
| var newLeft = currentLeft + 200; | |
| if (newLeft > 0) { | |
| newLeft = 0; | |
| } | |
| thisGallery.css('left', newLeft); | |
| } | |
| }); | |
| $(".galleryBand .arrowRight").on('click', function(event) { | |
| var thisGallery = $(this).parent().find(".galleryData ul"); | |
| var currentLeft = parseInt(thisGallery.css('left')); | |
| var endOfGallery = (thisGallery.find("li").length - 3) * -200; | |
| console.log(endOfGallery+"--"+currentLeft); | |
| if (currentLeft < endOfGallery) { | |
| var newLeft = endOfGallery; | |
| } else { | |
| var newLeft = currentLeft - 200; | |
| } | |
| thisGallery.css('left', newLeft); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment