jQuery fancybox在标题中添加提交按钮图像 [英] jquery fancybox add submit button image in title
问题描述
是否可以使用JQuery Fancybox的图片库"类型,然后在标题"中放置表格,或者我已经在HTML区域中阅读了?后者,我正在努力找出答案.
Is is possible to use the JQuery Fancybox 'Image Gallery' type, and place a form inside the 'title' , or I've read in an HTML area? The latter, I'm struggling to figure out.
我需要一个正在使用的图像库,并且在Fancybox的图像库下方还有一个提交按钮-就像是添加到购物车".
I need a gallery of images, which I have working, and also a submit button below the gallery in Fancybox - it's like an 'add to cart'.
我尝试将表单提交按钮放在#fancy-two div中,但未显示.我也尝试过使用title ="播放,但未显示任何一个.
I've tried dropping my form submit button inside the #fancy-two div, but it's not showing. I've also tried playing with the title="" but not showing either.
我的代码是:
<!-- 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>
这是我的提交按钮代码:
Here is my submit button code:
<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在其页面上有两个演示,演示了如何执行此操作,但是我不知道将这些代码放在何处或将其放置多少.我无法正常工作:(
Update: I just noticed that Fancybox have two demos on their page that show how to do this, but I don' know where to put this code or how much of it. I can't get it to work :(
欢迎任何帮助!
推荐答案
使用使用元素代替属性例如,您可以将表单放置在隐藏的div
之内,例如
Using the Use element instead of attribute example, you could place your form inside the hidden div
like
<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
See forked JSFIDDLE
这篇关于jQuery fancybox在标题中添加提交按钮图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!