Suggestions on How to redesign the Navigation and [Login]

if you want this to be dynamic so you won't have to recode every header each time you add photos, then you will need to work out the different coding in the navagation files (navigator.inc and navphoto.inc) These are the files which produces the page numbers and the next and previous page arrows.

If you need more help on this I'll have time to look at it this weekend.

=)
Jade

What I'm about to explain will require some knowlege on how PHP works. If you do not know anything about PHP then read up. This type of modification is very detailed and I won't be doing it for you. Though I will answer questions if you do get stuck. You will also need to know basic CSS to incorporate your new design.

Gallery v1.4-RC1

I'll give you the "bones" on what to do with the structure. You will have to figure out the acutal design you want to plug in.

This is a process I will take step by step. Back up your current files.

How you are going to do this is basically rewrite the entire file to a new template type layout, I have worked through something simular, but have not wrote the tutorial for it yet. mmmm, I guess I will be now.

The navigator.inc and navphoto.inc files are the ones that create the navigation "arrows" and page count at the top and bottom of the Gallery application in the little "outlined box".

First we identify what each portion of the file does. Then you can chose to modify/ move/ or delete sections accordingly. (PHP knowlege required)

I have broken the code you will be working with into sections to explain what each does.

For the advanced coders can just replace the coding with your own or remove as needed. Be very careful on how you edit the table portions of the code, you could break your entire site. Make sure you find each starting and ending tag, before you delete them. If you break your site restore the latest backup. I usually have several stages of backup files so I do not have to start at the beginning if I made an error at the end of my modifications.

~~~~~~~~~~~

. /layout/navigator.inc file.

The first part is the first part of the code that creates the outline around the navigation table. See where it says height="1" & width="1", you can change it to height="0" & width="0" to collapse the table.

STEP 1) Any drastic change to navigation will require the Tables to be modified or removed so get familiar with the table code first and track all the beginning and ending tags. Then and only then will you be able to change the navigation of Gallery to suit your needs.

<table width="<?php echo $navigator["fullWidth"] . $navigator["widthUnits"] ?>" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="11" bgcolor="<?php echo $borderIn ?>" height="1"><?php echo $pixelImage ?></td>
  </tr>
  <tr> 
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>

STEP 2) Identify the major sections which make up the navigation.

This next part is the first double arrows you see to the outer sides of the navigation. The First Page. If you want to move or delete this block of code you may, just make sure you have kept all the beginning php and ending php tags together. See where the code starts with <img src ? In betwwen there until the </a> is where your modifications take place. The last line of this block of code is the "outline" code.

<?php      
#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="18">&</td> 
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="18"><span class="nav"> 
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1> <img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_first.gif" : "nav_last.gif" ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

This is the next code which is for The Previous Page modify just as you did the above code for The First Page.

<?php
#-- 'previous' button cell ---
$prevPage = $navigator["page"] - 1;
if ($prevPage >= 1) {
?>
    <td align="center" width="72" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $prevPage ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_prev.gif" : "nav_next.gif" ?>" border="0" width="72" height="11" alt="<?php echo _("Previous Page") ?>" title="<?php echo _("Previous Page") ?>"></a>
      </span></td>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="72" height="18">&</td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
}
?>

Step 3) Identifying PHP Strings and modify output.
This is the Center of the code where all the page numbers appear with the little dots between the numbers. The code line $number = "<b>$i</b>"; is the line that defines the current first page of your Gallery. The code line $number = "<a href=".$url.$navigator['pageVar']."=$i>$i</a>"; Is the current page you are on if there are multiple pages. This code line if (($i-1) == $navigator["page"]) tells the script to print the bolded arrow.

Pointers to modify. For example: If I were to put this into a different layout I would remove the "left_dot" "right_dot" instances and instead create a mini table to wich I could add a CSS style for a hover effect. As long as the php queries are in order and not modified the referrenced html scripting can be changed.

If you just said "Huh?" to this part you will need to learn more about PHP before attempting these types of mods to your site.

    <td align="center" width="3000" height="18">   
