从文本链接打开 Colorbox

发布于 2024-09-07 11:07:23 字数 925 浏览 9 评论 0原文

[编辑问题]

我正在使用图像预览工具提示，它使用 rel 属性，因此对于颜色框，我使用 class="slideshow" 将图像分组在一起。我的工作正常，但我希望能够从文本链接打开幻灯片，如下所示。

（rel =“medium.jpg”是用于图像预览的图像）

<div id='gallery'>
      <a  href='large.jpg' class="slideshow" rel='medium.jpg'><img src='small.jpg'/></a>
      <a  href='large2.jpg' class="slideshow" rel='medium2.jpg'><img src='small.2jpg'/></a>
    </div>

<!--text link-->
<a href="#" class="openSlideshow">open slideshow</a>

下面是触发颜色框的标准代码，我如何修改它以打开幻灯片？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){
                $("a.openSlideshow").colorbox({slideshow:true});
            });
</script>

提前致谢。

原文

[EDITED QUESTION]

I am using an image preview tooltip, which is making use of the rel attribute, so for the colorbox i am using the class="slideshow" to group the images together. I have this working fine, but i'd like to be able to open the slideshow from a text link, seen below.

(rel="medium.jpg" is the image used for the image preview)

<div id='gallery'>
      <a  href='large.jpg' class="slideshow" rel='medium.jpg'><img src='small.jpg'/></a>
      <a  href='large2.jpg' class="slideshow" rel='medium2.jpg'><img src='small.2jpg'/></a>
    </div>

<!--text link-->
<a href="#" class="openSlideshow">open slideshow</a>

Below is the standard code to trigger the colorbox, how can i modify this to open the slideshow?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){
                $("a.openSlideshow").colorbox({slideshow:true});
            });
</script>

Thanks in advance.

分享到QQ

分享到微博

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

发布评论

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

乱了心跳 2024-09-14 11:07:23

我查看了 colorbox 页面，这里解释了所有内容。

看看这个，这正是您想要做的：示例 1

回复收藏 0 原文

凉薄对峙 2024-09-14 11:07:23

嗯，当我尝试 Kai 的建议时，它不起作用

使用示例页面：

$(document).ready(function(){
  //Examples of how to assign the ColorBox event to elements
  $("a.example4").colorbox({ slideshow: true });


    <h2>Slideshow</h2>
    <p><a href="../content/ohoopee1.jpg" class="example4"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
    <p><a href="../content/ohoopee2.jpg" class="example4"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <p><a href="../content/ohoopee3.jpg" class="example4"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

Hmm when I try Kai's suggestion it does not work

Using the example page:

$(document).ready(function(){
  //Examples of how to assign the ColorBox event to elements
  $("a.example4").colorbox({ slideshow: true });


    <h2>Slideshow</h2>
    <p><a href="../content/ohoopee1.jpg" class="example4"  title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
    <p><a href="../content/ohoopee2.jpg" class="example4"  title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <p><a href="../content/ohoopee3.jpg" class="example4"  title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

回复收藏 0 原文

莫言歌 2024-09-14 11:07:23

只需在动态创建图库后对其进行扩展即可。

$(document).ready(function() {
            //dynamacially create the gallery here

            $("a.slideshow").colorbox({ slideshow: true });
        })

Just extend it after dynamically creating the gallery.

$(document).ready(function() {
            //dynamacially create the gallery here

            $("a.slideshow").colorbox({ slideshow: true });
        })

回复收藏 0 原文

~没有更多了~