代码之家 › 专栏 › 技术社区 › Kevin Kromjong

使用Fancybox仅获取第一个数据库条目

fancybox-2 database html jquery php

Kevin Kromjong · 技术社区 · 12 年前

我有一个while循环,可以从数据库中获取图像。如果单击图像,将弹出一个框,其中包含相应的名称。

因此,如果猿的图像连接到数据库中的文本“香蕉”,则当您单击猿的图像时出现的弹出窗口包含单词“香蕉”。

我想用Fancybox2实现这一点。一切正常,但弹出窗口中的文本仅显示数据库的第一个条目。我的数据库中有四个图像,它们都在屏幕上,但无论您单击哪个图像,弹出窗口中的文本都是第一个数据库条目的文本。

我在互联网上做过研究,找到了多种解决方案,比如“在jquery文件中使用类而不是id”,但都没有奏效。

这是我的代码:

HTML格式

<a class="fancybox" href="#data">
    <img src="<?php echo $row['image'];?>"/>
</a>


<div id="data">
    <p><?php echo $row['name'];?></p>
</div>

jQuery

$(document).ready(function () {
    $(".fancybox").fancybox();
});

我知道我使用ID来引用内容,但我不知道如何将其作为一个类。我希望有人能帮我。

如果这是重复的问题,我很抱歉。我是新来的,我没有找到任何其他能帮助我的解决方案

提前感谢!

2 回复 | 直到 12 年前

JFK 12 年前

同意@Jeroen:您可能不需要 #data 分区,两者都不显示内容为 inline 但作为 html (直接从链接)所以尝试添加(HTML5) data-* 归因于您的 <a> 标签,如:

<a class="fancybox" href="#" data-content="<?php echo $row['name'];?>">
    <img src="<?php echo $row['image'];?>" alt=""/>
</a>

然后,从 data 属性和集合 type 到 html格式 ,使用 beforeLoad 回调方式:

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "html",
        beforeLoad: function () {
            this.content = $(this.element).data("content");
        }
    });
});

看见 JSFIDDLE

jeroen 12 年前

我已经有一段时间没有使用fancybox了,但我很确定,您需要做的就是设置 title 属性:

<a class="fancybox" href="#data" title="<?php echo $row['name'];?>">
    <img src="<?php echo $row['image'];?>"/>
</a>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前