<?php
#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = "<img src=\"$imageDir/nav_dot_left.gif\" width=\"8\" height=\"11\">";
		} else {
			$number = "<a href=".$url.$navigator['pageVar']."=$i>$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img src=\"$imageDir/nav_dot_right.gif\" width=\"8\" height=\"11\">";
			} else {
				$leftdot = "<img src=\"$imageDir/nav_dot.gif\" width=\"8\" height=\"11\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img src=\"$imageDir/nav_dot_right.gif\" width=\"8\" height=\"11\">";
	} else {
		$rightdot = "<img src=\"$imageDir/nav_dot.gif\" width=\"8\" height=\"11\">";
	}
	echo "&$rightdot&";
}
?>

The is The Next Page script modify exactly as The Previous Page script.

  

  </td>
<?php
#-- 'next' button cell ---
$nextPage = $navigator["page"] + 1;
if ($nextPage <= $navigator["maxPages"]) {
?>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
    <td align="center" width="72" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $nextPage ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_next.gif" : "nav_prev.gif" ?>" border="0" width="72" height="11" alt="<?php echo _("Next Page") ?>" title="<?php echo _("Next Page") ?>"></a>
      </span></td>
<?php
} else {   
?>
    <td align="center" width="72" height="18">&</td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

This is The Last Page script, modify exactly as you did The First Page script.

<?php
#-- 'last' button ---
if ($navigator["page"] == $navigator["maxPages"]) {
?>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
    <td align="center" width="27" height="18">&</td>
<?php
} else {        
?>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><img src="<?php echo $imageDir ?>/pixel_trans.gif" width="1" height="1"></td>
    <td align="center" width="27" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $navigator['maxPages'] ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_last.gif" : "nav_first.gif" ?>" border="0" width="27" height="11" alt="<?php echo _("Last Page") ?>" title="<?php echo _("Last Page") ?>"></a>
      </span></td>
<?php
} 
?>

This is the last portion of the Table.

    <td align="right" bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
  </tr>
  <tr> 
    <td colspan="11" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
</table>

That should give you an idea of what needs to be modified if not exacly how. I will emphasize again, this type of mod require some knowledge of PHP and CSS. If this is the first PHP script you have worked with, then prepare to be challenged. I will not be able to walk you through every tiny step of this type of process. But if you do get royally stuck, then I will answer to the best I can to get you pointed back in the right direction.

Good Luck!!

=)
Jade

I can't stress enough how thankful I am for your help! That is great information.

CHris

Following my last post. You should have some knowledge of PHP and CSS before attempting these modifications.

Each section of code that I am splitting out can be moved. Just make sure you have the proper begining and end tags with your cut & paste. Always backup your files before attempting mods. If you break your site, just restore the last backup that worked.

./album.php

First we will identify the starting point for editing your navigation.

<?php
includeHtmlWrap("gallery.header");
?>

This first part controls the search form properties.

<?php
if (!$gallery->session->offline && !strcmp($gallery->app->default["showSearchEngine"], "yes")) {
?>
<table width=100% border=0 cellspacing=0>
<tr><?php echo makeFormIntro("search.php"); ?>
<td valign="middle" align="right">
<span class="admin"> <?php echo _("Search") ?>: </span>
<input style="font-size=10px;" type="text" name="searchstring" value="" size="25">
</td>
</form>
</tr>
<tr><td height=2><img src=<?php echo $gallery->app->photoAlbumURL ?>/images/pixel_trans.gif></td></tr></table>
<?php
}
?>

This part is the Admin section, where all the links appear: [login] etc. I will specifically break this down in a following post as it will be detailed as to which part does what.

<!-- admin section begin -->
<?php 
$adminText = "<span class=\"admin\">";
$toplevel_str= pluralize_n($numAlbums, ($numAccess != $numAlbums) ? _("top-level album") : _("album"), ($numAccess != $numAlbums) ? _("top-level albums") : _("albums"), _("No albums"));
$total_str= sprintf(_("%d total"), $numAccess); 
$image_str= pluralize_n($numPhotos, _("image"), _("images"), _("no image"));
$page_str= pluralize_n($maxPages, _("page"), _("pages"), _("no pages"));

