freewallフレックスグリッドレイアウト写真にライトボックス（photoswipe）を追加するには

Question

お気に入り 現在写真ポートフォリオに取り組んでいます。私は写真を表示するためにフリーウォールのダイナミックグリッドレイアウトを使用しています。 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(); 
     });