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!

My Adventure With Shadowbox, HTML Tables, and Scribd Documents (Part 1 of 3)

Yesterday afternoon, I started experimenting with Shadowbox.js in the hopes of replicating the DocShots feature that DocStoc has implemented here.

I really liked the fact that the documents could be embedded and load quickly without taking up too much actual page space, unlike the Scribd documents I currently have all over the site, which take up way to much room, and can slow page loads dramatically.

And so my adventure with Shadowbox.js began. I started out by searching the SquareSpace forums (My site is currently hosted at SquareSpace, one of the best hosting/blogging platforms I have found so far.) for anyone who had already installed Shadowbox on the SquareSpace platform, and to my pleasant surprise, someone had.

They had written up a tutorial that undoubtedly saved me hours of figuring out how to install Shadowbox on my own.

Take a look at Part 2 to find out how I ended up creating my own version of DocShots.

Take a look at Part 3 to find out how I finally figured out how to create a gallery with Shadowbox and HTML tables. 

The only reason I broke this post in to three parts is because it would have been way too long as one post.