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

swift
swift's picture

Joined: 2003-12-08
Posts: 39
Posted: Mon, 2005-09-05 22:22

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

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Mon, 2005-09-05 22:45

Nico Kaiser has something similar on his site, http://siriux.net/photos/ I believe his mod has been posted before. His is JavaScript based.

So now here are a couple of options ;)

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Mon, 2005-09-05 23:04

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.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-09-06 01:24

looks like someone already is porting that look to G2.. http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=35479

 
rogermh

Joined: 2005-01-09
Posts: 102
Posted: Tue, 2005-09-06 15:44
Quote:
Nico Kaiser has something similar on his site, http://siriux.net/photos/ I believe his mod has been posted before. His is JavaScript based.

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!

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Thu, 2005-09-08 20:03

If you look at the original site you will notice that he uses both gif's and pngs so it looks good in Firefox (uses the png's), but still works in IE (uses the GIF's). When I get a chance next week I'm going to add this to my theme except I want the arrows to be on the microthumbs instead of the main picture.

 
mrwilly123

Joined: 2005-07-23
Posts: 57
Posted: Thu, 2005-09-08 21:27

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.

 
nullvoid

Joined: 2005-09-20
Posts: 4
Posted: Tue, 2005-09-20 19:28

There is a bug in the code, at the first or last page, if click to continue, it will be linked to the root of Gallery.
I've experimented it a little bit and found the right way to do it: the correct code should be:

Quote:
{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">
{if isset($theme.navigator.back)}
<p><a href="{g->url params=$theme.navigator.back.urlParams}"><em>previous</em></a></p>
{/if}
</div>

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Mon, 2005-11-28 16:03

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

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Sat, 2005-12-03 01:51

I have slightly modified this to just show the previous and next pictures over the microthumbs. I also painfully spent hours going over Doug's code and got it working in IE too. Take a look here. If anyone wants to know how I did it just ask or download the greypop theme.

 
Ammo

Joined: 2006-03-23
Posts: 51
Posted: Thu, 2006-03-23 06:10

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!

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Thu, 2006-03-23 15:50

Ammo,

Which way do you want to do this? Do you want it where half the main picture says previous and next or do you want the previous and next microthumbs to say that. Sadly I don't know anything about the slider theme though.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Thu, 2006-03-23 17:21

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

 
Ammo

Joined: 2006-03-23
Posts: 51
Posted: Fri, 2006-03-24 03:26

Hi lvthunder,
I hadn't really thought about that, I guess whatever's easier to implement!
I'm not sure, but because I'm using slider, I may need to use javascript to get it to work (so I would need to copy the code used by Siriux: I tried finding it but failed!)
Thanks!

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Fri, 2006-03-24 16:14

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.

 
lbpp

Joined: 2006-07-25
Posts: 5
Posted: Tue, 2006-07-25 02:00

I think this concept is awesome and i have a modification that i would like to try to impliment. I have Gallery constrained to only 500px wide so it fits in my design well. All my pictures i have are 640x480, so i have Gallery resize them so they all fit with in the 500px limit so it does not mess the page up, BUT i would like to be able to show the original sized image as a css hover like how the next and previous images are shown, so when you roll over the small image the original 640x480 image rides over the entire page. Is this something that is possible with some slight modification of this code?

 
SmithUlt

Joined: 2007-04-14
Posts: 1
Posted: Sat, 2007-04-14 07:46
nullvoid wrote:
There is a bug in the code, at the first or last page, if click to continue, it will be linked to the root of Gallery.
I've experimented it a little bit and found the right way to do it: the correct code should be:

Quote:
{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">
{if isset($theme.navigator.back)}
<p><a href="{g->url params=$theme.navigator.back.urlParams}"><em>previous</em></a></p>
{/if}
</div>

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

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.

 
Boner

Joined: 2006-08-27
Posts: 133
Posted: Sat, 2007-04-14 09:37

Here is another solution:

add to photo.tpl:

{* Navigation image map *}
{if !empty($image.width) && !empty($image.height)}
<map id="prevnext" name="prevnext">
{if isset($theme.navigator.back)}
  <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)}
  <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}

change photo.tpl:

{g->image id="%ID%" item=$theme.item image=$image 
          fallback=$smarty.capture.fallback class="%CLASS%" usemap=#prevnext}

add to theme.css (or inline style):

.areaPrev:hover {
cursor: url("images/prev.png"), pointer;
}

.areaNext:hover {
cursor: url("images/next.png"), pointer;
}
 
Boner

Joined: 2006-08-27
Posts: 133
Posted: Sat, 2007-04-14 10:56

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}
 
lthuynh

Joined: 2006-10-05
Posts: 10
Posted: Sat, 2007-06-23 00:43

Edit: NVM! I just discovered PG's x_treme theme!

I can't seem to get this to work on my carbon theme. Swift's coding worked perfectly fine the first time, but then I deleted it to try something else. Now I wanna use it again, and it won't work =( I tried doing the same thing like 15 times! I've uploaded the original photo.tpl and theme.css. Can someone try and code it together for me? Many thanks ahead!

 
eliz82

Joined: 2009-11-06
Posts: 71
Posted: Sat, 2010-08-07 17:57

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

Boner wrote:
Inline style in photo.tpl:

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.

 
powerful_superman

Joined: 2010-02-10
Posts: 13
Posted: Tue, 2010-09-21 17:42

Hi all, I migrated siriux theme's floating next/previous arrow effect into matrix theme and it works for firefox/ie/chrome. I just share photo.tpl here, download the zip file and extract to gallery2\themes\matrix\
Good luck

 
eliz82

Joined: 2009-11-06
Posts: 71
Posted: Sat, 2010-10-09 18:44

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.

 
powerful_superman

Joined: 2010-02-10
Posts: 13
Posted: Tue, 2010-10-12 17:38
eliz82 wrote:
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.

sorry, i didn't test chrome 6 or 7, i just thought it works on IE then should work on chrome. When I migrated the floating arrow effect from siriux theme to matrix theme, I considered the photo frame effect because my gallery is using the frame effect, and it is supposed to work perfectly.
Does it work on chrome 6 correctly when you disable the frame effect?
And when you enable image frame on chrome 6, can you find the right arrow (maybe it is shifted to the down left of the picture because of the position of the frame)?

 
eliz82

Joined: 2009-11-06
Posts: 71
Posted: Wed, 2010-10-13 08:03
powerful_superman wrote:
sorry, i didn't test chrome 6 or 7, i just thought it works on IE then should work on chrome.

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

powerful_superman wrote:
Does it work on chrome 6 correctly when you disable the frame effect?

yes, it's working correctly.

powerful_superman wrote:
And when you enable image frame on chrome 6, can you find the right arrow (maybe it is shifted to the down left of the picture because of the position of the frame)?

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

 
powerful_superman

Joined: 2010-02-10
Posts: 13
Posted: Wed, 2010-10-13 15:21

Problem solved, this time I really tested it on firefox 3.6, ie 7.0 and chrome 6.0, it works correctly when frame enabled or disabled.