LIKE Superbox

[gdr86]

Carissimi, per il mio sito mi aiuto molto con quello che trovo in rete, non essendo un informatico, quindi cerco di modificare ed adattare quello che trovo.
Ad oggi però nn sono ancora riuscito a sbrogliare questo problema che ora vi posto...

ho questo codice javascript

;(function($) {
		
	$.fn.SuperBox = function(options) {
		
		var superbox      = $('<div class="superbox-show"></div>');
		var superboximg   = $('<img src="" class="superbox-current-img">');
		var superboxclose = $('<div class="superbox-close"></div>');
		
		superbox.append(superboximg).append(superboxclose);
		
		return this.each(function() {
			
			$('.superbox-list').click(function() {
		
				var currentimg = $(this).find('.superbox-img');
				var imgData = currentimg.data('img');
				superboximg.attr('src', imgData);
				
				if($('.superbox-current-img').css('opacity') == 0) {
					$('.superbox-current-img').animate({opacity: 1});
				}
				
				if ($(this).next().hasClass('superbox-show')) {
					superbox.toggle();
				} else {
					superbox.insertAfter(this).css('display', 'block');
				}
				
				$('html, body').animate({
					scrollTop:superbox.position().top - currentimg.width()
				}, 'medium');
			
			});
						
			$('.superbox').on('click', '.superbox-close', function() {
				$('.superbox-current-img').animate({opacity: 0}, 200, function() {
					$('.superbox-show').slideUp();
				});
			});
			
		});
	};
})(jQuery);

ad esso sono collegate una serie di immagini ed un foglio css

per le immagini c'è questo html

<div class="superbox">
				<div class="superbox-list">
					<img src="img/superbox/superbox-thumb-1.jpg"  data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
                   
                     </div><!--
				--><div class="superbox-list">
					<img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
            				</div><!--
...................................
..................................

che si ripete ovviamente...

sul foglio css ho questi righi tra gli altri

*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* SuperBox */
.superbox-list {
	display:inline-block;
	*display:inline;
	zoom:1;
	width:12.5%;
	margin-bottom:10px;
}
.superbox-img {
	max-width:100%;
	width:100%;
	cursor:pointer;
	border-radius: 10px;

}
.superbox-show {
	text-align:center;
	position:relative;
	background: none;
	box-shadow:inset 0 1px 5px #111;
	-webkit-box-shadow:inset 0 1px 5px #111;
	-moz-box-shadow:inset 0 1px 5px #111;
	width:100%;
    float:left;
	padding:25px;
	display:none;
	border-radius: 50px;
	margin-bottom:15px;
	margin-top:15px;
}
.superbox-current-img {
	max-width:100%;
	box-shadow:0 1px 4px #222;
	border:1px solid #222;
	border-radius: 10px;
}
.superbox-img:hover {
	opacity:0.8;
}
.superbox-float {
	float:left;
}

@media only screen and (min-width: 320px) {
	.superbox-list {
		width:50%;
	}
}
@media only screen and (min-width: 486px) {
	.superbox-list {
		width:25%;
	}
}
@media only screen and (min-width: 768px) {
	.superbox-list {
		width:16%;
	}
}
@media only screen and (min-width: 1025px) {
	.superbox-list {
		width:20%;
	}
}

l'effetto finale è un box che si apre tra le immagini a mostrare quella ingrandita...
ecco, vorrei inserire sotto l'immagine relativa questo rigo diciamo

<fb:like href="http://www.bujedao.com" layout="button_count" action="like" show_faces="false" share="true"></fb:like><br>Antedon mediterranea</p>

come devo fare?...potete modificarmi il codice javascript perche mi mostri sotto l'immagine ingrandita anche qualcos'altro?
grazie