PopUp Photo Navigation like Lightbox2

**robobugs** · 14 May 2009, 05:56 AM

Hello everyone!

I am working on some gallery pages for my site and I would like to know something. I have been using LightBox2 in my hand coded (uggghhh) site for several years and I really like how you can click on the left or right side of the picture to go either to the previous or next photo in the gallery.

If you would like to see the effect, here's some examples:
http://www.huddletogether.com/projects/lightbox2/

XWD doesn't seem to have this navigation feature, so I was wondering if there's a way to do it that I just don't know? Or could I incorporate LightBox2 and let it handle the photo popups? This would involve adding some code to the <head> section as well as adding a rel="someinfo" to the <a href> section of the code. How would I do this?

Mike

**angelize** · 14 May 2009, 07:45 AM

Hi Robobugs, this effect is easy to do in web designer using a series of popup layers. In the attached example I used two photos and the next button is a mouseover effect triggered by a rectangle with 95% transparency. I even used a named colour on the frame so by dragging the colour popup1 into the colour editor it can easily match any colour scheme. The same method I used for the next button could also be used to create a back button.

**robobugs** · 14 May 2009, 08:38 AM

Wow angelize! That's pretty slick looking. Thanks for the example.

It looks like it would take alot of layers for the many pages with loads of pictures I am dealing with here. It does offer the best maximum control for popping up large photos in a gallery.

On another note, I have been doing some research with adding Lightbox2 to my site and that too would also involve lots of extra work. I believe I know how to do it with Lightbox2 by inserting a javascript instruction into the URL for the picture, but I need to upload each picture separately.

I would adapt the instructions from the following thread:

Search for "Google Analytics tagging a link"

I would replace the "pageTracker._trackPageview("/downloads/map")" with my "rel=" tag to link all the items into a set. The problem is, then I need to upload .js files, big versions of every photo, modify every single photo I have to include the proper URL information, and insert the .js file callouts into the <head> section.

Either way, lots of work. And the java may not even work through the Xara created code.

Perhaps this would be another item to add to the wishlist for Xara Web Designer. I think I will go post it there now.

Thanks again angelize!
Mike

**steve.ledger** · 14 May 2009, 11:45 AM

If you use Google PICASA photo manager you can download the SIMPLEVIEWER template, create a html gallery and embed this in your Web Designer page.

► Here's an example with details.

**steve.ledger** · 15 May 2009, 07:21 AM

Here's an earlier thread wheren I show another example of using SIMPLEVIEWER embedded in a WD page.

**robobugs** · 15 May 2009, 08:31 AM

Now that's what I would like! Your use of Simpleviewer is beautiful! I just have 1 problem, I want my site accessible to my iPhone and it doesn't run Flash yet. Sorry to introduce another variable, but because of this I would prefer to stay with Javascript. The alternative would be to re-create my site in a tiny format for the iPhone specifically.

So far, I have been using the built-in function, although it enlarges the shadow with the photo. It is quick and does the job.

I would like to see this thread continue to grow into a nice collection of ideas on Photo galleries with linked pictures. It's quickly becoming a nice collection of different approaches and examples for Photo Galleries with XWD.

Thanks a Bunch!

**Boy** · 15 May 2009, 02:06 PM

You can also use SimpleViewer with a little free program called Porta. The resulting gallery uses javascript. More information and links are here: http://www.airtightinteractive.com/s..._instruct.html. I have used it and it works all fairly straightforward. Quite a few display options too. Good luck!

**steve.ledger** · 15 May 2009, 09:25 PM

Porta is very good, thanks for the link Boy.
However using SIMPLEVIEWER for the album output still requires FLASH.

<script type="text/javascript" src="ext/js/swfobject.js"></script>

This Porta-generated SimpleViewer album requires
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe Flash ver. 7 (or newer)</a>

**Boy** · 16 May 2009, 07:37 AM

You're quite right, Steve, I missed that one.

**KWard** · 23 July 2009, 06:07 AM

I'm really surprised that Webdesigner doesn't have the photo galleries made with the option of clicking through a series of photos (next and previous right from the larger photo)

A photo album tool like in Xara Webstyle would be great (but with more customization features like frames, etc...) Import photos and BAM you have a photo album, thumbnails and all. Webstyle made that so quick and easy...

My client wants something very much like "gallery 7" in the Designs Gallery, (showing thumbnails ONLY until clicked, and WITH a Frame), BUT he also wants to be able to scroll through the large photos without clicking on the thumbnails again.

If I use Simpleviewer and Porta - Is there a way to have only the thumbnails showing until one is clicked on? (As in gallery 7)? It all sounds so complicated... makes me want to scream!