web development

Website Redesign and Kilimanjaro Summit Guide

After getting back from Kilimanjaro, I started working on redesigning my website. I thought it could use a shiny new color scheme and an update navigational system to go with all of the content I will soon be putting up. There are a lot of new CSS tricks and javascript scripts running now, in the aim of making the site both easier to navigate and easier on the eyes. Let me know what you think, or if something is working incorrectly. 

Here is a quick look at the old site, just for posterity's sake:

My guide to Kilimanjaro is coming up soon, and I have been working extremely hard putting it all together. I am having almost as much fun writing it as I had hiking Kili (almost :) ). Those posts are going to starting this Friday and going up every other day until they are all up, so be on the lookout for those.

After that, the content is going to keep coming at a rapid clip. I am driving up to North Cascades National Park on Friday to start my photography internship for the National Park Service. I can't wait to get started. I get to explore a park in depth for 6 weeks doing what I do best, burning up trails and taking pictures. As part of my job, I will be publishing all of the photos I take both on here and wherever the NPS would like me to publish them. (I believe flickr as well.) I will be taking all of my gear up there along with the hikers food I can't get enough of.

And they said summer was about taking time off!

How to Create an Image Gallery in a Lightbox with Shadowbox.js (Part 3 of 3)

My Adventure With Shadowbox, HTML Tables, and Scribd Documents Continued...

In case you missed em', Part 1 and Part 2.

After I figured out how to embed scribd documents, I decided to try out my hand at creating an image gallery like the one here on the Shadowbox.js website, with the cool thumbnails in white. The source code looks like this for the examle gallery.

<table class="thumbs" border="0" cellspacing="0" cellpadding="0">



<td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="gallery/mustang/red.jpg"><img src="gallery/mustang/red-thumb.jpg" alt="Red" id="red-mustang" class="border"></a></td>

<td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="gallery/mustang/blue.jpg" title="Blue Mustang"><img src="gallery/mustang/blue-thumb.jpg" alt="Blue" id="blue-mustang" class="border"></a></td>

<td><a rel="shadowbox[MustangThumbs];options={counterType:'skip',continuous:true,animSequence:'sync',handleOversize:'resize'}" href="gallery/mustang/grey.jpg"><img src="gallery/mustang/grey-thumb.jpg" alt="Grey" id="grey-mustang" class="border"></a></td>




Table - starts off the html table.

Tbody - signifies the body of the table.

Tr - initiates the table. So say you wanted to put multiple tables, you could have <!tr>table<1/tr><tr>table2</tr>.

Td - starts off what you want to put in the table, think of this as putting an object in the table.

Arel="shadowbox" - calls shadowbox into action.

[]- What is inside the brackets is what the gallery is called. Just make sure all of the images you want in the gallery have the same thing in the brackets.

Options - What comes after options is up to you, mine has an image counter, animation, and instructions to resize the image if it is too large for the users browser window. There are tons that I am still playing around with. They are all right here.

Href - This is where you put the location of the full size image, or the size you want to appear in the lightbox slideshow. Usually this will be on your webserver usually.

Img src - This is the source for the thumbnails, so make it a small pic.

Alt and Id - These are paremeters for defining what the content in the image is. For search engines.

While I can't implement his example code, as I don't have the images, I can show you want my code looks like.

Below is the gallery that I have implemented on this page at the very top. Below is the gallery and below that is the source code.


michaelsilverman panel

<table style="text-align: center;" border="0" align="center">





<td colspan="2"><a rel="shadowbox[SolarThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.michaelsilverman.net/img/v4/p199667164-5.jpg"><img id="solar-panel-panorama" class="border" src="http://www.michaelsilverman.net/img/v4/p199667164-2.jpg" alt="solarpanorama" /></a></td>



<td><a rel="shadowbox[SolarThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.michaelsilverman.net/img/v6/p510987073-5.jpg"><img id="michael-silverman-solar-panel" class="border" src="http://www.michaelsilverman.net/img/v6/p510987073-11.jpg" alt="michaelsilverman" /></a></td>

<td><a rel="shadowbox[SolarThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.michaelsilverman.net/img/v4/p210210748-5.jpg"><img id="up-close-solar-panel" class="border" src="http://www.michaelsilverman.net/img/v4/p210210748-11.jpg" alt="panel" /></a></td>



<td colspan="2"><a rel="shadowbox[SolarThumbs];options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.michaelsilverman.net/img/v5/p34263785-4.jpg"><img id="solar-panels" class="border" src="http://www.michaelsilverman.net/img/v5/p34263785-2.jpg" alt="Solar" /></a></td>




As you can see, my I took the source code on the example site and made a couple modifications to fit my needs. This is where all of HTML table fun started.

I spent literally hours figuring out how to get the panoramic image at the stop to span correctly accross to columns, and to get the rest of the layout in place.

Let me go ahead and save you the trouble. Take a look at this cheat sheet here.

I figured out that I have to have the image span multiple columns so that it doesn't force the other images over to the right.

Also, if you want to center the content, in both the cells in the table and on the page, be sure you comment that in at the table style in the begginning Ex. - (table style="text-align: center;" border="0" align="center")

That's basically it. Just let me know if you have any questions in the comments. I hope this helps someone out!