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

Question

favorite I am currently working on a photography portfolio and I am using the Freewall dynamic grid layout for showing the photos. http://vnjs.net/www/project/freewall/

Specifically using this plugin: http://vnjs.net/www/project/freewall/example/flex-grid.html

This grid is great, but I really want to add a lightbox so that the user can click on each photo and look closer and also use the arrow keys to look at the other photos.

This is the script I am using for the grid:

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

Upon some few trials and errors I found the answer;

This is what I added to the script:

 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();
        });