LIKE Superbox

gdr86

Nuovo Utente
29 Mag 2014
2
0
0
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
Codice:
;(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

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

Codice:
*,
*: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

HTML:
<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
 
Ultima modifica di un moderatore: