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">

<tbody>

<tr>

<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>

</tr>

</tbody>

</table>

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.

 

solarpanorama
michaelsilverman panel
Solar

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

<tbody>

<tr>

</tr>

<tr>

<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>

</tr>

<tr>

<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>

</tr>

<tr>

<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>

</tr>

</tbody>

</table>

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!