PDA

View Full Version : Using images for previous AND next link


codepoit
05-26-2006, 06:40 PM
I've seen other people do this before, although I don't have any example URLs to post. I am trying to modify my template so that the left half of the image is used as the previous link and the right half of the image is used as the next link. Anyone know of a way to do this?

Thanks,
Chris
http://www.thelastrewind.com/

Connie
05-26-2006, 07:19 PM
Chris, a good point is always to look into the source code

I just can suppose that it could be done by a image-map but can't imagine how this could be added to PP

on the other hand maybe some DHTML or so?

any link would be helpful or maybe somebody here uses this functioniality and can help out?

codepoit
05-26-2006, 07:44 PM
I know...and next time I run across a site that's using it, I will check the source code and link the site here as well...I just can't remember any sites that are using it off hand.

GeoS
05-26-2006, 08:37 PM
In one of skins which I done I used:
<div id="image_lay" style="width:<GEOS_TEMPLATE_WIDTH>px;height:<IMAGE_HEIGHT>px;left:0px;">
<div style="position:relative">
<div id="nav_prev" style="position:absolute;width:<GEOS_NAV_WIDTH>px;height:<IMAGE_HEIGHT>px;left:0px;"><a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" title="previous/zur&uuml;ck"><img src="./templates/geos/images/1.gif" width="<GEOS_NAV_WIDTH>" height="<IMAGE_HEIGHT>" alt="" border="0" /></a></div>
<div id="nav_next" style="position:absolute;width:<GEOS_NAV_WIDTH>px;height:<IMAGE_HEIGHT>px;left:<GEOS_NAV_WIDTH>px;"><a href="index.php?showimage=<IMAGE_NEXT_ID>" title="next/weiter"><img src="./templates/geos/images/1.gif" width="<GEOS_NAV_WIDTH>" height="<IMAGE_HEIGHT>" alt="" border="0" /></a></div>
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"><img id="image" src="./images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_PREVIOUS_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" /></a>
</div>
</div>

Maybe it will help you to find out solution. More or less it is ready so you have to only modify it a little for your needs.

codepoit
05-31-2006, 08:02 PM
I finally had a chance to try this out and I just now got it working...so thanks again!

Now I have to figure out how to make it obvious to people that clicking half the image goes one way, and clicking the other half goes the other way...any ideas, other than the hover text I already have?

codepoit
05-31-2006, 11:49 PM
Okay...I lied. I got this working using an image map/coordinates solution. In look at this and trying to use it, I am having trouble. When I edit the above code for use on my site, I am left with two images side by side as the current image, each one linking to where it's supposed to (the image on the left to previous, and the image on the right linking to next). I think what I am doing wrong is where you are pointing to "./templates/geos/images/1.gif", I have mine pointed at the current image. What exactly is 1.gif? If you can answer me that, I can figure it out from there...

GeoS
06-02-2006, 04:59 PM
Ok. I forgot to write it. 1.gif is transparent 1px x 1px picture.

codepoit
06-02-2006, 06:04 PM
Okay...here's my code:

<div style="position:relative">
<div style="position:absolute;width:<IMAGE_WIDTH>px;height:<IMAGE_HEIGHT>px;left:0px;"><a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" title="cssheader=[boxoverheader] cssbody=[boxoverbody] header=[<IMAGE_TITLE>] body=[Click for previous image]"><img src="/templates/simple_bgclr/split.gif" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" alt="cssheader=[boxoverheader] cssbody=[boxoverbody] header=[<IMAGE_TITLE>] body=[Click for previous image]" border="0" /></a></div>
<div style="position:absolute;width:<IMAGE_WIDTH>px;height:<IMAGE_HEIGHT>px;left:<IMAGE_WIDTH>px;"><a href="index.php?showimage=<IMAGE_NEXT_ID>" title="cssheader=[boxoverheader] cssbody=[boxoverbody] header=[<IMAGE_TITLE>] body=[Click for next image]"><img src="/templates/simple_bgclr/split.gif" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" alt="cssheader=[boxoverheader] cssbody=[boxoverbody] header=[<IMAGE_TITLE>] body=[Click for next image]" border="0" /></a></div>
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"><img id="photo" src="/images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_PREVIOUS_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" /></a>
</div>

