I'm working on a website for a landscaping business, whats the best way to post before/after pictures on my site. Currently I have the before/after pictures just beside each other so you can compare, however I would love to have them be thumbnails that open into a larger picture for customers to view. My finished projects page I just created a gallery with the scroll thumbnails at the bottom for visitors to go through. Hope that makes sense.

www.landscapesbyab.com is the site

I'm open for any suggestions

Thanks

I had a look at your page. The 'before and after' pictures are small and hard to make out where one pic ends, and the other starts. You may want to increase the picture size, and separate them a little.

For a CoffeeCup app, have you tried the Photo Gallery? You can get a 15 day free trial of the software to test it out and see if it suits your needs before spending any money. It can help you create a photo slide show, with thumbnails. With a little imagination, you can have just the thumbnail veiw, with before/after pics. Play around with it and see if it can do what you want.

I do have the complete software package, I want to have the before/after beside each other like I currently have them. Are you saying to create a gallery for each before/after pic?

Google ThickBox. It's what you are asking for, is easy to use, and it's free.

I have never heard of google thickbox, i'll do some googling to find it

Tom, I did look into this, looks like it requires some java scripting/coding, I'm not real experience with it, I did have a little html training but not sure where to begin with it, thanks

The javascript is already coded for you. You simply put that javascript file that is provided into the same directory (along with the css files that are included.

Insert the javascript code calling the external javascript file provided in the head of your html page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

And add a few attributes to the img tag, and your done.

class="thickbox" rel="Photos"

They provide the files, the instructions, and the examples to follow.

Perhaps if the before & after pics were joined as one image, you could have them cycle through as sets in a slideshow with CoffeeCup's Photo Gallery.

I now see I have to copy and paste things in, when i'm in my coffee cup visual site designer do i create a new html area and paste the code in there?
sorry I'm just not that experience with this, i appreciate all your help

yeah thickbox to confusing for this guy anyone else have anything