27 replies to this topic

[luislacerda]

Cris D., on May 19 2007, 04:45 AM, said:

As for the"<<<PREVIOUS || NEXT>>" you will have to manually do this at the moment (I would like to do something automatic in the future, but my hands are a bit full right now).

Thanks Cris

[Cris D.]

This snippet has just been updated to include Previous | Page x of y | Next navigation at the top and bottom of the page.

You can set the number of pictures to show on a page using a snippet call eg. maxOnPage=4 from a single result set, the automated navigation looks after the rest.

If you don't set maxOnPage, the snippet acts the same as before with no navigation.

[luislacerda]

Cris D., on May 31 2007, 09:50 AM, said:

This snippet has just been updated to include Previous | Page x of y | Next navigation at the top and bottom of the page.

You can set the number of pictures to show on a page using a snippet call eg. maxOnPage=4 from a single result set, the automated navigation looks after the rest.

If you don't set maxOnPage, the snippet acts the same as before with no navigation.

Cris
Just perfect. I think the EtoGal family snippet is now a fully grown up and flexible solution to anyone wanting to display graphics or photos on his/her web pages.
Thank you.

[Cris D.]

Quote

Hi Cris
However, I cannot understand why the second call for $nav gets immediately underneath the first one (in Firefox) and in the middle of the table output in IE.
Luis

This is because the nav is set inside a div tag. It will read it's position from your CSS (which is read differently between IE and FF. You will need to set the div class in your CSS to position it.
I've called the div class="prev_next", you may like to delete the second instance of the nav in the snippet at the last line... change...
return $nav."".stripslashes($output)."".$nav;
to
return $nav."".stripslashes($output);

This will have just the one at the top...an easy fix.

Alternatively, you can change the div to just text by removing the div tag altogether like this...
from this...

[b]$nav.="<div align=\"center\" class=\"prev_next\">";//set the container for top and bottom navigation links.[/b]

if($start>=$maxOnPage) {
$nav.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start - $maxOnPage)."\">Previous |</a>";
}
$page=($start+1);
$nav.="  Page ".(ceil($page/$maxOnPage))." of ". ceil($numrows/$maxOnPage);
if($numrows >($start + $maxOnPage)){
$nav.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start + $maxOnPage)."\"> | Next</a>";
}
[b]$nav.="</div>";[/b]

to this...

if($start>=$maxOnPage) {
$nav.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start - $maxOnPage)."\">Previous |</a>";
}
$page=($start+1);
$nav.="  Page ".(ceil($page/$maxOnPage))." of ". ceil($numrows/$maxOnPage);
if($numrows >($start + $maxOnPage)){
$nav.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start + $maxOnPage)."\"> | Next</a>";
}

The div was an afterthought, and in retrospect, the code is probably better off without it.

Edited by Cris D., 31 May 2007 - 11:32 AM.

[Cris D.]

After playing with this navigation alignment, div output alignment etc I have found the following useful to create rows of floating pictures...

Note that by default, each picture is enclosed in a DIV tag which will mean that effectively each picture is on its own line. You must use the CSS to align the divs to display how you want.

Change this to lines that define the $nav. code:

//Top and Bottom navigation links, created separately so that they can be in separate classes to position them with CSS.
//Top class="navTop" therefore set this in your CSS with something like .navTop{top: 100px}

$navTop.="<div align=\"center\" class=\"prev_next_top\">";

if($start>=$maxOnPage) {
$navTop.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start - $maxOnPage)."\">Previous |</a>";
}

$page=($start+1);//re-set start from 0 (required to collect row 1 from db), to 1 for maths functions

$navTop.="  Page ".(ceil($page/$maxOnPage))." of ". ceil($numrows/$maxOnPage);
if($numrows >($start + $maxOnPage)){
$navTop.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start + $maxOnPage)."  "."\">| Next</a>";
}
$navTop.="</div>";

//Set the bottom navigation links
//Bottom class="navBotom" therefore set this in your CSS with something like .navBottom{bottom:80px;}

$navBottom.="<div>";

if($start>=$maxOnPage) {
$navBottom.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start - $maxOnPage)."\">Previous |</a>";
}
$navBottom.="  Page ".(ceil($page/$maxOnPage))." of ". ceil($numrows/$maxOnPage);
if($numrows >($start + $maxOnPage)){
$navBottom.="<a href=\"?id=".$etomite->documentIdentifier."&start=".($start + $maxOnPage)."  "."\">| Next</a>";
}
$navBottom.="</div>";

Adjust the last line to...

return $navTop."".stripslashes($output)."".$navBottom;

Add this to your CSS... (thanks luis)

.odd {
float: left;
padding-left: 10%;
}

.even {
float: right;
padding-right: 10%;
}

.prev_next_bot{
position:absolute;
left:50%;
top:105%;//adjust this to get within the required limits for the page height
}

or if you are still having problems, or want a quick fix for a bottom navigation that floats where you don't want it (this might happen in this instance where every div is set to float), just change the last line to...

return $nav."".stripslashes($output);

OR

return $navTop."".stripslashes($output);

if you made the changes above
to remove the "bottom navigation" altogether.

Edited by Cris D., 11 June 2007 - 12:31 PM.

[Cris D.]

This snippet has just been updated with the following features and fixes:

1) added hyperlinked page numbers across the top of the prev||next navigation so it looks like this:

1 2 3 4 5 6 7 8
PREV |Page 2 of 8|NEXT

2) fixed the incorrect use of ceil() to floor() to ensure that the Page 2 of "x" number is correct.

[Rokas]

I get this message

Attached Files

•  ddd.png   88.16K   8 downloads

[mikef]

Have you installed the etogal snippet and created at least one gallery? etogal_multigals is an addon to etogal.