• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

Lightbox with JS pulldown menu

I'm using a JS pulldown menu, but would like each menu option to open up a different lightbox slide show.

Below is my code...

How can this be done?
///////////// JAVASCRIPT MENU /////////////////////////
var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#DFFDF4', linktarget:'_new'} //Second menu variable. Same precaution.
	["Stretched Limo", "http://www.cnn.com/"],
	["City Car", "http://www.msnbc.com/"],
	["SUV", "http://www.google.com/"],
	["Luxury Car", "http://news.bbc.co.uk"] //no comma following last entry!


//////// PROPOSED LIGHTBOX CODE ////////////////////////////
<a href="images/limo_intro1.jpg" rel="lightbox[limo]" title="Stretch Limousine Information">Test Link</a>
							<a href="images/limo_ext1.jpg" rel="lightbox[limo]" title="Stretch Limousine Exterior"></a>
							<a href="images/limo_int1.jpg" rel="lightbox[limo]" title="Stretch Limousine Interior"></a>

/////////// CURRENT CODE FOR PULLDOWN /////////////////////
<map name="linkbanner1" id="linkbanner1">
            <area shape="rect" coords="23,10,178,42" href="fleet.php" class="menuanchorclass" rel="anylinkmenu4" onclick="return GB_showCenter('Email', this.href, 460, 565)" alt="Email" />

Open in new window

1 Solution
Assuming that " PROPOSED LIGHTBOX CODE" is your menu, I would suggest changing that to be a nested <ul> or <ol> - both for ease of use (in accessing and manipulating the DOM) as well as for SEO benefit. Right now your sub-level dropdown items are being stored in javascript and search enginges likely won't crawl that.

Once you create your menu as a <ul> or <ol> I would suggest checking out FancyBox? You can apply classes to organize groups (slideshows) as you requested very easily. Instructions are here:

There are a million free examples of <ul> dropdown menu's on google (i.e. http://www.cssplay.co.uk/menus) so I wouldn't get too attached to the one you are using currently.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now