4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
July 24, 2016, 12:34:48 PM

Login with username, password and session length
Search:     Advanced search
4images is now on facebook. Click here and become a fan!
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support) (Moderators: mawenzi, Rembrandt)
| | |-+  [Mod] Show original image in new window by clicking on image
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] 2 3 4 5 ... 9 » »» Print
Current Topic Rating: *****
Author Topic: [Mod] Show original image in new window by clicking on image  (Read 163595 times)
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« on: December 24, 2002, 08:43:33 PM »

Works with all 4images versions

This MOD will let in detail page by clicking on the image, open new fullscreen window with bigger size image (new window will be closed by clicking on mouse buttons).
NOTE:
1. This MOD doesnt resize or do anything with images, and u'll need upload "big/original" images manualy.
2. Because its open new window with no html code, it will show on top of the window FULL PATH to the image Sad and if u use some download manager it may start downloading the image instead of showing it.
3. It works only with images, that doesnt requre media icons.
4. "Big/original" images filename must be the same as the image filename.
5. If u deleted picture from the site (as admin), "big/original" picture will stay there, u'll need delete it manualy.
6. There is no control by user permissions for viewing "big/original" images, means that the script will create a link to the popup window if it find "big/original" file for the picture.

INSTALLATION:
1. open /includes/functions.php file
1.1. find:
1
2
   $path = (($image_type == "media") ? (($cat_id) ? MEDIA_PATH."/".$cat_id : MEDIA_TEMP_PATH) : (($cat_id) ? THUMB_PATH."/".$cat_id : THUMB_TEMP_PATH))."/".$file_name;
    return ($check_handle($file_name) && file_exists($path)) ? (($in_admin && !preg_match("#(gif|jpg|jpeg|png)$#is", $file_name)) ? ICON_PATH."/".get_file_extension($file_name).".gif" : $path) : $return_code;
Replace with:
1
2
   $path = (($image_type == "media") ? (($cat_id) ? MEDIA_PATH."/".$cat_id : MEDIA_TEMP_PATH) : (($image_type == "big") ? MEDIA_PATH."/".$cat_id."/big" : (($cat_id) ? THUMB_PATH."/".$cat_id : THUMB_TEMP_PATH)))."/".$file_name;
    return ($check_handle($file_name) && file_exists($path)) ? (($in_admin && !preg_match("#(gif|jpg|jpeg|png)$#is", $file_name)) ? ICON_PATH."/".get_file_extension($file_name).".gif" : $path) : (($image_type != "big") ? $return_code : "");
1.2. Find:
1
   "image_file_name" => $image_row['image_media_file'],
