0

是否可以使用 JQuery Fancybox 'Image Gallery' 类型，并在 'title' 内放置一个表单，或者我在 HTML 区域中阅读过？后者，我正在努力弄清楚。

我需要一个我正在使用的图片库，以及 Fancybox 中图库下方的提交按钮 - 这就像一个“添加到购物车”。

我尝试将表单提交按钮放到#fancy-two div 中，但没有显示。我也尝试过使用 title="" 但也没有显示。

我的代码是：

<!-- image gallery type -->
<div style="display: none;" id="fancy-two">

<a class="fancybox" href="images/1A_Pathophysiology_of_diabetes/Slide01.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet" src="images/Send_Me_Slides_Button.png" width="720" height="540" /></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"></a>

<a class="fancybox" href="3d-carousel-plus-fancybox/fancybox/img/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"></a>

</div>

这是我的提交按钮代码：

<form class="add_product" action="" method="post">
<input type="hidden" value="1" name="product_id">

<button class="button orange_send_me_slides" name="add_product" type="submit"><img src="images/Send_Me_Slides_Button.png"/></button>

</form>

感谢您的帮助！

担

更新： 我刚刚注意到 Fancybox 在他们的页面上有两个演示，展示了如何做到这一点，但我不知道在哪里放置这些代码或其中的多少。我无法让它工作:(

使用元素而不是属性

将下载链接添加到标题

欢迎任何帮助！

4

1 回答 1

3

使用Use 元素而不是属性示例，您可以将表单放置在 hiddendiv中

<div id="title-1" class="hidden">
    <form class="add_product" action="" method="post">
        <input type="hidden" value="1" name="product_id" />
        <button class="button orange_send_me_slides" name="add_product" type="submit">add to cart</button>
    </form>
</div>

然后使用此代码

$(document).ready(function () {
    $(".fancybox")
        .attr('rel', 'gallery') // optional if you already have rel in your html
        .fancybox({
        beforeLoad: function () {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }
        },
        helpers: {
            title: {
                type: "inside"
            }
        }
    });
});

请参阅分叉的 JSFIDDLE

于 2013-09-15T21:22:21.880 回答