Next / Prev image overlay navigation module?

snackmaster
snackmaster's picture

Joined: 2005-11-20
Posts: 135
Posted: Sat, 2013-02-23 20:49

With Gallery 2 I had a module that presented Next and Prev arrows on the left and right sides of full sized images for navigation. I believe it was JavaScript that divided your image in half and made each half a hyperlink. I can't find anything like this for G3. The closest is next/prev arrow navigation module. Anything out there I'm missing?

---
Gallery - 3.0.5
Theme - WindHack
Site - www.gfisk.com/gallery
 
snackmaster
snackmaster's picture

Joined: 2005-11-20
Posts: 135
Posted: Sun, 2013-02-24 13:38

Found what I was looking for and it was part of the Siriux theme I used to run (and loved!) - it's a mix of inline Javascript, CSS and a tag I haven't used in 20 years - <map>. The Author Nico Kaiser has moved his site to Flickr (boooo) which explains why no G3 version of Siriux.

This thread covers the topic in detail but I lack the skills to convert all the old "g->" G2 code to G3. If anyone is interested in lending a guiding hand.... :-)

I was able to get the <map> piece working by placing it in Paginator.html.php like this:

<map id="prevnext" name="prevnext">
<? if (isset($first_page_url)): ?>
  <area shape="rect" coords="0,0,{math equation="round(x/2-1)" x=$image.width},{$image.height}"
   href="<?= $first_page_url ?>"
   alt="{$theme.item.title|markup:strip|default:$theme.item.pathComponent}"
   onmouseover="document.getElementById('prevArrow').style.visibility='visible'"
   onmouseout="document.getElementById('prevArrow').style.visibility='hidden'"/>
   <? endif ?>
  <? if (isset($previous_page_url)): ?>
  <area shape="rect" coords="{math equation="round(x/2)" x=$image.width},0,{$image.width},{$image.height}"
   href="<?= $previous_page_url ?>"
   alt="{$theme.item.title|markup:strip|default:$theme.item.pathComponent}"
   onmouseover="document.getElementById('nextArrow').style.visibility='visible'"
   onmouseout="document.getElementById('nextArrow').style.visibility='hidden'"/>
<? endif ?>
</map>

Adding the overlay code to photo.html.tpl is failing the "<?= $previous_page_url ?>" links don't render (they do when placed into Paginator.html.php)

<a href="<?= $previous_page_url ?>"
id="nextArrow" style="position:absolute; margin: 30px 0 0 -50px; visibility: hidden"
onmouseover="document.getElementById('nextArrow').style.visibility='visible'"
onmouseout="document.getElementById('nextArrow').style.visibility='hidden'"
><img src="{url="images/arrow-right.gif"}" alt="" width="20" height="17"
/></a>

---
Gallery - 3.0.5
Theme - WindHack
Site - www.gfisk.com/gallery
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2013-02-25 04:05

Should not be to had to make a module if the first block of code works. Give me a couple days.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Tue, 2013-03-05 05:20

The code provided did not help much but did give some hints. Here is version 1 of a module.
It needs some css love to add some navigation arrows on mouseover. Perhaps you can help with that?
Added a admin option to move the existing navigation to below the item to save some space above the photo.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
snackmaster
snackmaster's picture

Joined: 2005-11-20
Posts: 135
Posted: Tue, 2013-03-05 12:42

Thanks! I'll check out the code and work on the CSS

---
Gallery - 3.0.5
Theme - Wind modified
Site - www.gfisk.com/gallery
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2013-03-18 23:17

http://codex.galleryproject.org/Gallery3:Modules:hover_navigation

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team