带画廊的fancybox内联内容

时间:2012-10-13 12:03:29

标签: jquery fancybox gallery inline

我正在使用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>

谢谢!

0 个答案:

没有答案