Shadowbox 将图像打开到新页面

发布于 2024-12-20 18:36:35 字数 806 浏览 3 评论 0原文

我正在尝试使用 Shadowbox.js 在当前网页顶部打开图像。但是，当我单击该链接时，它会将我带到我的图像，并且下面的页面会变成空白页面。有谁知道如何打开shadowbox，同时将我当前的页面保留在下面？

这是我的代码：

<head>
    <script src="shadowbox-3.0.3/shadowbox.js" type="text/javascript"></script>
    <link rel="stylesheet" href="shadowbox-3.0.3/shadowbox.css" type="text/css">
</head>

<body onload="Shadowbox.init();">
    <table>
        <tr>
            <td><a href="ss1.jpg" rel="shadowbox[screenshots]">image #1</a></td>
            <td><a href="ss2.jpg" rel="shadowbox[screenshots]">image #1</a></td>
            <td><a href="ss3.jpg" rel="shadowbox[screenshots]">image #1</a></td>
        </tr>
    </table>

</body>

原文

i am trying to use shadowbox.js to open an image on top of the current web page. However when i click the link it takes me to my image and the page underneath goes to a blank page. Does anyone know how to open the shadowbox while keeping my current page underneath?

Here is my code:

<head>
    <script src="shadowbox-3.0.3/shadowbox.js" type="text/javascript"></script>
    <link rel="stylesheet" href="shadowbox-3.0.3/shadowbox.css" type="text/css">
</head>

<body onload="Shadowbox.init();">
    <table>
        <tr>
            <td><a href="ss1.jpg" rel="shadowbox[screenshots]">image #1</a></td>
            <td><a href="ss2.jpg" rel="shadowbox[screenshots]">image #1</a></td>
            <td><a href="ss3.jpg" rel="shadowbox[screenshots]">image #1</a></td>
        </tr>
    </table>

</body>

分享到QQ

分享到微博

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

发布评论

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

对岸观火 2024-12-27 18:36:35

按照文档的建议，将 Shadowbox.init() 添加到中。可能把 CSS 链接放在第一位；再次按照文档的建议。以下内容应进入头部/

<script src="shadowbox-3.0.3/shadowbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="shadowbox-3.0.3/shadowbox.css" type="text/css">
<script type="text/javascript">
 Shadowbox.init();
</script>

来源： http://www.shadowbox-js.com/usage .html

工作页面如下：

<html>
<head>
 <script src="shadowbox.js" type="text/javascript"></script>
 <link rel="stylesheet" href="shadowbox.css" type="text/css">
 <script type="text/javascript">
   Shadowbox.init();
 </script>
</head>
<body>
<table>
    <tr>
        <td><a href="ss1.jpg" rel="shadowbox[screenshots]">image #1</a></td>
        <td><a href="ss2.jpg" rel="shadowbox[screenshots]">image #2</a></td>
        <td><a href="ss3.jpg" rel="shadowbox[screenshots]">image #3</a></td>
    </tr>
</table>
</body>
</html>

Add the Shadowbox.init() to the <head> as the documentation suggests. Possibly put the CSS link first; again as the documentation suggests. The following should go into the head/

<script src="shadowbox-3.0.3/shadowbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="shadowbox-3.0.3/shadowbox.css" type="text/css">
<script type="text/javascript">
 Shadowbox.init();
</script>

Source: http://www.shadowbox-js.com/usage.html

Working Page Below:

<html>
<head>
 <script src="shadowbox.js" type="text/javascript"></script>
 <link rel="stylesheet" href="shadowbox.css" type="text/css">
 <script type="text/javascript">
   Shadowbox.init();
 </script>
</head>
<body>
<table>
    <tr>
        <td><a href="ss1.jpg" rel="shadowbox[screenshots]">image #1</a></td>
        <td><a href="ss2.jpg" rel="shadowbox[screenshots]">image #2</a></td>
        <td><a href="ss3.jpg" rel="shadowbox[screenshots]">image #3</a></td>
    </tr>
</table>
</body>
</html>

回复收藏 0 原文

~没有更多了~