| 1 |
Hi,
|
1 |
Hi,
|
| 2 |
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)
|
2 |
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)
|
| 3 |
[color=gray]
|
3 |
[color=gray]
|
| 4 |
$(".forumPostText img").addClass('forumPostImage');
|
4 |
$(".forumPostText img").addClass('forumPostImage');
|
| 5 |
$(".forumPostImage").live('click', function () {
|
5 |
$(".forumPostImage").live('click', function () {
|
| 6 |
$(this).addClass('enlargedImage');
|
6 |
$(this).addClass('enlargedImage');
|
| 7 |
$(this).css({
|
7 |
$(this).css({
|
| 8 |
'display': 'inline-block',
|
|
|
| 9 |
'vertical-align': 'middle',
|
|
|
| 10 |
'position': 'fixed',
|
8 |
'position': 'fixed',
|
| 11 |
'width': 'auto',
|
9 |
'width': 'auto',
|
| 12 |
'height': 'auto',
|
10 |
'height': 'auto',
|
| 13 |
'max-width': '100%',
|
11 |
'max-width': '100%',
|
| 14 |
'max-height': '100%',
|
12 |
'max-height': '100%',
|
| 15 |
'top': '50%',
|
13 |
'top': '50%',
|
| 16 |
'left': '50%',
|
14 |
'left': '50%',
|
| 17 |
'transform': 'translate(-50%, -50%)'
|
15 |
'transform': 'translate(-50%, -50%)'
|
| 18 |
});
|
16 |
});
|
| 19 |
});
|
17 |
});
|
| 20 |
$(".enlargedImage").live('click', function () {
|
18 |
$(".enlargedImage").live('click', function () {
|
| 21 |
$(this).removeAttr('style');
|
19 |
$(this).removeAttr('style');
|
| 22 |
$(this).removeClass('enlargedImage');
|
20 |
$(this).removeClass('enlargedImage');
|
| 23 |
});
|
21 |
});
|
| 24 |
[/color]
|
22 |
[/color]
|
| 25 |
http://paste.ubuntu.com/9611443/
|
|
|
| 26 |
\n
|
23 |
\n
|
| 27 |
Permanent solution would be to add this to forum post view:
|
24 |
Permanent solution would be to add this to forum post view:
|
| 28 |
[color=gray]
|
25 |
[color=gray]
|
| 29 |
$("img").on('click', function () {
|
26 |
$("img").on('click', function () {
|
| 30 |
$(this).toggleClass('zoomedImage');
|
27 |
$(this).toggleClass('zoomedImage');
|
| 31 |
});
|
28 |
});
|
| 32 |
[/color]
|
29 |
[/color]
|
| 33 |
\n
|
30 |
\n
|
| 34 |
And this to CSS:
|
31 |
And this to CSS:
|
| 35 |
[color=gray]
|
32 |
[color=gray]
|
| 36 |
.zoomedImage {
|
33 |
.zoomedImage {
|
| 37 |
display: inline-block;
|
|
|
| 38 |
vertical-align: middle;
|
|
|
| 39 |
position: fixed;
|
34 |
position: fixed;
|
| 40 |
width: auto;
|
35 |
width: auto;
|
| 41 |
height: auto;
|
36 |
height: auto;
|
| 42 |
max-width: 100%;
|
37 |
max-width: 100%;
|
| 43 |
max-height: 100%;
|
38 |
max-height: 100%;
|
| 44 |
top: 50%;
|
39 |
top: 50%;
|
| 45 |
left: 50%;
|
40 |
left: 50%;
|
| 46 |
transform: translate(-50%, -50%);
|
41 |
transform: translate(-50%, -50%);
|
| 47 |
}
|
42 |
}
|
| 48 |
[/color]
|
43 |
[/color]
|
| 49 |
\n
|
44 |
\n
|
Simple forum image enlarge