if (($numAccess != $numAlbums) && $maxPages > 1) {
	$adminText .= sprintf(_("%s (%s), %s on %s"), $toplevel_str, $total_str, $image_str, $page_str);
}
else if ($numAccess != $numAlbums) {
	$adminText .= sprintf(_("%s (%s), %s"), $toplevel_str, $total_str, $image_str);
} else if ($maxPages > 1) {
	$adminText .= sprintf(_("%s, %s on %s"), $toplevel_str, $image_str, $page_str);
} else {
	$adminText .= sprintf(_("%s, %s"), $toplevel_str, $image_str);
}
$adminText .= "</span>";
$adminCommands = "<span class=\"admin\">";

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	$displayName = $gallery->user->getFullname();
	if (empty($displayName)) {
		$displayName = $gallery->user->getUsername();
	}
	$adminCommands .= sprintf(_("Welcome, %s"), $displayName) . "&amp;&amp;<br>";
}

if ($gallery->user->isAdmin()) {
	$doc = galleryDocs();
	if ($doc) {
		$adminCommands .= "[$doc]&amp;";
	}
}
if ($gallery->user->canCreateAlbums() && !$gallery->session->offline) { 
	$adminCommands .= "<a href=" . doCommand("new-album", array(), "view_album.php") . ">[". _("new album") ."]</a>&amp;";
}

if ($gallery->user->isAdmin()) {
	if ($gallery->userDB->canModifyUser() ||
	    $gallery->userDB->canCreateUser() ||
	    $gallery->userDB->canDeleteUser()) {
		$adminCommands .= popup_link("[" . _("manage users") ."]", 
			"manage_users.php");
	}
}

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	if ($gallery->userDB->canModifyUser()) {
		$adminCommands .= popup_link("[". _("preferences") ."]", 
			"user_preferences.php");
	}
	
	if (!$GALLERY_EMBEDDED_INSIDE) {
		$adminCommands .= "<a href=". doCommand("logout", array(), "albums.php"). ">[". _("logout") ."]</a>";
	}
} else {
	if (!$GALLERY_EMBEDDED_INSIDE) {
	        $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0);
	        // $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0, true, 250, 500);
	}
}

$adminCommands .= "</span>";
$adminbox["text"] = $adminText;
$adminbox["commands"] = $adminCommands;
$adminbox["bordercolor"] = $borderColor;
$adminbox["top"] = true;
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

This last bit of code is the part that contains the includes for the navigator file (previous post) and the ML file. Which is the multi language pulldown.

Move the /layout/navigator.inc code above the search block to achive the "menu tabs" if you did your modifications to the navigation files. Make sure you have beginning and ending php tags. You can leave the ml_pulldown where it is or move it to an altogether new location.

<!-- top nav -->
<?php
include($GALLERY_BASEDIR . "layout/navigator.inc");
include($GALLERY_BASEDIR . "layout/ml_pulldown.inc");
?>

More to come. The next post will take a little bit to work out.

=)
Jade

Ok now to break down the admin section. Moving links about and such.

We are actually going to design the space which the links will appear. This is found in the /layout/adminbox.inc

<table width="<?php echo $navigator["fullWidth"] . $navigator["widthUnits"] ?>" border="0" cellspacing="0" cellpadding="0">
<?php
if ($adminbox["top"]) {
?>
  <tr> 
    <td colspan="4" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
<?php
}
?>
  <tr> 
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="18"><?php echo $pixelImage ?></td>
    <td align="left" valign="middle" width="3000" height="18">&amp;<?php echo $adminbox["text"] ?></td>
    <td align="right" valign="middle" width="3000" height="18">&amp;<?php echo $adminbox["commands"] ?>&amp;</td>
<td bgcolor="<?php echo $borderIn ?>" width="1" height="18"><?php echo $pixelImage ?></td>
  </tr>
<?php
if (!$adminbox["top"]) {
?>
  <tr> 
    <td colspan="4" height="1" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
<?php
}
?>
</table>    

The two strings we need to identify are $adminbox["text"] which is the number of albums and photos you see to the left of the admin box when viewing your gallery, and the other one is $adminbox["commands"] which is the [login] and other such links.

Where ever you put these two stings is where they are going to appear. But keep in mind that the "definitions" of these strings must be called first on your page or else they will not show up. You will also notice another string which will also be needed in your script modification

So in essence out of all that code in the above post the only things you will need is something like this.

