4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: Uncle Holden on January 30, 2006, 03:23:20 PM
-
This is my first mod, be gentle.
Under the current setup to get to next/previous image you have to click on the link at the upper right/left corner or wherever your template puts it. I am proposing using an imagemap on the image itself to do the same thing. It allows the user to flip through the pictures faster, because they don't have to move the mouse :D
Files to modify:
/includes/functions.php
/templates/<Your template>/details.html
/templates/<Your template>/jpg.html
Lets get started.
Step 1.
Backup everything!
Step 2.
Open functions.php
Find
$site_template->register_vars(array(
"media_src" => $media_src,
"media_icon" => $media_icon,
"image_name" => $image_name,
Insert after
"third_width" => $width/3,
"third_height" => $height/3,
"two_thirds_width" => 2*$width/3,
"two_thirds_height" => 2*$height/3,
"category_index_url" => $site_sess->url(ROOT_PATH."categories.php?".URL_CAT_ID."=".$cat_id),
If everything is correct, the code immediately after should look like this
"width_height" => $width_height,
"width" => $width,
"height" => $height,
"iptc_info" => $iptc_info
));
If it isn't, don't worry about it too much, but do let me know what it looks like so that I can change the instructions accordingly.
Step 3.
Open details.html and insert immediately after {header} the following snippet:
<!-- Allow navigation by clicking on the image -->
<div><map name="ee_multiarea" id="ee_multiarea">
<area
shape="rect" coords="0,0,{third_width},{height}"
{if prev_image_url}
alt="Previous photo" title="Previous photo"
href="{prev_image_url}"
{endif prev_image_url}
/>
<area
shape="rect" coords="{two_thirds_width},0,{width},{height}"
{if next_image_url}
alt="Next photo" title="Next photo"
href="{next_image_url}" style="cursor: e-resize;"
{endif next_image_url}
/>
<area
shape="rect" coords="{third_width},0,{two_thirds_width},{height}"
{if category_index_url}
alt="Thumbnail page" title="Thumbnail page"
href="{category_index_url}"
{endif category_index_url}
/>
</map></div>
Step Last.
Open jpg.html and change it from <!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} ><br />
into this <!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} usemap="#ee_multiarea" /><br />
If your file is different, just insert usemap="#ee_multiarea" before the closing if the <IMG ... > tag.
This creates an imagemap on the pictures. Clicking on the left third will take you to the previous picture, the middle third takes you to the category page with the thumbs, and the right third takes you to the next picture.
If you are in the mood for experimenting, you can also use {third_height} and {two_thirds_height} to define some really sophisticated maps, but I prefer to keep it simple.
-
Interesting, can we see an example or at lest a screenshot?
-
Hey,
it works fine and its quick to install.
But I dont like it so much, because non of my users no this feature and its just confusing.
Just put the "Next and Prev. Link" right under the image and fine!
THX
-
WOW
it works fine
thanks
:D
-
But I dont like it so much, because non of my users no this feature and its just confusing.
Just put the "Next and Prev. Link" right under the image and fine!
THX
how can i do this??
-
...
But I dont like it so much, because non of my users no this feature and its just confusing.
Just put the "Next and Prev. Link" right under the image...
Bitte ... Wie funktioniert das?
please... how can i do this?
-
@Foto-Portal
1. brauchst Du nicht immer alles zitieren, hier im Thread ist es zwar ok aber in anderen übertreibst Du es ein wenig.
2. Das pushen von Beiträgen in dem Umfang wie Du ihn hier betreibst ist auch nicht die feine englische Art! :evil:
3. Wie wäre es wenn Du dich mal mit HTML&Co ein wenig beschäftigst?
-
can i also see a example of this
-
how can i do this??
I mean, just put the code which is at the end of your details.html above under the image tag:
put this:
<td class="row2"> {if prev_image_name}{lang_prev_image}<br />
<b><a href="{prev_image_url}">{prev_image_name}</a></b>
<!-- <br /><br /><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="1"></a> -->
{endif prev_image_name} </td>
<td align="right" class="row2"> {if next_image_name}{lang_next_image}<br />
<b><a href="{next_image_url}">{next_image_name}</a></b>
<!-- <br /><br /><a href="{next_image_url}"><img src="{next_thumb_file}" border="1"></a> -->
{endif next_image_name}</td>
under this:
{image}
I guess, thats it!
-
Well, the same MOD in one single change in your details.html :
{if next_image_url}<a href="{next_image_url}">{endif next_image_url}
{image}
{if next_image_url}</a>{endif next_image_url}
no image maps etc needed... :roll:
-
hello after installing this mod i can't download pictures with right key in firefox, only in firefox, in IE works, anyone can help?
http://fotos.vividus.pt (http://fotos.vividus.pt)
cheers
-
hello after installing this mod i can't download pictures with right key in firefox, only in firefox, in IE works, anyone can help?
http://fotos.vividus.pt (http://fotos.vividus.pt)
cheers
arny please put 4images copyright to your site. you don't have license to remove it!
and you are running 4images commercial!
please read http://www.4homepages.de/4images/license.php#english
thank you!
-
Ich habe diesen Code so übernommen, wie es beschrieben wurde. Nun habe ich aber einen blauen Rahmen um die Bilder in der Detail Ansicht.
Kann mir einer ein Tipp geben, woran das liegen könnte und wo ich das abändern könnte?
Viele Grüße
Herbert