Skip to content

Instantly share code, notes, and snippets.

@erickjones

erickjones/Sexy LightBox .markdown

Created November 1, 2015 16:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erickjones/e29822bcd36fec463242 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erickjones/e29822bcd36fec463242 to your computer and use it in GitHub Desktop.
Download ZIP
Sexy LightBox
Raw
index.html
<section id="thumbsList">
<h3>New Zealand 2015</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet facere voluptas vel ipsam vero, cum voluptatum molestiae eos at nemo eum corrupti a maiores perspiciatis quod expedita, minus placeat, eius!</p>
<ul>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_12.png" alt="" /></li>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_71.png" alt="" /></li>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_9.png" alt="" /></li>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Screenshot_11.png" alt="" /></li>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/Social.jpg" alt=""/></li>
<li><img src="https://dl4rygnmrir77.cloudfront.net/muzli_feed/wp-content/uploads/2015/10/38.png" alt=""/></li>
</ul>
</section>
<div id="lightBox">
<img id="lightBoxImage" src="" alt="" />
<div id="prevImg"><span></span></div>
<div id="nextImg"><span></span></div>
<div id="closeLightbox-button"></div>
</div>
Raw
script.js
window.onload = function() {
var thumbsList = document.getElementById("thumbsList");
var allLIs = thumbsList.getElementsByTagName("li");
var allImages = thumbsList.getElementsByTagName("img");
var TheLightBox = document.getElementById("lightBox");
var ThelightBoxImage = document.getElementById("lightBoxImage");
var prevImg = document.getElementById("prevImg");
var nextImg = document.getElementById("nextImg");
var numberOfImages = allLIs.length;
var counter = 0;
var currentImage = counter;
function hasClass(el, className) {
if (el.classList)
return el.classList.contains(className)
else
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
function addClass(el, className) {
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className)) el.className += " " + className
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
el.className=el.className.replace(reg, ' ')
}
}
ThelightBoxImage.setAttribute("src", (allImages[0].getAttribute("src")));
function loadImageInLightBox(URL, callback){
var url = URL;
ThelightBoxImage.setAttribute("src", url);
if(typeof callback == "function"){
callback();
}
}
function loadLightBox(){
addClass(TheLightBox, "lightBox-active");
addClass(ThelightBoxImage, "active-image");
}
function unloadLightBox(){
removeClass(TheLightBox, "lightBox-active");
removeClass(ThelightBoxImage, "active-image");
}
function prevImage(){
if(counter <= 0){
counter = numberOfImages;
}
counter--;
loadImageInLightBox(allImages[counter].getAttribute("src"));
}
function nextImage(){
counter++;
if(counter == numberOfImages){
counter = 0;
}
loadImageInLightBox(allImages[counter].getAttribute("src"));
}
document.getElementById("lightBox").addEventListener("click", function(e){
switch (e.target.id) {
case "prevImg":
prevImage();
break;
case "nextImg":
nextImage();
break;
case "lightBoxImage":
break;
default:
unloadLightBox();
}
})
for (var i=0; i < allImages.length; i++){
allImages[i].setAttribute("id", "thumb_" + i);
allImages[i].addEventListener("click",
function (e){
var theIndex = e.target.id.match(/\d+/)[0];
counter = theIndex;
loadImageInLightBox(e.target.getAttribute("src"), function(){
loadLightBox(e.target.getAttribute("src"));
});
}
);
}
}
Raw
Sexy LightBox .markdown
Raw
style.css
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
$buttonWidth: 50px;
$primaryColor: #222222;
$secondaryColor: #E60000;
body {
background-color: $primaryColor;
font-family: Helvetica, sans-serif;
font-size: 16px;
color: #666;
}
#thumbsList {
overflow: hidden;
display: block;
margin: 50px auto;
width: 90%;
max-width: 1000px;
background: #eaeaea;
border: 1px solid #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 20px;
}
#thumbsList h3 {
margin-bottom: .5em;
font-size: 2.3em;
color: #333;
}
#thumbsList p {
font-size: 1em;
margin-bottom: 1em;
}
#thumbsList ul {
list-style-type: none;
padding: 0;
}
#thumbsList ul li {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
overflow: hidden;
width: 33.3%;
height: 200px;
float: left;
background-color: #000;
}
#thumbsList ul li img {
position: relative;
display: block;
max-width: 100%;
transition: all 0.3s linear;
}
#thumbsList ul li img:hover {
opacity: 0.5;
-webkit-transform: scale(2) rotate(30deg); /* Safari */
-ms-transform: scale(2) rotate(30deg); /* IE 9 */
transform: scale(2) rotate(30deg); /* Standard syntax */
transition: transform 10s ease, opacity 1s ease;
}
#lightBox {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.8);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
.lightBox-active {
display: block !important;
opacity: 1 !important;
top: 0 !important;
bottom: 0 !important;
transition: all 0.5s ease;
}
#prevImg {
position: absolute;
top: 50%;
margin-top: -($buttonWidth/2);
width: $buttonWidth;
height: $buttonWidth;
cursor: pointer;
background-color: $secondaryColor;
transition: all 0.3s ease;
}
#prevImg:hover, #nextImg:hover {
background-color: #B30000;
transition: all 0.3s ease;
}
#prevImg:after {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 8px;
margin-top: 13px;
margin-left: 20px;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(45deg);
}
#nextImg {
@extend #prevImg;
right: 0;
}
#nextImg:after {
margin-left: 8px;
transform: rotate(225deg);
}
#closeLightbox-button {
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
background-color: #B30000;
width: $buttonWidth;
height: $buttonWidth;
transition: all 0.7s ease;
}
#closeLightbox-button:hover {
background-color: red;
transform: rotate(180deg);
transition: all 0.3s ease;
}
#closeLightbox-button:before {
content: "";
display: block;
position: relative;
width: 2px;
height: 25px;
background-color: white;
left: 23px;
top: 12px;
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Safari */
transform: rotate(40deg);
}
#closeLightbox-button:after {
content: "";
display: block;
position: relative;
width: 2px;
height: 25px;
background-color: white;
left: 23px;
top: -13px;
-ms-transform: rotate(-40deg); /* IE 9 */
-webkit-transform: rotate(-40deg); /* Safari */
transform: rotate(-40deg);
}
#lightBox img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.active-image {
max-width: 90% !important;
max-height: 100% !important;
transition: all .5s ease !important;
}
@media (max-width: 1000px) {
#thumbsList ul li {
position: relative;
width: 50%;
}
}
@media (max-width: 680px) {
#thumbsList ul li {
position: relative;
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment