制作灯箱链接外部网页

发布于 2024-12-16 20:45:57 字数 1107 浏览 1 评论 0原文

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

此解决方案不起作用：

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

有什么方法可以解决此问题吗？

谢谢。

原文

If I have a lightbox gallery, is it possible to link one of the images to an external website? So that the other images are treated as the regular lightbox, but if you click on one of the images you are sent to an external webpage?

This solution doesn't work:

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

Are there any ways to work around this problem?

Thanks.

分享到QQ

分享到微博

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

发布评论

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

爱她像谁 2024-12-23 20:45:57

<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() 获取下一个元素，除了第一个元素之外的所有其他元素都将被选择。

像这样的查询的使用更常见，并且通常更具可读性。

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

You can use the function .next() to take the next element, all others will be selected exempt the first one.

the use of query like this is more common and it'll be usually be more readable.

回复收藏 0 原文

~没有更多了~