How to add floating next/previous images over photos via CSS

I was poking around the web today, and stumbled across a site with a pretty spiffy photo gallery at http://dbowman.com/photos/ (sadly looks like it's run by some other engine). In particular, in the single-image view, when you moused over the image on the left side, a "Previous Photo" link appered on top of the image, and when you moused over the photo on the right half, a "Next Photo" link appeared on top of the image. It looked pretty slick, and I decided I wanted to try to integrate it into my Gallery2 site. After viewing source, I finally discovered how it works, and got it working on my site. It's entirely CSS based, no worries about java turned off. Here's how it goes (for my theme, a slightly modified version of Matrix from beta4):

in theme.css add:

#entire_image {
	position: relative;
}

.floatlinks p a em {
  position:absolute;
  top: 0;
  left: 0;
  right: auto;
  width:50%;
  height:100%;
  text-indent:-10000px;
  }
  
#next p a em {
  left: auto;
  right: 0;
  }
.v .floatlinks p a em {
  width:190px;
  height:500px;
  }

#prev a>em {
  background:url("images/photonav_prev.png") no-repeat 50% -100px;
  }

#next a>em {
  background:url("images/photonav_next.png") no-repeat 50% -100px;
  }

#prev a:hover em, #next a:hover em, #prev a:active em, #next a:active em {
  background-position: 50% 0px;
  cursor:pointer;
  }

and in photo.tpl chage:

		{g->container type="imageframe.ImageFrame" frame=$theme.photoFrame}
			{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%"}
		{/g->container}

to be

		{g->container type="imageframe.ImageFrame" frame=$theme.photoFrame}
		  <div id="entire_image">
			{g->image id="%ID%" item=$theme.item image=$image fallback=$smarty.capture.fallback class="%CLASS%"}
			<div id="prev" class="floatlinks">
				<p><a href="{g->url params=$theme.navigator.back.urlParams}"><em>previous</em></a></p>
			</div>

			<div id="next" class="floatlinks">
				<p><a href="{g->url params=$theme.navigator.next.urlParams}"><em>next</em></a></p>
			</div>
		</div>
		{/g->container}

This exact code is set up to use images (with 'hidden' text links for accessibility) which is cool, but you could easily adapt this to be purely text based. Semi-trasparent images (png's) work really well with this (giving a semi-transparent image hovering over the photo), but don't work with IE, so if you care about supporting IE, you better use .gifs

I seem to remeber something like this feature being asked about before, but I couldn't find anything about it after a few searches, so I've posted it here as a new topic. If you like it, go ahead and use it.

edit 2005-09-20: nivekiam: change HTML codes back to correct symbols for cut-n-paste. Hope I didn't miss anything ;)

wow, this other gallery, mt + templates, looks very nice and clean. i guess it doesn't have all the features etc of a G2, but the templates are great stuff!
we added it to http://codex.gallery2.org/index.php/Gallery2:ThemeIdeas , someone could create a similar template for G2.

Yes he does, but one of the problems is that his technique does not work on portrait-oriented pics, only landscape-oriented ones. See this thread: http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=32644&highlight=portrait

This method looks really neat. swift, thanks for posting about it!

Alright, I incorporated this method on my website, you can see an example here:

http://eggdropper.com/gallery2/v/rockcreek/DSC02745.JPG.html (not IE-friendly)

what i want to do next though, is to make the rollover arrows a small thumbnail of the next/prev picture....I will make a new post.

Does anyone know how to get this to work on IE at all.

Thanks for the info! I was wondering if there's any way to add this feature to the slider theme? If so, what files should I change, and where? I just installed Gallery 2 today so I'm a complete newbie!
Thanks!

I haven't been following this thread for a while, but the current CVS version of Siriux theme has such a feature.

I wouldn't consider either to be very easy to implement. I'm guessing though that the js that is in Siriux would be easier but I'm not familiar with either Siriux or Slider.

Hi, I applied the changes that you made and it works but I do have a slight problem.

it can only applied to my first album and for the second album.. on the first picture it will show the original size if you click left part of the image.
I know this is weird, I changed the photo.tpl and locate it inside the /local/ but it only affected first album.

and second problem, maybe its just me again. I center the picture and the left/right arrows showed well when I moved my mouse over the picture but even if the mouse is outside the picture (Left/right blank area next to the picture) it will still show the arrows on top of the image.

can anyone help me with this? Thank you very much.

Inline style in photo.tpl:

{* Navigation image map *}
{if !empty($image.width) && !empty($image.height)}
        {g->callback type="core.LoadPeers" item=$item|default:$theme.item
                    windowSize=$windowSize|default:3 
                    addEnds=false loadThumbnails=true}
        {assign var="data" value=$block.core.LoadPeers}

        <map id="prevnext" name="prevnext">
        {if isset($theme.navigator.back)}
                {assign var="peerFound" value=false}
                {foreach from=$data.peers item=peer}
                     {if $peerFound == false}
                        {if $peer.peerIndex == $data.thisPeerIndex-1}
                          {literal}  
                          <style type="text/css">
                          .areaPrev:hover {
                          cursor: url("{/literal}{g->url params=$theme.host forceFullUrl=true}?g2_view=core.DownloadItem&g2_itemId={$peer.thumbnail.id}{literal}"), pointer;
                          </style >  
                          {/literal}                  
                        {assign var="peerFound" value=true}
                        {/if}
                      {/if}   
                {/foreach}          
                  <area class="areaPrev" shape="rect" coords="0,0,{math equation="round(x/2-1)" 
                        x=$image.width},{$image.height}"
                        href="{g->url params=$theme.navigator.back.urlParams}" 
                        title="{g->text text="Previous"}"/>
                {/if}
                
        {if isset($theme.navigator.next)}
                {assign var="peerFound" value=false}
                {foreach from=$data.peers item=peer}
                     {if $peerFound == false}
                        {if $peer.peerIndex == $data.thisPeerIndex+1}
                          {literal}  
                          <style type="text/css">
                          .areaNext:hover {
                          cursor: url("{/literal}{g->url params=$theme.host forceFullUrl=true}?g2_view=core.DownloadItem&g2_itemId={$peer.thumbnail.id}{literal}"), pointer;
                          </style >  
                          {/literal}                  
                        {assign var="peerFound" value=true}
                        {/if}
                      {/if}        
                {/foreach} 
                <area class="areaNext" shape="rect" coords="{math equation="round(x/2)" 
                        x=$image.width},0,{$image.width},{$image.height}"
                        href="{g->url params=$theme.navigator.next.urlParams}" 
                        title="{g->text text="Next"}"/>
        {/if}
        </map>
{/if}

Boner I have tested your first version and working perfect on firefox. on IE and Chrome the prev/next function working, but without showing the cursor

I'm supposing that this line
"cursor: url("{/literal}{g->url params=$theme.host forceFullUrl=true}?g2_view=core.DownloadItem&g2_itemId={$peer.thumbnail.id}{literal}"), pointer;"

should return the thumbnail of the next/prev image in the form of a cursor. however it is not working for me.

superman, have you tested your modified templates with the Chrome 6 or 7 browser ?
working perfect with firefox 3.6 , but with Chrome 6.0.472.63 my gallery have problems with the right arrow (next).

later edit: I'm using imageframe module with shadow. it seems this is causing the problem. however it seems to work correctly in opera10, firefox3 & ie8. i will report this to chrome developers.

i don't think Chrome has the rendering engine similar with IE. rather with Safari.

yes, it's working correctly.

yes, see my report to google: http://code.google.com/p/chromium/issues/detail?id=58675