fancybox Plugin for jQuery

From fancybox.net: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. Here I trigger a fancybox to open by code rather than a user click.

by mikeill

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="gallery_fancybox" class="gallery">
<ul class="gallery_grid gallery_shortcode ">
<li>
<a class="fancybox" title="" href="http://viewing-room.com/wp-content/uploads/2013/03/lumpy.jpg" rel="gallery">
<img title="" alt="lumpy" src="http://viewing-room.com/wp-content/themes/kingsize/timthumb.php?src=http://viewing-room.com/wp-content/uploads/2013/03/lumpy.jpg&w=112&h=112&zc=1&q=100">
<span class="image_hover" style="opacity: 0.7; display: none;"></span>
</a>
<div class="newTitle" style="display:none">lumpy</div>
</li>
<li>
<a class="fancybox" title="" href="http://viewing-room.com/wp-content/uploads/2013/03/bella.jpg" rel="gallery">
<img title="" alt="bella" src="http://viewing-room.com/wp-content/themes/kingsize/timthumb.php?src=http://viewing-room.com/wp-content/uploads/2013/03/bella.jpg&w=112&h=112&zc=1&q=100">
<span class="image_hover" style="opacity: 0; display: none;"></span>
</a>
<div class="newTitle" style="display:none">bella</div>
</li>
<li>
<a class="fancybox" title="" href="http://viewing-room.com/wp-content/uploads/2013/03/stained.jpg" rel="gallery">
<img title="" alt="stained" src="http://viewing-room.com/wp-content/themes/kingsize/timthumb.php?src=http://viewing-room.com/wp-content/uploads/2013/03/stained.jpg&w=112&h=112&zc=1&q=100">
<span class="image_hover" style="opacity: 0; display: none;"></span>
</a>
<div class="newTitle" style="display:none">stained</div>
</li>
</ul>
    </div>

CSS

/*  Note that the fancybox css file is loaded under the 
"Add Resources" tab to the left.  Normally you would load it in your <head> */

body {
   background-color: #eef;     
}
#TheFancybox {
    display: none;
}

.gallery a span.image_hover {
    background: url("http://viewing-room.com/wp-content/themes/kingsize/images/gallery_hover/hover_image_grid.png") no-repeat scroll center center black;
}
.gallery a span, .lightbox_blog span {
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.gallery_grid {
    list-style: none outside none;
    overflow: hidden;
    margin: 0 0 0 -3px;
    width: 460px;
}

JavaScript

jQuery(document).ready(function($) {
 /*alert("i'm here");*/
jQuery(".fancybox").fancybox({
     afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
   title : {
    type : 'inside'
   }
  }
 }); // fancybox
}); // ready