使用共享按钮创建弹出图像

Question

我想用facebook和twitter分享按钮制作弹出图片库，但我不知道如何制作它。

有没有人有参考教程？

提前致谢，

问候：）

Answer 1

请查看本教程。它灵活且易于使用http://fancyapps.com/fancybox/

Answer 2

这是我的内联脚本：

<script> 
            $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                beforeShow: function () {
                    if (this.title) {
                    // New line
                    this.title += '<br />';

                    this.title += '<p> Vote : 0 </p>'

                    // Add vote button
                    this.title += '<button class="btn-oi custom-vote"><span>Vote</span></button> ';

                    // Add share fb button
                    this.title += '<button class="btn-oi custom-fb icon-fb"><span>Share</span></button>';

                    // Add share tweet button
                    this.title += '<button class="btn-oi custom-twit icon-twit"><span>Share</span></button>';


                    }
                },
                helpers : {
                    title : {
                        type: 'inside'
                    }
                }  
            });

</script>

这是我的HTML：

<div id="member-gallery" class="col-xs-12 col-md-7">
   <div class="title-template gallery-left"> Member Gallery </div>

   <div class="row">

       <div class="col-xs-12 col-md-4 item gallery">
        <a title="Ramanda Chairina" class="fancybox" href="img/logo-1.jpg">
        <img src="img/logo-1.jpg" alt=""/> <!-- size original w: 320px h: 260px -->
        </a>
       </div>

    </div>
  </div>
</div>