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.

index.html

<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>

script.js

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');
});

style.css

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;
    }
}