使 jquery 灯箱工作

发布于 2024-11-27 17:20:29 字数 1401 浏览 3 评论 0原文

我尝试了三种不同的 jquery 插件，试图在单击带有图像的链接时出现灯箱。这是我目前正在尝试的 http://balupton.github.com/jquery-lightbox /demo/ 我已在头部添加了插件源，并且图像链接具有 rel='lightbox' 但当我单击图像时，它会使浏览器打开图像。

这就是我脑子里的内容

<!DOCTYPE HTML PUBLIC "-//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">

这就是我如何获得图像链接

<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>

希望有人可以帮助我，谢谢

原文

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 PUBLIC "-//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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只是偏爱你 2024-12-04 17:20:29

确保脚本已添加到页面，并且您使用的是 lightbox 推荐的 jquery 版本。我认为这与您的安装有关，因为我必须在小提琴中工作：

http://jsfiddle.net /jensbits/u6v98/

安装说明

回复收藏 0 原文

时间你老了 2024-12-04 17:20:29

如果将其放在标记上，请确保防止触发默认事件处理程序。

$('a[rel=lightbox]').click(function(event){
    event.preventDefault();
});

通过阻止触发默认事件，您可以告诉浏览器不要像在链接内时那样重定向到 someexternalimage.jpg。

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.

回复收藏 0 原文

~没有更多了~