AutoDirector forum

To start, auto director is the best program out there! I love the ease of integration and simplicity of design changes.

OK...I am trying to figure out how to integrate light boxing of images. (See link http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm)

To do this you have to add the reference to 3 scripts in the header of your page. From there you add an rel="lightbox" tag to your href for the thumbnail. That is where I am lost. I have looked at the carlist.js and tried to find where the thumbnails get generated. Then at what point would the rel tag get added.

This would make for a pretty cool way to display images if we can get it figured out.

Glad you like the application - thanks for the comments. A lightbox is a great idea and something we're considering in a future version.

The list of vehicle images is always defined in the first OL list in div#autodirector_vehicle. The images themselves are inserted into the page in line 175 of carlist.js, so you could certainly add a rel attribute.

However, I'm not sure the DD lightbox would work without some modification. It looks as though the lightbox is created after the page loads, however, AutoDirector can change the car/images at any time. Therefore, you'd need initialise a new lightbox every time a car was shown. You could possibly do that at the end of the ShowVehicle() function on line 119.

Please let us know if you have any luck.

Craig, thank you for the response.

Is line 175 var node=DOM.ParentFind(evt.Raised.Element,"a")

What does the code on 119 look like? As line 119 in my DreamWeaver does not have the ShowVehicle () function. The first time I can find this function is line 48 then again on 140. In which case makes me wonder about my line 175. (That is in the carlist.js)

The other issue is that autodirector calls it's own POPUP to display the image, thus negating the lightbox. So either the lightbox needs to be integrated into the current POPUP or needs to be replaced. So could we somehow do an event that would trigger the lightbox script instead of the current POPUP event?

Hi.
Line 175 is the one that starts...

for(var p=0;p<this.pics.length;p++)

Some editors will mangle the code - I'd recommend Notepad++.

The popup shouldn't be a problem - simply remove this code from line 81:

new Event(setup.nodevehicle, "click", EventVehicleImageClick);

Alternatively, you could alter the EventVehicleImageClick function to initialise a new lightbox, but it'd really depend on the lightbox code you're using.

Best of luck!

OK... I found a short of "hack."

First go and d/l the files from http://www.digitalia.be/software/slimbox

Then on MY line 225 I call the Lightbox script instead of the PopImage function.
if(img.nodeName.toLowerCase()=="img")Lightbox.show(String(img.src).replace(new RegExp(setup.thumburl),setup.picurl));}

I placed the CSS into my CSS for the page.

Then in the slimbox.js I changed the close href to simply reflect my vehicle page. www.completeycles.net/bikes.html.

Using the cache properties built into Autodirector it refreshes the page from the currently viewed vehicle. (I hope this makes sense.)

The issue is I would ideally like to close the image w/o having to reload the page. But, I think due to getting the image dynamically I am not sure this is possible.

Man I am so stoked! Craig thanks for pointing me in the right direction. I will try to calm down and post a little more logically after I get off my high!

Glad you got it sorted!

The main problem with most lightbox code is that they expect static HTML pages with a list of one or more images that links to other (larger) images. Once the page has loaded, they apply event handlers to create a lightbox effect.

Unfortunately, AutoDirector creates 'new' image lists every time a vehicle is viewed and doesn't reload the page.

What I would suggest is you use a lightbox that can be invoked manually, e.g. something similar to this would be run at the end of ShowVehicle()...

var mycarpics = new LightBox("autodirector_vehicle");

You would then not require a page refresh.

Would there be any chance of posting the relevant lines of code from your carlist.js as I trying to achieve the light box image gallery feature but am having troubles!

Many thanks,

Ben

clynshaw wrote

Would there be any chance of posting the relevant lines of code from your carlist.js as I trying to achieve the light box image gallery feature but am having troubles!

Many thanks,

Ben

Ben,

This is the code I use

if(img.nodeName.toLowerCase()=="img")Lightbox.show(String(img.src).replace(new RegExp(setup.thumburl),setup.picurl));}

I replace the POPUP box function that autodirector has incorporated with this line of code. Main thing I added was the Lightbox.show instead of calling the popup function.