1

我有一个纯 HTML 页面，上面有各种图像，单击每个图像都会打开一个带有共享按钮的灯箱。我曾计划使用 URL 中的 ID 来突出显示类似的图像，但似乎 facebook 和 twitter 删除了这些。

如果每个图像没有数百个单独的灯箱，我如何才能共享特定于当前正在查看的图像？

HTML 示例：

        <div class="tile" id="tile-01">
            <a href="#tile-01" data-name="Jo" data-title="Chartered Surveyor">
                <img src="media/img01.jpg" alt="Jo" />
                <p class="name">Jo - Chartered Surveyor</p>
            </a>
        </div>

<div class="overlay">
    <div id="lightbox">
        <div class="lightbox-content">

        </div>
        <a href="javascript:;" class="close"></a>
        <div class="details">
            <h2>Claire</h2>
            <span class="job-title"></span>
            <div class="social">
                <div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
                <a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
            </div>
        </div>
    </div>
</div>

Javascript：

    <script type="text/javascript">
    $(function(){
        var $container = $('#gallery');
        $container.imagesLoaded( function() {
            $container.masonry();
        });

        $('.tile a').click(function(){
            $('.overlay').fadeIn();
            $img = $(this).find('img').clone();
            $('.lightbox-content').html($img)
            $('#lightbox h2').text($(this).data('name'))
            $('#lightbox span.job-title').text($(this).data('title'))
            return true;
        })

        $('.overlay').click(function(){
            $(this).fadeOut();
        })
    })
</script>
4

0 回答 0