Lightbox from BG Image

Developer
Jeremy P. Beasley
Size
4,039 Kb
Views
20,240
  1. Lightbox from BG Image Previews
  2. Lightbox from BG Image HTML Codes
  3. Lightbox from BG Image CSS Codes
  4. Lightbox from BG Image JS Codes

How do I make an lightbox from bg image?

This Jquery extension allows you to handle single and double clicks on the same element correctly.Forked from Alex Vazquez's Pen Jquery Extension to Handle Clicks and Double Clicks.. What is a lightbox from bg image? How do you make a lightbox from bg image? This script and codes were developed by Jeremy P. Beasley on 24 October 2022, Monday.

Lightbox from BG Image Previews
IQ Test

Lightbox from BG Image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lightbox from BG Image</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://tympanus.net/Development/ModalWindowEffects/css/component.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Captain's Log:
- Add hammer.js on tap events
- Add interia scrolling on modal interior
-->
<div class="md-modal md-effect-8" id="modal-12">	<button class="md-close">Close me!</button>	<div class="md-content"> <img class="bigimage" id="bigimage" src="">	<!--<div class="imagefocus"> </div>--> <div class="meta">	<h2>PJ60 Desk Lamp</h2> <div class="options"> <a href="" class="want">+ Want</a> <a href="">Buy</a> <a href="">Share</a> </div> <p class="price">$743 from: <a href="">Ӧrsjӧ Belysning Interiors</a></p> <p>Wanted by 2,343</p> <p>Owned by 153</p> <p>Collected by 12</p> <small>Originally added by <a href="">Dahlia Brue</a> on March 12, 2014</small> </div>	</div>	</div>
<div class="md-overlay"></div><!-- the overlay element -->
<div id="1" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(http://www.shopfolklore.com/media/catalog/product/cache/1/image/0dc2d03fe217f8c83829496872af24a0/1/1/1136_5A740011DFB04004B9F7525DC3F021FE0000355593000287334701000LC1AF69633B15470292AEEF0301CC13FF_1.jpg)">
<!-- <div class="plus"></div>
-->
</div>
<div id="2" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(https://38.media.tumblr.com/3e1087839dfcdea9f1d006ae566007e1/tumblr_n41oytM1w31qbxk0wo2_500.jpg)"></div>
<div id="3" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(https://31.media.tumblr.com/fea7260034662d69dff3256401e820aa/tumblr_n6csw5qS5d1qfnx95o1_500.jpg)"></div>
<div id="4" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(https://38.media.tumblr.com/873f437194ebdbe363f621942177a703/tumblr_n2swl1W8uS1qfnx95o1_500.jpg)"></div>
<div id="5" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(https://37.media.tumblr.com/cc2aebb9876595bb0d8f58a22da3e202/tumblr_n2n3bvt9R21qfnx95o1_500.jpg)"></div>
<div id="6" class="floatpic w2 h2 md-trigger" data-modal="modal-12" style="background-image: url(https://31.media.tumblr.com/235dda8998aab0595dd8e686a0d1fc19/tumblr_mrw7oy3N4e1s4rbk1o1_500.jpg)"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://tympanus.net/Development/ModalWindowEffects/js/modernizr.custom.js'></script>
<script src='https://tympanus.net/Development/ModalWindowEffects/js/modalEffects.js'></script>
<script src='https://tympanus.net/Development/ModalWindowEffects/js/classie.js'></script>
<script src='https://hammerjs.github.io/dist/hammer.js'></script>
<script src='https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lightbox from BG Image - Script Codes CSS Codes

textarea:focus, input:focus{ outline: 0;
}
*:focus { outline: 0;
}
html,body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
body.locked { overflow: hidden;
}
body.unlocked { overflow: auto;
}
.md-modal { -webkit-transform: none !important; top: 0;
left: 0;
width: 100%; overflow-y: auto; height: 100%; max-width: 2000px; -webkit-overflow-scrolling: touch; position: fixed;
}
.md-content { width: 50%; color: black; background: white; min-height: 100vh;
}
.md-content p { width: 100%;
}
.md-content .options { width: 100%;
display: block;
overflow: auto;
margin-bottom: 10px;
}
.md-content .options a { border: 1px solid black;
padding: 15px;
float: left;
margin-right: 20px;
text-decoration: none;
color: black;
}
.md-content .options a.want { color: white; background: black;
}
.md-overlay {
background-image: url(http://test.bsley.com/verygoods/_img/gradient.png);
background-size: 160% 151%;
background-position: center center
}
.md-show ~ .md-overlay { opacity: .7; visible: visible;
}
.imagefocus { min-width: 300px; width: 100%; height: 1px; overflow: auto; padding:0 0 70% 0 !important; background-repeat: no-repeat; background-position: center center; background-size: contain;
}
.md-close { position: fixed; top: 8vw;
right: 8vw; height: 60px; text-indent: -9999999px; border: none; width: 60px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/close.svg); background-repeat: no-repeat; background-size: 100%; z-index: 99999999; overflow: hidden;
display: block;
}
.md-close:hover { opacity: .8;
}
.bigimage { width: 100%;
}
body { margin: 50px;
}
.floatpic { width: 27%; height: 1px; overflow: hidden; padding-bottom: 35%; background-size: contain; background-position: center center; background-repeat: no-repeat; float: left; margin: 2.5%; cursor: pointer;
/* transition: all 100ms ease-out;
*/}
.plus { width: 20%; height: 1px; padding-bottom: 20%; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91488/plus.svg); background-size: 100%; border-radius: 10000px; position: relative; top: 40%; left: 40%;
}
/*.floatpic:hover {	-webkit-transform: scale(1.01);	transform-origin: center center;
}
*/
@media screen and (max-width: 800px) { body { margin: 15%; }	.md-content { width: 100%; padding-top: 0px; } .md-content .meta { margin: 7%; padding: 0; } .imagefocus { padding-bottom: 100% !important; } .floatpic { width: 95%; padding-bottom: 114%; }
}

Lightbox from BG Image - Script Codes JS Codes


$(document).ready(function() { $('.floatpic').on('click', function(event) { /*var myID = $(this).attr('id'); console.log(myID);*/
/* var url = this.style.backgroundImage;
*/
var imgurl = $(this).css('background-image');
imgurl = imgurl.replace('url(','').replace(')',''); console.log(imgurl); $("#bigimage").attr("src",imgurl); /*$('.imagefocus').css("background-image", url);*/ $('body').toggleClass("locked", "unlocked"); }); $('.md-close').on('click', function(event) { $('body').toggleClass("locked", "unlocked"); });
});
Lightbox from BG Image - Script Codes
Lightbox from BG Image - Script Codes
Home Page Home
Developer Jeremy P. Beasley
Username jeremypbeasley
Uploaded October 24, 2022
Rating 3
Size 4,039 Kb
Views 20,240
Do you need developer help for Lightbox from BG Image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeremy P. Beasley (jeremypbeasley) Script Codes
Name
Credit Card Form Auto-tab Continuous Typing V2
Google Image Search by Keyword
Calling Webcam API
Responsive photo tiles
Scroll to Top
A Pen by Jeremy P. Beasley
Lazy Load Test
GridGridGrid
Number Climb
Art 3.2
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!