Link Select page
<html>
<h3><center>My Galleries and Categories</center></h3>
<table align="center" width="700">
<tbody>
<tr>
<td>
<a href="#nopick">
<img src="/photos/78849676-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/3105982-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/85828385-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/70469920-Th.jpg" border="2" height="150" width="150"></a>
</td>
</tr>
<tr align="center" height="50" valign="top">
<td><a href="#nopick">category1</a></td>
<td><a href="#nopick">category2</a></td>
<td><a href="#nopick">gallery3</a></td>
<td><a href="#nopick">gallery4</a></td>
</tr>
<tr>
<td>
<a href="#nopick">
<img src="/photos/95580319-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/95563331-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/63547153-Th.jpg" border="2" height="150" width="150"></a>
</td>
<td>
<a href="#nopick">
<img src="/photos/85867847-Th.jpg" border="2" height="150" width="150"></a>
</td>
</tr>
<tr align="center" height="50" valign="top">
<td><a href="#nopick">gallery5</a></td>
<td><a href="#nopick">category6</a></td>
<td><a href="#nopick">gallery7</a></td>
<td><a href="#nopick">gallery8</a></td>
</tr>
</tbody>
</table>
<br />
<hr width="750" align="center">
<br /><br />
<div class="descText">
<center>
<h3>
<p>This will enable you to create a special page of links to anywhere or that special combination
of galleries/categories.
<p/>
Create a new gallery and set it to unlisted and to "journal (old)" style.
<br /><br />
Add the html below to your album description</h3>
<b>Replace</b> /photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font> <b>with your own thumbnail links</b>
<br />
<b>Replace the</b> <font color="blue">xxxxxxxx_xxxxx</font> <b>with the gallery linking to.</b>
<br />
As an option you can make all the thumbs square. For all thumbs you're<br />
linking use the "zoom thumbnail" and change each to 1x1 or square.
</center>
<pre>
<html>
<h3><center><font color="blue">My Galleries and Categories</font></center></h3>
<table align="center" width="700">
<tbody>
<tr>
<td>
<a href="<font color="blue">/category1</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="<font color="blue">/category2</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
</tr>
<tr align="center" height="50" valign="top">
<td><a href="/<font color="blue">category1</font>"><font color="blue">category1</font></a></td>
<td><a href="/<font color="blue">category2</font>"><font color="blue">category2</font></a></td>
<td><a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>"><font color="blue">gallery3</font></a></td>
<td><a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>"><font color="blue">gallery4</font></a></td>
</tr>
<tr>
<td>
<a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="<font color="blue">/category6</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
<td>
<a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>">
<img src="/photos/<font color="blue">xxxxxxxx_xxxxx-Th.jpg</font>" border="2" height="150" width="150"></a>
</td>
</tr>
<tr align="center" height="50" valign="top">
<td><a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>"><font color="blue">gallery5</font></a></td>
<td><a href="/<font color="blue">category6</font>"><font color="blue">category6</font></a></td>
<td><a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>"><font color="blue">gallery7</font></a></td>
<td><a href="/gallery/<font color="blue">xxxxxxxx_xxxxx</font>"><font color="blue">gallery8</font></a></td>
</tr>
</tbody>
</table>
</html>
<h2><center>Add this to your CSS</center></h2>
<center><b>Replace</b> <font color="blue">xxxxxxxx</font> <b>with your new gallery number</b>
<font color=red>Do not include</font> the red gallery security key XXXXXXX<font color="red">_xxxxx</font></p></center>
/* START gallery <font color="blue">xxxxxxx</font> */
.gallery_<font color="blue">xxxxxxx</font> #albumDescription {
font-family: Comic Sans MS, verdana;
font-size: 130%;
text-align: center;
margin-bottom: 40px;
}
.gallery_<font color="blue">xxxxxxx</font> #albumDescription h3 {
font-family: Comic Sans MS, verdana;
font-size: 150%;
}
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a {
text-decoration: none;
}
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:hover {
color: white;
}
/* next two include stuff needed for IE6 image hovers to work */
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:link img,
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:visited img,
.gallery_<font color="blue">xxxxxxx</font> #albumDescription img {
border: 4px ridge #ccc;
_border: 4px ridge #fff;
}
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:focus img,
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:hover img,
.gallery_<font color="blue">xxxxxxx</font> #albumDescription a:active img,
.gallery_<font color="blue">xxxxxxx</font> #albumDescription img:hover {
border: 4px ridge #444;
_border: 4px ridge #ccc;
}
.gallery_<font color="blue">xxxxxxx</font> #albumNav_top,
.gallery_<font color="blue">xxxxxxx</font> #albumNav_bottom,
.gallery_<font color="blue">xxxxxxx</font> .nophotos h3,
.notLoggedIn .gallery_<font color="blue">xxxxxxx</font> #breadcrumb {display: none;}
/* END gallery <font color="blue">xxxxxxx</font> */
<br />
______________________________________________________________________
<b>
Note: This is set up with eight links, any number of links can be used
by adding or deleting rows and cells.</b>
</pre>
<br />
The thumbnail photos are from my popular gallery <a href="http://www.photosbyat.com/popular" target="blank"><span style="color: blue;">here</span></a>.
<br /><br />
<b>See it in action <a href="http://atsmith2.smugmug.com/gallery/3633805" target="blank"><span style="color: blue;">here</span></a> using the new flash slideshow.</b>
<br /><br />
</div>
</html>
http://www.smugmug.com/img/smuggy64.gif
http://allen-steve.smugmug.com/gallery/3539056_ZkcLB/
2007-09-25T01:55:04Z
Copyright 2009, the copyright holder of each photograph. Some portions copyright SmugMug. All rights reserved.
SmugMug