Question

喜爱我目前正在研究摄影作品集，我正在使用Freewall动态网格布局来展示照片。 http://vnjs.net/www/project/freewall/

特别使用此插件：http://vnjs.net/www/project/freewall/example/flex-grid.html

这个网格很棒，但我真的想添加一个灯箱，以便用户可以点击每张照片并仔细观察，并使用箭头键查看其他照片。

这是我用于网格的脚本：

var temp = "<div class='brick' style='width:{width}px;'><img src='../i/photos/{index}.jpg' width='100%'></div>";
    var w = 1, h = 1, html = '', limitItem = 8, html1='';
    for (var i = 0; i < limitItem; ++i) {
        w = 1 + 3 * 0.255;
        html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);

        }

    $("#freewall").html(html);

    var wall = new Freewall("#freewall");
    wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 150,
        cellH: 'auto',
        onResize: function() {
            wall.fitWidth();
        }
    });

    var images = wall.container.find('.brick');
    images.find('img').load(function() {
        wall.fitWidth();
    });

Answer 1

经过一些试验和错误，我找到了答案;

这是我添加到脚本中的内容：

 var temp = "<div class='brick' style='width:{width}px;'><img src='../i/photos/{index}.jpg' class='example-image' width='100%'/></div>";

  var w = 1, h = 1, html = '',limitItem = 8;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * 0.255;
            html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);

            }

        $("#freewall").html(html);

        /************** CODE ADDDED ***********************/
        for(var i = 0; i < 8; i++){
             $(".example-image").eq(i).wrap("<a href='../i/photos/"+(i+1)+".jpg' data-lightbox='images'></a>");
                console.log($(".example-image").eq(i));
        }
        /***************************************************/



        var wall = new Freewall("#freewall");
        wall.reset({
            selector: '.brick',
            animate: true,
            cellW: 150,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
            }
        });

        var images = wall.container.find('.brick');
        images.find('img').load(function() {
            wall.fitWidth();
        });

如何将灯箱（photoswipe）添加到freewall flex网格布局照片

1 个答案: