是否可以使用 jQuery slimbox2 显示带有文本而不是图像的 div？

发布于 2024-11-01 20:47:49 字数 377 浏览 3 评论 0原文

您好，我正在尝试在单击链接时在模式/灯箱类型窗口中显示一些文本内容。我选择 slimbox2 是因为它很轻量，但它似乎仅用于显示图像和图像库。

无论如何，有没有办法让它在单击链接时显示 Div？或者有人可以推荐一个可以满足我需要的插件吗？

谢谢大家

这是我的代码：

var sidetwos = $('div.side2');
var fliplinks = $('a.flip');

fliplinks.each(function(index, object) {
        $(this).click(function() {
            $(sidetwos[index]).fancybox();
        });
    });

原文

Hi I'm trying to get some text content to display in a modal / lightbox type window when a link is clicked. I chose slimbox2 because it's lightweight, but it seems to be intended solely for displaying images and image galleries.

Is there anyway to get it to display a Div when a link is clicked?
OR can anyone recommend a plugin that will do what I need?

Thanks all

Here's my code:

var sidetwos = $('div.side2');
var fliplinks = $('a.flip');

fliplinks.each(function(index, object) {
        $(this).click(function() {
            $(sidetwos[index]).fancybox();
        });
    });

分享到QQ

分享到微博

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

发布评论

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

瑕疵 2024-11-08 20:47:49

好吧，没有其他人可能会接受这个，所以我将发布我的解决方案...

我决定使用 FancyBox jQuery插件（正如我在评论中提到的）使事情变得容易多了！

我有一系列“名片”类型的 DIV，显示徽标和一些联系方式以及更多信息的链接。该链接附加到 fancybox js 调用中，信息 DIV 使用 rel= 库引用进行分组，以允许在它们之间导航，而无需打开和关闭每个 DIV 的模式框！

HTML:

<a href="#offerDescription-$id" class="flip" rel="offer-description">Show Details »</a>

<div id="offerDescription-$id" class="lightbox">
    <img class="offerlogo" src="http://www.everyone-benefits.co.uk/images/logos/$logo.jpg" />
    <h2>$Title</h2>
    <p class="description">$Text</p>
</div>

JavaScript:

$(function() { // jQuery 'domready' shorthand
    $('a.flip[rel=offer-description]').fancybox();
});

无意居高临下：

请注意，HTML 部分中使用的 $ 符号仅表示该信息来自 PHP，并不代表实际的 PHP 代码！

Well nobody else is likely to pick this up so I'll post my solution...

I decided to use the FancyBox jQuery plugin (as I mentioned in my comment) which made things a lot easier!

I have a series of 'Business card' type DIVs displaying a logo and some contact details with a link for more info. The link is attached to the fancybox js call, with the information DIVs grouped using the rel= gallery reference to allow navigating between them without having open and close the modal box for each one!

HTML:

<a href="#offerDescription-$id" class="flip" rel="offer-description">Show Details »</a>

<div id="offerDescription-$id" class="lightbox">
    <img class="offerlogo" src="http://www.everyone-benefits.co.uk/images/logos/$logo.jpg" />
    <h2>$Title</h2>
    <p class="description">$Text</p>
</div>

Javascript:

$(function() { // jQuery 'domready' shorthand
    $('a.flip[rel=offer-description]').fancybox();
});

Without meaning to be patronising:

Please note that the $ notation used in the HTML part is only to imply that the information is comming from PHP and does not represent actual PHP code!

回复收藏 0 原文

~没有更多了~