Solved

Help with lightbox

Posted on 2012-04-11
4
190 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
  • 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 500 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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.NET MVC 5- How can I post textarea value using @Html.ActionLink? 8 62
SVG and IE11 2 19
title attribute 5 27
Make Float not to Wrap 15 35
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

730 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