在prettyphoto灯箱中打开并显示图像

Question

我正在尝试使用prettyPhoto lib。当有人点击我视图上的图像时，可以打开漂亮照片灯箱并以一种很好的方式显示它。

我已经从Stephane Caron的github资源中添加了prettyPhoto.css和prettyPhoto.js文件。

我添加了他们的引用并完成了我的一些标记以及jquery代码。

<div class="item col-md-4 col-sm-4 col-xs-12 moments everyday others festivals isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/an eventful winter.jpg" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/an eventful winter.jpg" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>
        <div class="item col-md-4 col-sm-4 col-xs-12 moments everyday others nature isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/rebellion.png" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/rebellion.png" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>
        <div class="item col-md-4 col-sm-4 col-xs-12 moments others nature isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/Bulleh.jpg" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/Bulleh.jpg" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>
        <div class="item col-md-4 col-sm-4 col-xs-12 moments others travel everyday nature isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/with Love (2).jpg" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/with Love (2).jpg" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>
        <div class="item col-md-4 col-sm-4 col-xs-12 moments everyday animal others isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/Hannibal 4.jpg" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/Hannibal 4.jpg" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>
        <div class="item col-md-4 col-sm-4 col-xs-12 moments travel nature everyday isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); opacity: 1;">
            <a href="~/Resources/Images/ArtPreview/smplArt (2).jpg" class="vlightbox2" data-rel="" rel="prettyPhoto[Gallery1]">
                <img src="~/Resources/Images/ArtPreview/smplArt (2).jpg" alt="">
                <div class="caption">
                    <div class="info">
                        <h4></h4>
                        <div class="separator"></div>
                        <p></p>
                    </div>
                </div>
                <div class="vlb_zoom" style="position: absolute; display: none;"></div>
            </a>
        </div>


$(document).ready(function () {
    $("a[rel^='prettyPhoto[Gallery1]']").prettyPhoto({
    allow_resize: false, 
    allow_expand: false,
    show_title: true,
    animation_speed: 'normal',
    slideshow: 7000,
    theme: 'pp_default',
    modal: false
});

});

如果我点击照片，而不是打开prettyphoto灯箱，图片会在下一个标签中打开。