• [Mod] Show original image in new window by clicking on image 4 0 5 1
Currently:  

Author Topic: [Mod] Show original image in new window by clicking on image  (Read 212739 times)

0 Members and 1 Guest are viewing this topic.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
[Mod] Show original image in new window by clicking on image
« 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 :( 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:
Code: [Select]
   $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:
Code: [Select]
   $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:
Code: [Select]
   "image_file_name" => $image_row['image_media_file'],
Add after:
Code: [Select]
   "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:
Code: [Select]
function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0) {Replace with:
Code: [Select]
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:
Code: [Select]
   $media_src = get_file_path($media_file_name, "media", $cat_id, 0, 1);Add after:
Code: [Select]
   $media_src_big = get_file_path($media_file_name, "big", $cat_id, 0, 1);1.5. Find:
Code: [Select]
   $media = $site_template->parse_template("media/".$file_extension);Replace with:
Code: [Select]
   $media = ((!$big) ? ($site_template->parse_template("media/".$file_extension)) : $media_src_big);1.6. At the end of the file before
Code: [Select]
?>Add this:
Code: [Select]
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:
Code: [Select]
{image}Replace with:
Code: [Select]
{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 »
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)

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [Mod] Show original image in new window by clicking on image
« 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:
Code: [Select]
{image}2.2. Replace with:
Code: [Select]
                 {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:
Code: [Select]
$templates_used = 'details,header';
$main_template = 'details';
Replace with:
Code: [Select]
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:
Code: [Select]
 "msg" => $msg,Add after:
Code: [Select]
 "image_id2" => $image_id,
5 Create big.html template.
5.1.
Insert code:
Code: [Select]
{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 »
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)

Offline MrWante

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« 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! :D

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

:D

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

Enough with the superlatives.... :D

Offline dannyb

  • Pre-Newbie
  • Posts: 5
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« Reply #3 on: February 18, 2003, 05:34:45 PM »
Quote from: V@no
Finaly I figured out how to make tempalate.

5 Create big.html template.
Code: [Select]

[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 :
Code: [Select]

</body>
</html>


with
Code: [Select]
{footer}

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [Mod] Show original image in new window by clicking on image
« 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 ;)
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)

Offline dannyb

  • Pre-Newbie
  • Posts: 5
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« Reply #5 on: February 19, 2003, 03:20:05 PM »
Quote from: V@no
well, that was supposed to be just a window, with no control panel, and only picture....but u do whatever it fits to u ;)


Then you also shouldn't use {header}  :) but instead of it:
Code: [Select]
<HTML>
<HEAD>
</HEAD>
<BODY>

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

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

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [Mod] Show original image in new window by clicking on image
« Reply #6 on: February 19, 2003, 04:40:03 PM »
Quote from: dannyb
Quote from: V@no
well, that was supposed to be just a window, with no control panel, and only picture....but u do whatever it fits to u ;)


Then you also shouldn't use {header}  :) but instead of it:
Code: [Select]
<HTML>
<HEAD>
</HEAD>
<BODY>

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

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


Ah, u are right... :D  :!:
{header} was just simplier  :wink:
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)

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« Reply #7 on: February 23, 2003, 07:30:48 PM »
Quote from: V@no
[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.

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [Mod] Show original image in new window by clicking on image
« Reply #8 on: February 23, 2003, 07:48:25 PM »
Quote from: Chris
Quote from: V@no
[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:
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)

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« 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:
Code: [Select]
"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
Code: [Select]
   "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:
Code: [Select]
 "media_src_big" => $media_src_big,Continuing, the following line is not needed:
Code: [Select]
   $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
Code: [Select]
<a class="big" href="javascript:openpopupbig('big')">you can remove
Code: [Select]
class="big"
As long as I'm taking the time, in big.html maybe it's worth noting that the
Code: [Select]
<center></center>is deprecated in the HTML 4.0 specification in favor of the DIV element.  Therefore it's better to use this:
Code: [Select]
<div align="center"></div>Deprecated means that future browsers won't be required to support the CENTER element.

In details.php:
Code: [Select]
$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
Code: [Select]
 "image_id2" => $image_id,to
Code: [Select]
 "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
Code: [Select]
if (isset($_GET['big']) || isset($_POST['big'])) {
$templates_used = 'big,header';
$main_template = 'big';
}else{
$templates_used = 'details,header';
$main_template = 'details';
}
with this
Code: [Select]
$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
Code: [Select]
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:
Code: [Select]
                 {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
Code: [Select]
{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 »

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Administrator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [Mod] Show original image in new window by clicking on image
« 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.... 8O
if automatic mod installer will be ever released, it wont be able install anything on my gallery :?

@ Chris, if it's not too much to ask, maybe u could post complete mod here (not just the changes from my post)?
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)

Offline Chris

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.487
  • Did u ever stop to think and then forget to start?
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« Reply #11 on: February 23, 2003, 08:51:17 PM »
Quote from: V@no
@ Chris, if it's not too much to ask, maybe u could post complete mod here (not just the changes from my post)?

 :lol:
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.

Offline Clow Read

  • Newbie
  • *
  • Posts: 21
    • View Profile
    • http://vectorcandy.com
Re: [Mod] Show original image in new window by clicking on image
« 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 ^_~

Offline ParaNike

  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« 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!

Offline ParaNike

  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: [Mod] Show original image in new window by clicking on image
« Reply #14 on: April 06, 2003, 01:34:04 PM »
Is some one here? :)

Why can`t help me some one?