[MOD] (Simple) Go to next/previous picture by clicking on imagemap

[Uncle Holden]

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 

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

Code: [Select]

    $site_template->register_vars(array(
      "media_src" => $media_src,
      "media_icon" => $media_icon,
      "image_name" => $image_name,

Insert after

Code: [Select]

      "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

Code: [Select]

      "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

Code: [Select]

{header} the following snippet:

Code: [Select]

<!-- 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

Code: [Select]

<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} ><br />
into this

Code: [Select]

<!-- 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

Code: [Select]

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.

[V@no]

Interesting, can we see an example or at lest a screenshot?

[FunnyUser]

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

[Foto-Portal]

WOW

it works fine

thanks

 

[Foto-Portal]

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??

[Foto-Portal]

...
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?

[Acidgod]

@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! 
3. Wie wäre es wenn Du dich mal mit HTML&Co ein wenig beschäftigst?

[__G__]

can i also see a example of this

[FunnyUser]

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:

Code: [Select]

<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}&nbsp;</td>
                            <td align="right" class="row2"> &nbsp;{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:

Code: [Select]

{image}

I guess, thats it!

[trez]

Well, the same MOD in one single change in your details.html :

Code: [Select]

{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...

[arny]

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

cheers

[Nicky]

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

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!

[Fotofan]

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