Loading...
  OR  Zero-K Name:    Password:   

Forum index  > General discussion   > Development   >

Simple forum image enlarge

4 posts, 585 views
Post comment
Filter:    Player:  
sort
CZrank[DDAM]aiphee
9 years ago
(edited 9 years ago)
Hi,
i made a simple script which enlarges image in forum on click, if you want to simply try it , insert this into your browser console after page with images is load (until next load only)

$(".forumPostText img").addClass('forumPostImage');
$(".forumPostImage").live('click', function () {
$(this).addClass('enlargedImage');
$(this).css({
'position': 'fixed',
'width': 'auto',
'height': 'auto',
'max-width': '100%',
'max-height': '100%',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)'
});
});
$(".enlargedImage").live('click', function () {
$(this).removeAttr('style');
$(this).removeClass('enlargedImage');
});


Permanent solution would be to add this to forum post view:

$("img").on('click', function () {
$(this).toggleClass('zoomedImage');
});


And this to CSS:

.zoomedImage {
position: fixed;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

+0 / -0
Skasi
9 years ago
(edited 9 years ago)
There's no need for any javascript, you can just use the CSS pseudo classe :active
Like so:
[quote].forumPostText img:active {
display: inline-block;
vertical-align: middle;
position: fixed;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}[/quote]

Anyway, if you want to maximize the chance of this being implemented you can make a pull request on the Infrastructure part of ZK.
+0 / -0
CZrank[DDAM]aiphee
9 years ago
(edited 9 years ago)
Well :active is only active when you hold that mouse button, so not so good.
Also, javascript is not a dirty word if you use it right.

Anyway, i dont have local copy here and lightbox or something lighter could be better solution. But this solution could not hurt i think.
+0 / -0

DErankAdminmojjj
9 years ago
(edited 9 years ago)
already adjusted max-width options, as also open full size in new tab. it is just not integrated as it is hanging in the github pull-request

anyway, thx for your work and interest.

speaking of which, if you want to contribute, github is the place to do so >> https://github.com/ZeroK-RTS
+0 / -0