我正在使用Fancybox来显示内联内容,想象力和iframe。 这是网站:http://marturii-nunta.com.ro/index.php。 我想创建一个库,以便用户可以浏览图像,但我不知道如何将其应用于内联内容... 请指教
这是我的代码:
<div style="display:none">
<a id="inline" href="#popup">open</a>
<div id="popup">
<table>
<tr>
<td><img class="bigpic" src="" width="550px" height="500"/><div id="caption"></div><td>
<td><iframe width="390" height="490" frameborder="0" scrolling="no" src="form.php"></iframe></td>
</tr>
</table>
</div>
</div>
JS:
<script>
var code = ""; // product code
var caption = "";
$(document).ready(function() {
/* Using custom settings */
$("a#inline").fancybox({
'scrolling' : 'no',
'onComplete' : function() {
$('#popup iframe').contents().find('#code').val(code);
$('#popup iframe').contents().find('#caption').val(caption);
},
'titleShow' : false
});
$(".trigger").click(function() {
$('#popup img.bigpic').attr('src',$(this).data('href') || $(this).attr('src'));
$('#popup iframe').attr("src", "form.php"); // on next call this was not set
code = $(this).data('code');
caption = $(this).data('caption');
$('#inline').trigger('click');
});
});
</script>
HTML:
<div class='content_item' id='item_div' style=' width:222px;height:210px' >
<img src='imagini/".$code.".jpg' id='".$code."' alt='cocarde' style='width:218px;height:163px' class='trigger' data-caption='".$description[$code]."' data-code='".$code."' data-href='imagini/".$code.".jpg'><br>
<div style='padding-top:5px'><span class='cod'>".$cod_produs."</span><span class='cod_pret'>".$code."</span></div>
<span class='pricestyle'><strong>".$pret." ".$price." ".$currency."</span></strong>
<div>
谢谢!