diff --git a/private/lib/media/mediaRenderers/MediaImage.php b/private/lib/media/mediaRenderers/MediaImage.php
index 3c997b9..31cf8ee 100644
--- a/private/lib/media/mediaRenderers/MediaImage.php
+++ b/private/lib/media/mediaRenderers/MediaImage.php
@@ -13,14 +13,15 @@ class MediaImage extends MediaRenderer{
 		if(array_key_exists("size", $opt) && array_key_exists($opt["size"], self::$SIZES)){
 			$size = $opt["size"];
 		}
+		$click = "";
 		if (array_key_exists("clickable", $opt)){
 			$clickable = $opt["clickable"];
 			if($clickable){
-				
+				$click='onclick="javascript:previewImage(\''.GUIHandler::getBaseUrl().'getImage.php?id='.$this->id.'&size='.MediaRendererInterface::SIZE_BIG.'\')"';
 			}
 		}
 		
-		return '<img itemprop="image" src="'.$this->getImageLink($size).'"/>';
+		return '<img itemprop="image"'.$click.' src="'.$this->getImageLink($size).'"/>';
 	}
 	
 	public function render(array $opt = array ()){
diff --git a/public/articolo.php b/public/articolo.php
index 85c8bff..0f4f465 100644
--- a/public/articolo.php
+++ b/public/articolo.php
@@ -107,7 +107,10 @@ try {
 }
 GUIHandler::generateHtmlHeaders(array("additionalHeaders"=>$additionalHeaders));
 ?>
+<div class="imageOverlay" onclick="javascript:hidePreview()"></div>
+<div class="clickableImageContainer" onclick="javascript:hidePreview()"></div>
 <div style="width:1000px;margin-left:auto;margin-right:auto;" itemscope itemtype="http://schema.org/Article">
+
 <?php 	
 	
 	GUIHandler::generateHeadPublic();
diff --git a/public/js/functions.js b/public/js/functions.js
index 1dc3558..5b6ed29 100644
--- a/public/js/functions.js
+++ b/public/js/functions.js
@@ -62,4 +62,20 @@ function bannerRoll(prev,pos){
 			$('#'+prev).parent().html(data);
 		}
 	});
+}
+
+function previewImage(imageSrc){
+	$('.clickableImageContainer').html('<img id ="clickImage" src="'+ imageSrc +'" />');
+	$('.imageOverlay').css("display","block");
+	$('.clickableImageContainer').css("display","block");
+//	$('#clickImage').focus();
+	$('html, body').animate({
+        scrollTop: $("body").offset().top
+    }, 1000);
+}
+
+function hidePreview(){
+	$('.imageOverlay').css("display","none");
+	$('.clickableImageContainer').css("display","none");
+	$('#clickImage').remove();
 }
\ No newline at end of file
diff --git a/public/style/public.css b/public/style/public.css
index 461d599..88e28d3 100644
--- a/public/style/public.css
+++ b/public/style/public.css
@@ -504,13 +504,25 @@ Password Recovery
                                        
 */
 
-.clickableImageContainer{
+.imageOverlay{
     position: fixed;
     opacity: 0.9;
     width: 100%;
     height: 100%;
     background-color: black;
     text-align: center;
-    z-index: 100;
+    z-index: 10;
+    margin-top: -10px;
+    margin-left: -10px;
+    display:none;
+}
+
+.clickableImageContainer{
+	position: absolute;
+    margin: auto;
+    text-align: center;
+    opacity: 1;
+    width: 100%;
+    z-index: 11;
+    display:none;
 }
-.clickableImageContainer > img{opacity:0;}
\ No newline at end of file