?
Solved

javascript:window.location.href   and the REL tag for lightbox

Posted on 2012-08-28
10
Medium Priority
?
1,549 Views
Last Modified: 2012-09-04
<a href="<?=$ImageBig?>" rel="lightbox[gallery]"> click here </a>

Applying this command to a normal link (using external files) causes a large image or dialog to appear over the parent page.

I have a <div> which I want to behave in the same way whenever someone clicks on it
Here is the code I've attempted.
<div onclick="javascript:window.location.href='<?=$Image?>' rel='lightbox[gallery]'">
click in here
</div>

What is happening is, the image is replacing the parent page.
I suspect it's due to not being able to pass the REL value.

Can anyone help
thanx
0
Comment
Question by:joomla
  • 5
  • 4
10 Comments
 
LVL 10

Expert Comment

by:tdlewis
ID: 38344133
No, the problem is that window.location refers to the entire web page, not just the <div>. Any time you assign a value to window.location.href, the web page gets loaded. What you want to do is add an image to the div. You can either add it at runtime (when the onclick event occurs) or you can load it when the page is rendered and style it to be invisible until onclick occurs.
0
 

Author Comment

by:joomla
ID: 38344140
thanks tdlewis,
there will be many divs and the image associated with each will be dynamically generated.

can you write and example of how you would write the div to achieve the event?
thankx
0
 

Author Comment

by:joomla
ID: 38344397
I ended up wrapping the <div> with the anchor, rather than wrapping the <div> around the anchor

<a href="<?=$ImageBig?>" rel="lightbox[gallery]">
<div>
<?=$ImageBig?>
</div>

Seems to work in all major browsers !!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38344432
Why do you want to achieve here because wrapping a <div> in an <a> element is completely non-standard?

What is the purpose of the div?
0
 

Author Comment

by:joomla
ID: 38360027
Hi JulianH
I wanted to create a div with a image background which would change colour when hovered over and which would open an image when clicked on.
The image background would be dynamic  (based on php/mysql content)
Within the div would be placed some dynamic text which would also have hover/link characteriscs.

Seems to work in all current browsers.

Would love to be guided to a more 'standard' approach
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38360102
why not just make the <a> a block element, a width and a height and give it a background image?
<a href="<?=$ImageBig?>" rel="lightbox[gallery]" class="bigimage"><?=$ImageBig?></a>

Open in new window

CSS (assumes your background image is a sprite arranged vertically)
a.bigimage {
  display: block;
  width: 200px;
  height: 150px;
  background: url(images/someimage.png) no-repeat 0 0;
}
a.bigimage:hover {
  background-postion: 0 -150px;
}

Open in new window

0
 

Author Comment

by:joomla
ID: 38361965
thanks, I understand what you're saying here.
There is one an additional consideration I now realise I hadn't previously mentioned.

What i'm doing is creating a div that displays an image thumbnail as it's background image.
The background image is centred with no-repeat.
The outcome of this is whenever thumbnail images have irregular lengths they are all centred so that centre of the thumbnail appears inside the div.

As you can see, I'm experimenting with limited knowledge of css.
Is there another way to create a thumbnail or display an image, so that if the image is 100px * 170px, it is displayed as 100px * 100px without resizing the image and showing the centre of the image.

thanks
0
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 38362605
I am not sure I have understood your requirements 100% but here is a working example of what I think you mean. (online version here http://www.marcorpsa.com/ee/t101.html)
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a.lightbox').click(function(e) {
    e.preventDefault();
    
    var popup = $('<div id="lightbox"></div>');
    popup.append($('<div class="lightbox-content"><a href="#" class="close-lightbox">x</a><img src="' + $(this).attr('href') + '" /></div>'));
    //popup.append($('<div class="signup-bottom">'));
    $('body').append($('<div id="overlay"></div>').height($(document).height())).append(popup);
    var top = ($(window).height() >> 1) - (popup.height() >> 1);
    var left = ($(window).width() >> 1) - (popup.width() >> 1);

    popup.css({top: top + 'px', left: left + 'px'});
  });
  
  $(document).keypress(function() {
    close_popup();
  });
  $('a.close-lightbox').live('click', function(e) { 
    e.preventDefault();
    close_lightbox();
  });
});
function close_lightbox()
{
  $('#overlay').remove();
  $('#lightbox').remove();
}
</script>
<style type="text/css">
#overlay {
  background: #333;
  opacity: 0.65;
  filter: alpha(opacity=50);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#lightbox {
  position: absolute;left: -999px;
  top: 50%;
  z-index: 200;
  color: #fff;
  padding-bottom: 24px;
}
.lightbox-content {
  background: #000;
  border: 1px solid #fff;
  height: auto;
  padding: 10px;
  z-index: 10000;
}
.image-container {
  width:  100px;
  height: 100px;
  float: left;
  background-position: center center;
  border: 1px solid #ccc;
  padding: 3px;
  background-repeat: no-repeat;
  margin: 5px;
}
a.close-lightbox {
  font-family: system;
  text-decoration: none;
  border-radius: 15px;
  display: block;
  position: absolute;
  top: -18px;
  right: -18px;
  width: 24px;
  height: 24px;
  background: #000;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 24px;
}
a.lightbox {
  display: block;
  width: 100px;
  height: 100px;
}
.image-container:hover {
  opacity: .5;
}
</style>
</head>
<body>
Click Image thumbs to see full image
<div>
  <div class="image-container" style="background-image: url(http://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg)">
    <a href="http://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg" class="lightbox"></a>
  </div>
  <div class="image-container" style="background-image: url(http://shechive.files.wordpress.com/2012/06/mc-random-174.jpg)">
    <a href="http://shechive.files.wordpress.com/2012/06/mc-random-174.jpg" class="lightbox"></a>
  </div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:joomla
ID: 38362968
wow,
I can't believe you've gone to this much effort.
Unbelievable support.
thanks
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38363162
You are welcome - mostly existing code - didn't take long :)
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

594 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