Making a jquery lightbox work
I've tried three different jquery plugins to try to make a lightbox appear when i click a link with a image. This is the one I'm currently trying http://balupton.github.com/jquery-lightbox/demo/ I've added the plugin source in the head and the links with images have rel='lightbox' yet when I click an image it makes the browser open the image.
This is what I have in the head
<!DOCTYPE HTML PU开发者_C百科BLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="sumthing">
<meta name="keywords" content="stuff">
<link rel="stylesheet" type="text/css" href="/site_media/css/peda.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/site_media/favicon.ico" type="image/x-icon">
<script type="text/javascript" src="/site_media/js/jquery.js"></script>
<script type="text/javascript" src="/site_media/jquery-lightbox/scripts/jquery.lightbox.min.js"></script>
<script src="/site_media/js/imgscale.js"></script>
<script type="text/javascript">
This is how I have the image links
<a rel="lightbox" href="someexternalimage.jpg"><img class="contentimg" style="display:block; max-width:100%;max-height:500px; padding-top:5px; margin-bottom:3px" src="someexternalimage.jpg"></a>
Hope someone can help me, thanks
Make sure the scripts are added to the page and you are using the version of jquery that lightbox recommends. I think it has something to do with your installation because I got to work in a fiddle:
http://jsfiddle.net/jensbits/u6v98/
Installation instructions
If you put it on an <a> tag, make sure you prevent the default event handler from firing.
$('a[rel=lightbox]').click(function(event){
event.preventDefault();
});
By preventing the default event from firing, you are telling the browser not to redirect to someexternalimage.jpg like it normally would when it's inside a link.
加载中,请稍侯......
精彩评论