?
Solved

Help with lightbox

Posted on 2012-04-11
4
Medium Priority
?
193 Views
Last Modified: 2012-06-12
I am fairly new to html and very new to jquery/lightbox.  I desire to do the following.  I want a hyperlink that opens a lightbox gallery that shows several photos.

My code so far looks like this:
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
	
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#gallery a').lightBox();
			});
		</script>		
	</head>
	<body>
		<div id="gallery">  
			<a href="photos/image1.jpg" >Picture 1</a>
			<br/>
			<a href="photos/image2.jpg" >Picture 2</a>
		</div>
	</body>
</html>

Open in new window


I would like to show both pictures (or more) but with only one link.  Any ideas?
0
Comment
Question by:randys106
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Anuradha Goli
ID: 37837023
I can present you a logic to implement such scenario;
You can place all the images you wanted to show in popup in other html file.
using the Jquery on image click you can popup that HTML.
But instead of light box you need to use, fancybox or other lightbox plugin that dispaly html in popups.
Hope this helps you better.
0
 

Author Comment

by:randys106
ID: 37841039
I just found an example of what I want to do but it uses Joomla.  Look here at example 7.  Can I do this in Lightbox or can I mix html and joomla?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 2000 total points
ID: 37847770
Yes you can use just add other ids in lightbox
<script type="text/javascript">
			$(function() {
				$('#gallery a').lightBox();
			});
		</script>	

Open in new window


<div id="gallery">  
			<a href="photos/image1.jpg" >Picture 1</a>
			<br/>
			<a href="photos/image2.jpg" >Picture 2</a>
		</div>

Open in new window


Add div like gallery in above
0
 

Author Comment

by:randys106
ID: 37890279
Thanks jagadishdulal.  That helped but I am still struggling.  Here is really what I am trying to accomplish.  I want two hyperlinks.  When you click the first one, it opens a lightbox gallery.  when you click the second one it opens a different lightbox gallery.

Thanks in advance.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

770 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