[Mod] Show original image in new window by clicking on image

4images Modifications / Modifikationen > Mods & Plugins (Releases & Support)

(1/26) > >>

V@no:
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: --- $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;

--- End code ---
Replace with:
--- Code: --- $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 : "");
--- End code ---
1.2. Find:
--- Code: --- "image_file_name" => $image_row['image_media_file'],

--- End code ---
Add after:
--- Code: --- "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),

--- End code ---
1.3. Find:
--- Code: ---function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0) {
--- End code ---
Replace with:
--- Code: ---function get_media_code($media_file_name, $image_id = 0, $cat_id = 0, $image_name = "", $mode = "", $show_link = 0, $detailed_view = 0, $big = 0) {

--- End code ---
1.4. Find:
--- Code: --- $media_src = get_file_path($media_file_name, "media", $cat_id, 0, 1);
--- End code ---
Add after:
--- Code: --- $media_src_big = get_file_path($media_file_name, "big", $cat_id, 0, 1);
--- End code ---
1.5. Find:
--- Code: --- $media = $site_template->parse_template("media/".$file_extension);
--- End code ---
Replace with:
--- Code: --- $media = ((!$big) ? ($site_template->parse_template("media/".$file_extension)) : $media_src_big);
--- End code ---
1.6. At the end of the file before
--- Code: ---?>
--- End code ---
Add this:
--- Code: ---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;
}
--- End code ---

2. Open details.html template
2.1 Find:
--- Code: ---{image}
--- End code ---
Replace with:
--- Code: ---{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}
--- End code ---

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.

V@no:
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: ---{image}
--- End code ---
2.2. Replace with:
--- Code: --- {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}
--- End code ---

Now need some more changes:

4. Open details.php file.

4.1. Find:
--- Code: ---$templates_used = 'details,header';
$main_template = 'details';
--- End code ---
Replace with:
--- Code: ---if (isset($_GET['big']) || isset($_POST['big'])) {
$templates_used = 'big,header';
$main_template = 'big';
}else{
$templates_used = 'details,header';
$main_template = 'details';
}
--- End code ---
4.2.Find:
--- Code: --- "msg" => $msg,
--- End code ---
Add after:
--- Code: --- "image_id2" => $image_id,
--- End code ---

5 Create big.html template.
5.1.Insert code:
--- Code: ---{header}
<script language="JavaScript">

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

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.

MrWante:
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

dannyb:

--- Quote from: V@no ---Finaly I figured out how to make tempalate.

5 Create big.html template.

--- Code: ---
[java code snip]
...
...
[java code snip]

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

--- End quote ---

The layout gets better when you replace :

--- Code: ---
</body>
</html>

--- End code ---

with

--- Code: ---{footer}
--- End code ---

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 ;)

Navigation

[0] Message Index

[#] Next page

Go to full version