<?php
if ($adminbox["top"]) {
?>
 
<?php
}
?>
<?php echo $adminbox["commands"] ?>
<?php
if (!$adminbox["top"]) {
?>
  
<?php
}
?>

Notice I left the multiple php beginning and end tags. You can place html & css around this line. <?php echo $adminbox["commands"] ?>

Now that we have figured out how to design the [login] links, up next is breaking down the admin section in the album.php file and learning how to place this block of code within your Gallery.

See Next Post.

=)
Jade

If you read this portion you will see multiple if/else statments and multiple definitions of the $strings.

Now that you have designed the adminbox.inc for your [login] and text. we will go on to adding actual buttons instead of text. This is what I did in Gallery Skins.

<!-- admin section begin -->
<?php 
$adminText = "<span class=\"admin\">";
$toplevel_str= pluralize_n($numAlbums, ($numAccess != $numAlbums) ? _("top-level album") : _("album"), ($numAccess != $numAlbums) ? _("top-level albums") : _("albums"), _("No albums"));
$total_str= sprintf(_("%d total"), $numAccess); 
$image_str= pluralize_n($numPhotos, _("image"), _("images"), _("no image"));
$page_str= pluralize_n($maxPages, _("page"), _("pages"), _("no pages"));

if (($numAccess != $numAlbums) && $maxPages > 1) {
	$adminText .= sprintf(_("%s (%s), %s on %s"), $toplevel_str, $total_str, $image_str, $page_str);
}
else if ($numAccess != $numAlbums) {
	$adminText .= sprintf(_("%s (%s), %s"), $toplevel_str, $total_str, $image_str);
} else if ($maxPages > 1) {
	$adminText .= sprintf(_("%s, %s on %s"), $toplevel_str, $image_str, $page_str);
} else {
	$adminText .= sprintf(_("%s, %s"), $toplevel_str, $image_str);
}
$adminText .= "</span>";
$adminCommands = "<span class=\"admin\">";

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	$displayName = $gallery->user->getFullname();
	if (empty($displayName)) {
		$displayName = $gallery->user->getUsername();
	}
	$adminCommands .= sprintf(_("Welcome, %s"), $displayName) . "&&<br>";
}

if ($gallery->user->isAdmin()) {
	$doc = galleryDocs();
	if ($doc) {
		$adminCommands .= "[$doc]&";
	}
}

In each of the if statments you will see the code such as

[". _("new album") ."]

This code portion is the actual text that you see as a link.

So the entire line will look something like this when adding an image.
array(), "view_album.php") . "><img align="absmiddle" src="images/login.jpg" border="0" alt="login"></a>&";

Look for each link and replace accordingly.

if ($gallery->user->canCreateAlbums() && !$gallery->session->offline) { 
	$adminCommands .= "<a href=" . doCommand("new-album", array(), "view_album.php") . ">[". _("new album") ."]</a>&";
}

if ($gallery->user->isAdmin()) {
	if ($gallery->userDB->canModifyUser() ||
	    $gallery->userDB->canCreateUser() ||
	    $gallery->userDB->canDeleteUser()) {
		$adminCommands .= popup_link("[" . _("manage users") ."]", 
			"manage_users.php");
	}
}

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	if ($gallery->userDB->canModifyUser()) {
		$adminCommands .= popup_link("[". _("preferences") ."]", 
			"user_preferences.php");
	}
	
	if (!$GALLERY_EMBEDDED_INSIDE) {
		$adminCommands .= "<a href=". doCommand("logout", array(), "albums.php"). ">[". _("logout") ."]</a>";
	}
} else {
	if (!$GALLERY_EMBEDDED_INSIDE) {
	        $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0);
	        // $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0, true, 250, 500);
	}
}

$adminCommands .= "</span>";
$adminbox["text"] = $adminText;
$adminbox["commands"] = $adminCommands;
$adminbox["bordercolor"] = $borderColor;
$adminbox["top"] = true;
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

Now just take a look at that last part. If you did split the code out to two seperate files you will need to call each file into the location you chose. As long at it is the last part of this file or posted in the page after this file ends you should be just fine.

Use the same format as this is posting the code to a lower part of the Gallery.

<?php
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

