Created
January 14, 2013 03:48
-
-
Save othersmallcities/4527647 to your computer and use it in GitHub Desktop.
A CodePen by taotsu. Conditional Lightbox for Responsive Design - Added a simple caption, via a data tag to contribute to Brad Frosts great conditional lightbox loader.
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
<div class="pattern"> | |
<a data-caption="Light, it is!" 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> |
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
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); //http://adactio.com/journal/5429/ | |
$(document).ready(function(){ | |
lightboxInit(); | |
}); | |
function lightboxInit() { | |
$('.let-there-be-light').click(function(e){ | |
if(size == 'widescreen') { | |
e.preventDefault(); | |
var $thisHref = $(this).attr('href'); | |
var $caption = $(this).attr('data-caption'); | |
buildLightBox($thisHref, $caption); | |
} | |
}); | |
} | |
function buildLightBox(src, caption) { | |
$('<div class="lightbox">').appendTo('body').html('<img src="'+src+'" alt="" /><p class="caption">'+caption+'</p>'); | |
$('body').on('click','.lightbox',function(e) { | |
$('.lightbox').remove(); | |
}); | |
} | |
$(window).resize(function() { | |
size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); | |
}); |
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
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); | |
} | |
.caption { | |
background: rgba(200,200,200,0.9); | |
margin: 0 auto; | |
padding: 1em; | |
width: 30%; | |
} | |
@media all and (min-width: 45em) { | |
body:after { /* http://adactio.com/journal/5429/ */ | |
content: 'widescreen'; | |
display: none; | |
} | |
.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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment