Open image in overlay...

The following code opens an image in a blank page:
Web Programing (<a id="A3" href="./images/courseList.png" target="_blank"><abbr title="see course list...">4.0 GPA</abbr></a>)

Open in new window

Question: How can I revise this to display the image in an overlay?

I suppose there will be an X-button to close the overlay.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You probably want to look at using a lightbox plugin - there are many out there so you would need to look around for one that suites your needs.

If you would like to roll your own or are just interested in how you would then post back and I will post some code.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Tanks Julian,

I have managed to put together a functioning lightbox but I need to validate my pages because what was working on my desktop is not functioning after I ftp it.  Will be back after the validation.

Mike
0
Julian HansenCommented:
@Mike,
Post back if you need help - if you have a link to the site that you can post that would help otherwise posting full page source second prize.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
You can view the work in progress at: datapassion.net. Below is the html for "Resume" or index.html page. This page has one functioning lightbox for head-shot image but has some issues:

Q1: How can I extend the box boundaries to have x-button in top-right corner for the head-shot? As it is te x-button appears out side of the box.
Q2: How can I extend the existing code to be utilized for zip code 90024 as well.

Other than 90024 (to display a map size: 690 x 429), I have three other hyperlinks for the following images:
1. Course list on 4.0 GPA, size: 557 x 638
2. MTA 98-364, size: 1359 x 1344
3. 20-461 Course, size: 994 x 773

Is it possible, or necessary, to pass image dimensions as parameter to use least amount of code? After I see how you do 90024 relating to Q2, I will apply the same to andle the other 3 images.
<!DOCTYPE html>
<html>
<head>
	<title>Resume- Mike Eghtebas</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>  
	<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="lightbox.js"></script>
	
	<link rel="stylesheet" type="text/css" href="./styles/resume.css"/>

	<script>
	$(function() {
  $(document).on('keyup',function(e) {
    if (e.keyCode == 27) {
      $('.overlay').remove();
    }
  });
  $('body').on('click','.overlay, .close', function() {
    $('.overlay').remove();
  });
  $('body').on('click','.videobox', function(e) {
    e.stopPropagation();
  });
  $('.video-link').click(function(e) {
    var el = $(this);
    e.preventDefault();
  var vbox =  $('<div/>').addClass('videobox').attr('id','conter');
    vbox.append($('<a/>').addClass('close'));
    vbox.append($('<video/>').prop({autoplay: true, controls: true}).attr('src', el.attr('href')));
    vbox.append($('<div/>').html(el.data('description')));

    $('body')
      .append(
        $('<div class="overlay"/>').height(Math.max($(document).height(), $(window).height()))
      .append(
        vbox
      )
    );
  var left  = ($(window).width() - vbox.width()) >> 1;
  var top = $(window).scrollTop() + 50;

  vbox.css({
    left: left + 'px',
    top: top + 'px'
  });
  });
});

</script>
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
    		body
		{
			font-family:Helvetica, Arial;
		}
     		.backdrop
		{
			position:absolute;
			top:0px;
                        left:0px;
			width:100%;
			height:100%;
                        background:#000;
			opacity:.0;
			filter:alpha(opacity=0);
			z-index:50;
			display: none
		}

     		.box
		{
			position:absolute;
			top:20%;
                        left:30%;
			width:370px;
			height:370px;
			background:#ffffff;
align:center;
			z-index:51;
                        padding:10px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
                        border-radius:5px;
			-moz-box-shadow:0px 0px 5px #444444;
			-webkit-box-shadow:0px 0px 5px #444444;
			box-shadow:0px 0px 5px #444444;
			display: none
		}

     		.close
		{
			float:right;
			margin-right:6px;
			cursor:pointer;
		}		
		</style>
		<script type="text/javascript" >
			$(document).ready(function(){
				$('.lightbox').click(function(){
					$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
					$('.box').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .box').css('display', 'block'); 
				});
			
				$('.close').click(function(){
					close_box();
				});
				$('.backdrop').click(function(){
					close_box();
				});
				function close_box(){
					$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
						$('.backdrop, .box').css('display', 'none');
					});
				}
	
			});
		</script>
</head>
<body>
<div class="content">

		<div class="btn-group-vertical">
			<a href="index.html" class="current btn btn-default">Resume</a>
			<a href="Videos.html" class="btn btn-default">Videos...</a>
			<a href="Projects.html" class="btn btn-default">Projects...</a>
			<a href="certificate.html" class="btn btn-default">Certificates...</a>
			<a href="more.html" class="btn btn-default">More...</a>

				<div class="btn-group">
					<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						Download
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="resources/Resume_Mike_Eghtebas_March15_2015.docx">Resume.docx</a></li>
						<li><a href="resources/Resume_Mike_Eghtebas_March15_2015.pdf" target="_blank">Resume.pdf</a></li>
					</ul>
				</div>

		</div>
		
	<div class="wrapper">
   
        <div class="left-col">&nbsp;
			<a href="#" class="lightbox"><img src="./images/MMEImageTumb.jpg" alt="Head shot." width="78" height="60"/></a>
            <div class="backdrop">Open Ligtbox</div>
		    <div class="box"><div class="close">x</div><img src="./images/MMEImage.jpg" alt="Head shot." width="350" height="350"/></div>
		</div> <!-- <div class="left-col"> -->

		<div class="verticalGapTop">&nbsp;</div>

		<div class="right-col nameBlock">
			<p>
				<span class="name">Mike M Eghtebas</span><br>
				<span class="title">Database Development & Web Programming</span><br>
			</P>
		</div> <!-- <div class="right-col nameBlock"> -->
           
		<div class="horizontalGap">&nbsp;</div>   

		<div class="left-colBottom">
                Los Angeles, CA <a id="A2" href="./images/location.png" target="_blank"><abbr title="see location map...">90024</abbr></a>
		</div> <!-- <div class="left-colBottom"> -->
 			
		<div class="verticalGapBottom">&nbsp;</div>

		<div class="right-colBottom">
<!--	-->		
<img src="./images/underConstruction.png" alt=" " width="350" height="350"/>

		</div> <!-- <div class="right-colBottom"> -->
	</div> <!-- <div class="wrapper"> -->

	<div class="footer"> 
        <div class="note"><span>September 2015 update, single page</span> </div>
		<div class="cssLogo"><img style="border:0;width:44px;height:15px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"  alt="Valid CSS!" /> </div>
	</div>

</div><!-- <div class="content"> -->
</body>
</html>

Open in new window

0
Julian HansenCommented:
@Mike - I thought I had responded to this - appears I did not.

The thing with lightbox libraries is that there are literally hundreds of them - each with their own features. I would spend some time looking at a few to see which features best match your requirements.

Take a look at fancybox (http://fancybox.net/) it has a lot of features.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.