Image resize

Looking for an Extension? Have an Extension request? Post your request here for help. (Note: This forum is community supported; while there is an Extensions Development Team, said team does not dedicate itself to handling requests in this forum)
Scam Warning
Post Reply
User avatar
Darloup
Registered User
Posts: 346
Joined: Sun Jun 27, 2010 8:59 pm
Location: Barranquilla (Colombia)
Name: Henry
Contact:

Image resize

Post by 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
User avatar
axe70
Registered User
Posts: 319
Joined: Sun Nov 17, 2002 10:55 am
Location: Italy
Contact:

Re: Image resize

Post by 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
User avatar
Onnozel Manneke
Registered User
Posts: 47
Joined: Mon Feb 01, 2021 8:37 pm
Location: Walhalla
Name: Loki Heimdall
Contact:

Re: Image resize

Post by Onnozel Manneke »

User avatar
Darloup
Registered User
Posts: 346
Joined: Sun Jun 27, 2010 8:59 pm
Location: Barranquilla (Colombia)
Name: Henry
Contact:

Re: Image resize

Post by Darloup »

Thanks to both you! (axe70 & Onnozel Manneke)

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

Return to “Extension Requests”