Solved

Lightbox with JS pulldown menu

Posted on 2010-08-17
1
381 Views
Last Modified: 2012-05-10
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.

anylinkmenu4.items=[

	["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" />

			</center>

			</map>

Open in new window

0
Comment
Question by:tru504187211
1 Comment
 
LVL 11

Accepted Solution

by:
level9wizard earned 500 total points
ID: 33579713
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:
http://fancybox.net/howto

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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now