ShowBox - jQuery plugin

Example 1

Example 2

Requirements

• jQuery >= 1.7.1

Installation

Add three lines to the HEAD of the page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery-an-showbox.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery-an-showbox.css">"

Add photos to page:

<div id="photos1"> 
<ul>
<li><a href="imgBig1.jpg"><img src="imgThumb1.jpg"></a></li>
<li><a href="imgBig2.jpg"><img src="imgThumb2.jpg"></a></li>
<li><a href="imgBig3.jpg"><img src="imgThumb3.jpg"></a></li>
<li><a href="imgBig4.jpg"><img src="imgThumb4.jpg"></a></li>
<li><a href="imgBig5.jpg"><img src="imgThumb5.jpg"></a></li>
<ul>
</div>

Initialize plugin on page load and load data:

<script type="text/javascript">
$(document).ready(function(){
	
    var menuBar = '<div style="padding-top: 5px;width: 250px;position: '
    +'relative;left: 50%;margin-left: -125px;"><div style="float:left;'
    +'margin-top: 5px;width:80px;"><div id="gplus" class="g-plusone" '
    +'data-size="medium"></div></div><div style="float:left;margin-top:5px;'
    +'width:90px;"><a href="https://twitter.com/share" '
    +'class="twitter-share-button">Tweet</a></div><div style="float:left;'
    +'margin-top:5px;width:80px;" id="fblike"><fb:like send="false" '
    +'layout="button_count" width="100" show_faces="false"></fb:like></div></div>';

    var update  = function(){
	    if(typeof(FB) !== 'undefined')
		     FB.XFBML.parse(document.getElementById('fblike'));
	    if(typeof(gapi) !== 'undefined') {
		    gapi.plusone.render(document.getElementById('gplus'),{
			    'href':location.href,
			    'annotation':'bubble',
			    'width': 90,
			    'align': 'left',
			    'size': 'medium'
		    });
	    }
	    if(typeof(twttr) !== 'undefined') {
		    $('#showbox .twitter-share-button').attr('data-url',location.href);
		    twttr.widgets.load();
	    }		            
    };

    var init_socials = function(doc) {
        var s = 'script';
        var d = doc;
        var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.src = url; js.id = id;
          fjs.parentNode.insertBefore(js, fjs);
        };
        load('https://connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
        load('https://apis.google.com/js/plusone.js', 'gplus1js');
        load('https://platform.twitter.com/widgets.js', 'tweetjs');
    }

    ShowBox.init('#photos1 a',{
	    closeCallback:function(){
		    alert('ShowBox closed1');
	    },
	    menuBarContent: menuBar,
	    onUpdate: update
    });

    init_socials(document);

});
</script>