Conditional Lightbox for Responsive Design

Developer
Nick Williams
Size
2,792 Kb
Views
28,336
  1. Conditional Lightbox for Responsive Design Previews
  2. Conditional Lightbox for Responsive Design HTML Codes
  3. Conditional Lightbox for Responsive Design CSS Codes
  4. Conditional Lightbox for Responsive Design JS Codes

How do I make an conditional lightbox for responsive design?

Fork of brad frost's example using enquire for conditional media query logic. What is a conditional lightbox for responsive design? How do you make a conditional lightbox for responsive design? This script and codes were developed by Nick Williams on 27 August 2022, Saturday.

Conditional Lightbox for Responsive Design Previews
IQ Test

Conditional Lightbox for Responsive Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Conditional Lightbox for Responsive Design</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet prefetch' href='http://bradfrost.github.com/this-is-responsive/styles.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pattern">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="let-there-be-light"> <span class="msg">Let there be light</span> <img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="" />
</a>
<div>
</div>
<!--End Pattern HTML-->
<div class="container">	<section class="pattern-description">	<h1>Conditional Lightbox</h1> <p>A lightbox that only initiates when enough screen space is available. The default behavior links through to the larger image asset providing a better experience for small screen users, while still providing a lightbox experience when it makes contextual sense. <a href=" http://bradfrostweb.com/blog/post/conditional-lightbox/">Read more about conditional lightbox</a></p>	</section>	<footer role="contentinfo">	<div>	<nav id="menu">	<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a>	</nav>	</div>	</footer>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.github.com/WickyNilliams/enquire.js/master/dist/enquire.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Conditional Lightbox for Responsive Design - Script Codes CSS Codes

img { max-width: 100%;
}
.let-there-be-light { display: block; position: relative; margin: 0 auto; text-align: center; width: 100%;
}
.let-there-be-light:hover .msg { background: rgba(0,0,0,0.7);
}
.msg { display: none;
}
.lightbox { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; text-align: center; padding: 3em 1em; background: rgba(0,0,0,0.9); }
@media all and (min-width: 45em) { .msg { display: block; position: absolute; top: 50%; left: 50%; width: 10em; margin-left: -5em; z-index; 1; background: rgba(0,0,0,0.5); color: #fff; border-radius: 2em; padding: 1em; }
}

Conditional Lightbox for Responsive Design - Script Codes JS Codes

$(document).ready(function(){ var $lightbox = $('.let-there-be-light'), lightEvt = 'click.lightbox'; function buildLightBox(src) { $('<div class="lightbox">').appendTo('body').html('<img src="'+src+'" alt="" />'); $('body').one('click','.lightbox',function(e) { $('.lightbox').remove(); }); } enquire.register('all and (min-width: 45em)', { match : function() { $lightbox.on(lightEvt, function(e){ e.preventDefault(); buildLightBox($(this).attr('href')); }); }, unmatch : function() { $lightboxy.off(lightEvt); } }).listen();
});
Conditional Lightbox for Responsive Design - Script Codes
Conditional Lightbox for Responsive Design - Script Codes
Home Page Home
Developer Nick Williams
Username WickyNilliams
Uploaded August 27, 2022
Rating 3
Size 2,792 Kb
Views 28,336
Do you need developer help for Conditional Lightbox for Responsive Design?

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!

Nick Williams (WickyNilliams) Script Codes
Name
React starter template
Bokeh
Particle particulars
Pointed
Headroom.js demo
Gridzzz
Closure classic
Got your callback
A Pen by Nick Williams
And just like that...
Create amazing SEO 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!