And here's my page: http://www.thelastrewind.com/. As you can see, it's using the entire page area, instead of the IMAGE_WIDTH dimensions. What am I doing wrong? By the way, I appreciate all of your help on this, GeoS!

GeoS
06-02-2006, 06:25 PM
Ok,
There is one more thing. My code was packed in one more <div> sized to image width. So you should add addon parsing own tag with width set to half of <IMAGE_WIDTH>.

codepoit
06-02-2006, 06:38 PM
I'm not sure I understand...to specify half of <IMAGE_WIDTH> do I have to specify a specific pixel value? If so, that's what I'm trying to avoid, since not all of my images are the same size...if not, please try to explain further what you mean.

GeoS
06-03-2006, 03:13 PM
That is why I suggest you an addon. I.e.:
<?php

/*

Requires Pixelpost version 1.5 or newer
GeoS ADDON-Version 0.1

Written by: Piotr "GeoS" Galas
@: piotr.galas+pixelpost@gmail.com
WWW: http://blog.piotrgalas.com/

Pixelpost www: http://www.pixelpost.org/

License: http://www.gnu.org/copyleft/gpl.html

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.

*/

$addon_name = "GeoS Template ADDON";
$addon_description = "GeoS Template ADDON give new tags for template use.<p />";
$addon_version = "1";

/*****************/
/* CODE of ADDON */
/*****************/

$template_nav_width = $image_width / 2;

$tpl = ereg_replace("<GEOS_NAV_WIDTH>","$template_nav_width",$tpl);

?>

And thanks to this I use tag <GEOS_NAV_WIDTH> as width of layer with transparent image which is link to next/prev image.

PS Remember to add px after tag - <GEOS_NAV_WIDTH>px in styles definition.

codepoit
06-05-2006, 12:49 AM
okay!!! I finally got it working. One thing that I am having a problem with, and it's very minor, but...the white border around the image (which is actually just a 5px padding in the #image div) uses the default previous image link properties instead of the ones defined by these new divs, but only on the right side and on the bottom. Can't quite figure that out...but otherwise I am extremely happy with this, and I can't thank you enough Piotr!

Enjoi,
Chris

[EDIT] Got it!

TheDavidWhite
06-06-2006, 05:56 AM
Do you mean you want to do what I have on my site?

http://photos.misterwhite.info/pixelpost/index.php

If so I can provide the code (I don't know how to put code in a scrollable box like some replies otherwise I'd do it now!)

It was easy and used existing tags however there was an error for the thumbnail aspect ratio which PixelPost did correct (see 1.5 bugs but you might have to reload the relevent module)

David

codepoit
06-06-2006, 12:36 PM
David,

That's not at all what I am doing, but it's pretty cool! On my site, what I have done (with lots of help from GeoS) is give the ability to use the main entry picture as both the previous and next links, depending on where on the image you click.

Enjoi,
Chris @ The Last Rewind (http://www.thelastrewind.com)

TheDavidWhite
06-08-2006, 04:50 AM
I see! Interesting effect. I like the Fire Trucks!

David

GeoS
06-08-2006, 01:27 PM
@codepoit: I see the last problem only under IE. IE 6 is totally shitty with its behaviour and CSS treating.

umar
06-26-2006, 10:04 PM
I don't have a solution to your question, but thought this was a really cool example of what you might be trying to get at.... http://www.shahin.ca/foto

codepoit
06-27-2006, 12:09 PM
I don't have a solution to your question, but thought this was a really cool example of what you might be trying to get at.... http://www.shahin.ca/foto
Well, I *did* get it working on my site as well, but that is really cool with the plus/minus sign navigation indicators...great pictures, too!