制作灯箱链接外部网页答案

【问题标题】：Make Lightbox Link External Webpage制作灯箱链接外部网页
【发布时间】：2011-11-21 00:59:21
【问题描述】：

如果我有一个灯箱画廊，是否可以将其中一张图片链接到外部网站？这样其他图像就会被视为常规灯箱，但如果您单击其中一张图像，您会被发送到外部网页？

此解决方案不起作用：

<div id="gallery" style="display:inline;">
    <ul>
        <li>
            <a href="http://www.linktohere.com" >
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

有没有办法解决这个问题？

谢谢。

【问题讨论】：

标签： hyperlink lightbox

【解决方案1】：

<htm>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#gallery a').next().lightBox();
        });
    </script>
    <title>Untitled Document</title>
</head>
<body>
<div id="gallery" style="display:inline;">
    <ul>
        <li>
            <a href="http://www.linktohere.com" >
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="title one">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="title two">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>
</body>
</html>

您可以使用函数 .next() 来获取下一个元素，所有其他元素都将被选中，而第一个元素除外。

这样的查询使用更普遍，而且通常更具可读性。

【讨论】：

api.jquery.com/has-attribute-selector 如果您稍微修改示例，也可以使用类似的东西。因此，如果属性选择器找到“标题”，则使用灯箱。如果你这样做，那么如果你的实际链接是第一个元素，它就不再重要了。
谢谢。我稍微简化了这个例子。我真正需要的是在 40 个外部链接中拥有 10 个不同的链接，而其他链接则链接到灯箱。所以我想我需要修改你提到的属性选择器，但是将该模型应用于我的示例有点困难。也许我应该为有问题的
元素添加一个 id 并将它们链接到灯箱？如果是这样，我猜我的灯箱 javascript 看起来像： $(function(){$('#gallery.li a').lightBox();});还是我完全不在这儿？感谢您的建议。