Well that ought to get many of you up to mischief for a while.

The other files will also need to be modded to make a uniform design across your site. All are just a bit different than albums.php, but by using these technics you should be able to create the design you wish.

If you get stuck let me know & I'll help you out.

Cheers,
=)
Jade

[background colour]

I'm working on moving settings such as this into a top-level album settings page... So plan for this in 1.4.1.

I'm interested in seeing your changes, but don't have time to look at your files right now. Can you post a URL where we can see the effects?

-Beckett (

)

To continue this next part of the tutorial....

How To change the First|Previous Page# Next|Last navigation to TEXT.

The two files we are going to modify are navigator.inc and navphoto.inc found in the /layout/ folder.

The first method is to use Text and CSS instead of the little << >> arrows.

If you open these files into your text editor you will see that each section is clearly marked as such. Use these identifiers for your modifications.

CODE from Navigator.inc

#-- 'first' button cell ---

This is the original Code for "First" button

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"><img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"></a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>
<?php

Now lets take this apart step by step so you can understand the modifications we are about to make.

The first part is the "border" around the default gallery. You can ignore this part.

 
#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>

Next part you can see the first tag where it says <span class="nav"> This is the CSS which will control the text that we put in.

    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 

The next part of the code controls the image and link. We are going to remove the line <img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> and replace it with text. (I will show the completed code later.

      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"> <img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>

The last part is the ending cell border, again ignore it.

    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

So let's put this together.

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1">First Page</a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

Use the same identifiers to modify the other sections. Previous, Next, Last.

Now onto changing the page#

=)
Jade

Two things about the CSS, if you are using the default Gallery (no skin) then the CSS is found /css/embedded_styles.css.default. If you are using a Skin then the CSS is found /skins/yourskin/css/embedded_styles.css

Either way you have your Gallery set up the editing of the file is the same.

This is the default CSS setting

.nav    /* used in navigation bars */
	{
	  font-size: 12px;

You may want to change it to reflect different link styles. Then add this.

.nav  /* used in navigation bars*/ 
	{ 
	  font-family:verdana, arial, sans-serif;	
	  color:#75400C;
	  font-size: 14px; 
	  font-weight:bold;
	  
	}
.nav a,
.nav a:link,
.nav a:visited,
.nav a:active {
	  font-size: 10px;
	  font-weight: normal;
	  color:#75400C;
	  text-decoration: none;
	}
.nav a:hover {
      font-size: 10px;
	  font-weight: normal;
	  color: #202020;
	  text-decoration: underline;
	}

Now if you notice the first setting for font-size is much larger than the other two. This is an effect you can have for the current page you are on. The other two settings refer to the links and can be set individually as well.

OK that's it for tonight, I'll be back with another tutorial on how to replace the First/Previous Next/ Last with your own images and how to modify hieght and width to make it compatible with your site.

=)
Jade

Once you have your << >> arrow buttons changed you may also want to change the little dots and arrows in the page numbers. You will only need to change the navigator.inc file.

note There are three images to change nav_dot_left.gif(>), nav_dot_right.gif(<), and nav_dot.gif(o)

First we will identify the code and break down the changes needed.

<td align="center" width="3000" height="14">   
<?php
#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\">";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>
<?php

This first part dictates the width of the navigation even if 3000 seems to much leave it alone, then change the height to the same hieght as you did for editing the prev/next/ tables.

<td align="center" width="3000" height="14">   
<?php

The next part is the function script which tells gallery what to show on your page, how many files, what page you are on, etc. What we are looking for is the image tags.

Three things to be replaced are nav_dot_left.gif , nav_dot.gif , nav_dot_right.gif If you look through this portion of the code you will see several instances of these images. Once you have uploaded your new graphics these should automatically show on your Gallery with no modificaions.

#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = " <img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\"> ";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>

note If after everything is done and it does not allign correctly, you may need to review you width and height attributes or make your images a bit smaller.

=)
Jade

Next is replacing the "home" arrow, but I don't have time to do the tutorial for it right now. Will post it in a couple days.

I have the same problem with my site http://www.chelseaacademy.co.uk which I want to replace the gallery with gallery2 but unless I can integrate the menus I cant use it.

http://www.banksyunmasked.co.uk