Add after:
1
   "media_src_big" => get_media_code($image_row['image_media_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link, $detailed_view, 1),
1.3. Find:
1
function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0) {
Replace with:
1
function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0, $big = 0) {
1.4. Find:
1
   $media_src = get_file_path($media_file_name, "media", $cat_id, 0, 1);
Add after:
1
   $media_src_big = get_file_path($media_file_name, "big", $cat_id, 0, 1);
1.5. Find:
1
   $media = $site_template->parse_template("media/".$file_extension);
Replace with:
1
   $media = ((!$big) ? ($site_template->parse_template("media/".$file_extension)) : $media_src_big);
1.6. At the end of the file beforeAdd this:
1
2
3
4
5
6
7
8
9
10
11
12
function check_remote_big($remote_media_file) {
  global $config;
  return (preg_match("#^(https?:\/\/[a-z0-9\-]+?\.([a-z0-9\-]+\.)*[a-z]+(:[0-9]+)*\/.*?\.(".$config['allowed_mediatypes_match'].")$)#is", $remote_media_file)) ? 1 : 0;
}
function check_local_big($local_media_file) {
  global $config;
  return (preg_match("#^((\.)*\/.*?\.(".$config['allowed_mediatypes_match'].")$)#is", $local_media_file)) ? 1 : 0;
}
function check_big_type($file_name) {
  global $config;
  return (in_array(get_file_extension($file_name), $config['allowed_mediatypes_array'])) ? 1 : 0;
}


2. Open details.html template
2.1 Find:Replace with:
1
2
3
4
{if media_src_big}
    <script type="text/javascript">function openpopupbig(big){var popurl="{media_src_big}";settings='location=no,directories=no,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,dependent=no';winpopsbigWindow=window.open(popurl,big,settings);winpopsbigWindow.focus();}</script>                  
                  <a class="big" href="javascript:openpopupbig('big')">{endif media_src_big}
   {image}{if media_src_big}</a>{endif media_src_big}




3. Now, all u need is create a folder with name "big" in the category folder. For ex. if u have a picture with name proba.jpg in category number 29, u'll need locate that category folder /data/media/29, create folder "big", so in this example it would looks like this: /data/media/29/big and upload picture proba.jpg. Upload "big/original" images in that folder with same filename.
« Last Edit: March 14, 2006, 06:29:55 AM by V@no » Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« Reply #1 on: December 26, 2002, 02:29:53 AM »

Finaly I figured out how to make tempalate.
Also fixed a problem described in NOTE 2 and fixed problem if used htaccess anti-leech file (see post: http://4homepages.de/forum/viewtopic.php?t=2885)


You'll need make those changes:

2. Open details.html template.
2.1. Find:2.2. Replace with:
1
2
3
4
                 {if media_src_big}
<script type="text/javascript">function openpopupbig(big){var popurl="details.php?image_id={image_id2}&big=1";settings='fullscreen,location=no,directories=no,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,dependent=no';winpopsbigWindow=window.open(popurl,big,settings);winpopsbigWindow.focus();}</script>                  
                  <a class="big" href="javascript:openpopupbig('big')">{endif media_src_big}
                {image}{if media_src_big}</a>{endif media_src_big}

Now need some more changes:

4. Open details.php file.

4.1. Find:
1
2
$templates_used = 'details,header';
$main_template = 'details';
Replace with:
1
2
3
4
5
6
7
if (isset($_GET['big']) || isset($_POST['big'])) {
$templates_used = 'big,header';
$main_template = 'big';
}else{
$templates_used = 'details,header';
$main_template = 'details';
}
4.2.Find:
1
 "msg" => $msg,
Add after:
1
 "image_id2" => $image_id,

5 Create big.html template.
5.1.
Insert code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{header}
<script language="JavaScript">
<!--//
if (window.Event) document.captureEvents(Event.ONCLICK);
document.onclick = window.close;
function clickIE4(){
if (event.button){
window.close();
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which){
window.close();
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onclick = window.close;
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onclick = window.close;
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("window.close(); return false")
//-->
</script>
<center>
<img src="{media_src_big}"  onClick="window.close()" alt="{image_name}">
</center>
</body>
</html>

You can check how it works here:
http://come.no-ip.com/details.php?image_id=1198

[EDITED] 01.03.03
P.S. this javascript working perfectly on my WindowsXP OS, but someone told me that it doesnt work on WindowsME...
it supposed to close window by pressing any mouse buttons, anywhere on the screen.
so, if someone have better script that do same and more capatible, and also can close window by pressing on keyboard, please post it here.
« Last Edit: October 03, 2009, 09:13:23 PM by V@no » Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
MrWante
Newbie
*
Offline Offline

Posts: 11

Thank You
-Given: 0
-Receive: 1


View Profile
« Reply #2 on: February 04, 2003, 03:02:41 AM »

Thank you V@no!

A truly great mod, that works just perfectly for me!
And also thanks for the extra help to get it working!
Nice with nice guys! Very Happy

Anyway, if you ever are in the northern part of Stockholm and need a place to crash, call me!

Very Happy

So, great modding, and keep 'em comming, you seem to have the talent for it!

Enough with the superlatives.... Very Happy
Logged
dannyb
Pre-Newbie

Offline Offline

Posts: 5

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #3 on: February 18, 2003, 05:34:45 PM »

Quote from: V@no   [Expand]
Finaly I figured out how to make tempalate.

5 Create big.html template.
1
2
3
4
5
6
7
8
9
10
11
12

[java code snip]
...
...
[java code snip]

</script>
<center>
<img src="{media_src_big}"  onClick="window.close()" alt="{image_name}">
</center>
</body>
</html>



The layout gets better when you replace :
1
2
3

</body>
</html>


with
Logged
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« Reply #4 on: February 19, 2003, 12:08:56 AM »

well, that was supposed to be just a window, with no control panel, and only picture....but u do whatever it fits to u Wink
Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
dannyb
Pre-Newbie

Offline Offline

Posts: 5

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #5 on: February 19, 2003, 03:20:05 PM »

Quote from: V@no   [Expand]
well, that was supposed to be just a window, with no control panel, and only picture....but u do whatever it fits to u Wink


Then you also shouldn't use {header}  Smile but instead of it:
1
2
3
4
<HTML>
<HEAD>
</HEAD>
<BODY>

Then you have an empty window with ONLY the image in it Smile I use the 4waters template from www.vierstra.com, and layout got a little bit messed up Smile

But many thanks for your Module, it works great at my site!!
Logged
V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« Reply #6 on: February 19, 2003, 04:40:03 PM »

Quote from: dannyb   [Expand]
Quote from: V@no   [Expand]
well, that was supposed to be just a window, with no control panel, and only picture....but u do whatever it fits to u Wink


Then you also shouldn't use {header}  Smile but instead of it:
1
2
3
4
<HTML>
<HEAD>
</HEAD>
<BODY>

Then you have an empty window with ONLY the image in it Smile I use the 4waters template from www.vierstra.com, and layout got a little bit messed up Smile

But many thanks for your Module, it works great at my site!!


Ah, u are right... Very Happy  Exclamation
{header} was just simplier  Wink
Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
Chris
4images Moderator
4images Guru
*****
Offline Offline

Posts: 4487

Thank You
-Given: 0
-Receive: 29

Did u ever stop to think and then forget to start?


View Profile
« Reply #7 on: February 23, 2003, 07:30:48 PM »

Quote from: V@no   [Expand]
[EDITED] 01.03.03
P.S. this javascript working perfectly on my WindowsXP OS, but someone told me that it doesnt work on WindowsME...
it supposed to close window by pressing any mouse buttons, anywhere on the screen.
so, if someone have better script that do same and more capatible, and also can close window by pressing on keyboard, please post it here.

I don't know if this helps you, but if you are using a browser other than IE, the click has to take place on top of the image to close the window otherwise the click does nothing.
Logged

V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« Reply #8 on: February 23, 2003, 07:48:25 PM »

Quote from: Chris   [Expand]
Quote from: V@no   [Expand]
[EDITED] 01.03.03
P.S. this javascript working perfectly on my WindowsXP OS, but someone told me that it doesnt work on WindowsME...
it supposed to close window by pressing any mouse buttons, anywhere on the screen.
so, if someone have better script that do same and more capatible, and also can close window by pressing on keyboard, please post it here.

I don't know if this helps you, but if you are using a browser other than IE, the click has to take place on top of the image to close the window otherwise the click does nothing.

thx, but since I changed from full screen window, to just maximized, it doesnt metter anymore.  Wink
Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
Chris
4images Moderator
4images Guru
*****
Offline Offline

Posts: 4487

Thank You
-Given: 0
-Receive: 29

Did u ever stop to think and then forget to start?


View Profile
« Reply #9 on: February 23, 2003, 08:07:57 PM »

After a quick examination, I found some room for improvement.

==================================================

As you go through includes/functions.php from top to bottom, the following lines are not needed:
1
2
3
4
"media_src_big" => get_media_code($image_row['image_media_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link, $detailed_view, 1),


function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0, $big = 0) {
Change this line from V@no
1
   "media_src_big" => get_media_code($image_row['image_media_file'], $image_row['image_id'], $image_row['cat_id'], $image_row['image_name'], $mode, $show_link, $detailed_view, 1),
to this instead:
1
 "media_src_big" => $media_src_big,
Continuing, the following line is not needed:
1
   $media = ((!$big) ? ($site_template->parse_template("media/".$file_extension)) : $media_src_big);

==================================================

Some inaccuracies also exist.  It's not a big deal but since I've already found them, maybe posting improvements might interest someone.

There is no class "big" defined for this mod, so in details.html
1
<a class="big" href="javascript:openpopupbig('big')">
you can remove
1
class="big"

As long as I'm taking the time, in big.html maybe it's worth noting that the
1
<center></center>
is deprecated in the HTML 4.0 specification in favor of the DIV element.  Therefore it's better to use this:
1
<div align="center"></div>
Deprecated means that future browsers won't be required to support the CENTER element.

In details.php:
1
$templates_used = 'details,header';
does not exist.  Perhaps it's there for V@no from another mod?

==================================================

This note isn't anything big, but since there is no {image_id} tag created by details.php, it is safe to change
1
 "image_id2" => $image_id,
to
1
 "image_id" => $image_id,
I try to follow the 4images code style whenever possible so this is just a personal preference.  For me, it makes reading the code easier since the naming convention is consistent.  Again, not a big deal.

Also, instead of adding "big=1" to the URL, I find it more useful to specify a template to be used instead.

Open details.php.  Replace this code
1
2
3
4
5
6
7
if (isset($_GET['big']) || isset($_POST['big'])) {
$templates_used = 'big,header';
$main_template = 'big';
}else{
$templates_used = 'details,header';
$main_template = 'details';
}
with this
1
2
3
4
5
6
7
$main_template = "details";
if (isset($_GET['template']) || isset($_POST['template'])) {
  $template = (isset($_GET['template'])) ? stripslashes(trim($_GET['template'])) : stripslashes(trim($_POST['template']));
  if (!file_exists(TEMPLATE_PATH."/".$template.".".$site_template->template_extension)) {
    $main_template = $template;
  }
}
Now you can use
1
var popurl="details.php?image_id={image_id}&template=big";
in the javascript that opens a new window.  This makes details.php look for a template named "big.html" or whatever name you specify.

The javascript to open a new window has a compatibility limitation.  It won't work if the user SHIFT-clicks in IE to try to open the link in a new window.  It happens.  Users don't know it will open in a new window so they try.  Same applies for CTRL-click in Mozilla based browsers.

Also, to open a new window without certain features when using 'fullscreen', you don't have to explicitly use "feature=no".  It's safe to just leave it out.  The browser only adds features that are requested in this case.

So taking the javascript knowledge above, we can change our link that opens the image in a big window from:
1
2
3
4
                 {if media_src_big}
       <script type="text/javascript">function openpopupbig(big){var popurl="details.php?image_id={image_id2}&big=1";settings='fullscreen,location=no,directories=no,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,dependent=no';winpopsbigWindow=window.open(popurl,big,settings);winpopsbigWindow.focus();}</script>                  
                  <a class="big" href="javascript:openpopupbig('big')">{endif media_src_big}
                {image}{if media_src_big}</a>{endif media_src_big}
to this
1
2
3
4
5
6
7
8
9
{if media_src_big}
<script language="JavaScript" type="text/javascript">
function openBigWindow(url) {
  bigwindow = window.open(url,'bigwindow','fullscreen,scrollbars=yes,resizable=yes');
  bigwindow.focus();
}
</script>
<a href="./details.php?image_id={image_id}&template=big" onClick="openBigWindow(this.href);return false;">
{image}</a>{endif media_src_big}
By the way, the script language should always be specified.  It's more important to a browser that the script type.
Here's a great online javascript reference: http://www.devguru.com/Technologies/ecmascript/quickref/javascript_index.html

Lastly: Thank you V@no for this mod!  I've always wanted 4images to do this and your mod came along just when I needed it.  So don't anyone think that I'm ungrateful.  Wink

Edit: Corrected a statement I made about how javascript window.open() works.
« Last Edit: November 25, 2010, 05:30:47 PM by V@no » Logged

V@no
If you don't tell me what to do, I won't tell you where you should go :)
Administrator
4images Guru
*****
Offline Offline

Posts: 17849

Thank You
-Given: 47
-Receive: 561

mmm PHP...


View Profile WWW
« Reply #10 on: February 23, 2003, 08:27:02 PM »

this was my first mod I ever did...it was really mess...and I was trying make it with as less files to change as possible.
now, when I look at my functions.php and other 4images files, after all the changes I did to them, I'm this much (little) close just  start all over.... Shocked
if automatic mod installer will be ever released, it wont be able install anything on my gallery Confused

@ Chris, if it's not too much to ask, maybe u could post complete mod here (not just the changes from my post)?
Logged

Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)
Chris
4images Moderator
4images Guru
*****
Offline Offline

Posts: 4487

Thank You
-Given: 0
-Receive: 29

Did u ever stop to think and then forget to start?


View Profile
« Reply #11 on: February 23, 2003, 08:51:17 PM »

Quote from: V@no   [Expand]
@ Chris, if it's not too much to ask, maybe u could post complete mod here (not just the changes from my post)?

 Laughing
It's your mod, I was hoping you would do that.  I'm also still working on polishing my implementation and I doubt I will have time.  Sorry.
Logged

Clow Read
Newbie
*
Offline Offline

Posts: 21

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« Reply #12 on: February 24, 2003, 02:14:59 AM »

@ Chris and v@no ^^

could you put up a complete and updated version of this mod??? ^^

thxn ^_~
Logged
ParaNike
Newbie
*
Offline Offline

Posts: 26

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #13 on: April 01, 2003, 09:39:31 PM »

Well, the MOD is great!

I have seen on V@no Gallary some special features. At the picture details are some informations like "Image dimension: 800x600 (Original: 1600x1200)"! The same thing for file size.
How does it work to get the informations about the original picture. Can some one explain how I can get this features too?

Another thing is, that I want a function for the download. Is it possible to write the downloadfunction, that it will download the picture in the "big" folder if it is avalabile?
So the Members will get the picture in the originalsize and not only in the small size.

Please help me!
Logged
ParaNike
Newbie
*
Offline Offline

Posts: 26

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #14 on: April 06, 2003, 01:34:04 PM »

Is some one here? Smile

Why can`t help me some one?
Logged
Pages: [1] 2 3 4 5 ... 9 » »» Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.36 seconds with 19 queries.
Post your comments here