Image resize

[Darloup]

Hello,

When I include a very large image in a post (let’s say 2000 x 2000 pix), this image is automatically resized in order to fit within the dimensions of my forum this is very fine.

On occasions however, I’d like that when one clicks on this posted image, it could open up in a pop-up window with its original size.

Is there an extension that does just that?

With my anticipated thanks,

Henry

[axe70]

I do not know if there is an extension for this, surely yes, anyway you could achieve just adding:

into your css:

Code: Select all

.imgFullOpen{
 position:fixed;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
 z-index:99999;
 width:auto;
 height:auto;
 overflow:scroll;
 text-align:center;
 /*border:3px solid #333*/
}
.postImageViewFull{
 position:relative;
 top:0px;
 right:0px;
 bottom:0px;
 left:0px;
 margin:auto;
 z-index:99999;
 width:auto;
 height:auto;
 overflow:scroll;
 text-align:center;
}

into the overall_footer.html (just before the closing body tag):

Code: Select all

<div id="imgFullOpen" class="imgFullOpen" style="display:none"><img class="postImageViewFull" src="" /></div>
<script>
$(".postimage").on("click", function(event) {
	
		  $(".postImageViewFull").attr("src",this.src);
		  
if( $(window).height() > this.naturalHeight || $(window).width() > this.naturalWidth ){
  $(".imgFullOpen").css({"overflow":"hidden","display":"block","width":this.naturalWidth,"height":this.naturalHeight});//display":"block","height":"100%"
  $(".postImageViewFull").css({"display":"block","width":this.naturalWidth,"height":this.naturalHeight});//display":"block","height":"100%"
 
 	var remListenerRecCont = $(document).mouseup(function (e) {
   if ($(e.target).closest(".postImageViewFull").length === 0 && (e.target != $('html').get(0))) {
     $(".imgFullOpen").css({ "display":"none" });
     remListenerRecCont.unbind('mouseup');
    } 
  });
 
 } else {
  $(".imgFullOpen").css({"overflow":"auto","display":"block","width":"100%","height":"100%"});
  $(".postImageViewFull").css({"display":"block","width":this.naturalWidth,"height":this.naturalHeight});
}

 $(".postImageViewFull").on("mouseup", function(event) {
  $(".imgFullOpen").css({"display":"none"});
 });

});
</script>

i've do it on fly, so do not aspire to be perfect, because it could be applied easily in few lines ease effects etc, the css may is redundant, anyway the code above will render you something like this:
https://youtu.be/YzC1nkG2Wj4

as said, to put this into an extension making it awesome is a joke. Cheers!

p.s remember to recompile stale template into acp if you apply this, and that, you could just want to open it into a new tab as full, just using something like:

Code: Select all

$(".postimage").on("click", function(event) {
 window.open(this.src);
}

into your overall_footer

[Onnozel Manneke]

https://www.phpbb.com/customise/db/extension/lightbox/

[Darloup]

Thanks to both you! (axe70 & Onnozel Manneke)

I think I'll use the extension in order not have to modify/add code!