Display larger image...

Upon click on a tumbnail, the following code displays a larger image on an overlay:
       
<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>

Open in new window

Question: How can I add the same functionality to the following hyperlink (90024) on the same page?

The following shows the image (location.png) on a blank page not on the same page on an overlay. See datapassion.net for demo of existing. overlay
<a id="A2" href="./images/location.png" target="_blank"><abbr title="see location map...">90024</abbr></a>

Open in new window


The functions used on this page are:
<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>

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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:
Using fancybox
HTML
    <div class="left-col">&nbsp;
      <a class="fancybox" href="http://datapassion.net/images/MMEImage.jpg"><img width="78" height="60" alt="Head shot." src="http://datapassion.net/images/MMEImageTumb.jpg"></a>
    </div>    
    <span class="contactBlue"> Location:</span><br/>
    Los Angeles, CA
    <a id="A2" class="fancybox" href="http://datapassion.net/images/location.png"><abbr title="see location map...">90024</abbr></a>

Open in new window

jQuery
$(function() {
  $('.fancybox').fancybox();
});

Open in new window

Working sample here
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Julian,

Using your link, it works great. But, when I copy the code to my environment, it doesn't. It opens the images on the same page in upper left corner with white background and no close button.

I eventually will get mastery of all these but now I want to get this done if you possibly help me to make it work. I also tried to get some information I thought will help correct the problem at: http://www.experts-exchange.com/questions/28744700/replace-minified-JavaScript-with-http.html

Thanks.
Julian HansenCommented:
It opens the images on the same page in upper left corner with white background and no close button.
This is usually when you don't have the style sheets set up correctly.

Based on your other question (I have posted there as well) you have copied the code from the sample without also copying the libraries. The sample code refers to local versions of the CSS and JS files (rather than a CDN) so copying the code on its own won't work.

Refer to the directions in the other thread on how to install fancy box and get the code working.

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
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
It is working now.

thx
Julian HansenCommented:
You are welcome Mike,
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.