当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Image layout freewall with lightbox

问题描述:

I'm creating an online portfolio that will show off my work with a responsive mixed height/width gallery. I've discovered freewall and it works amazingly, but I'm not particularly well-grounded with Javascript and I can't figure out how to make it so that I can apply the lightbox jquery to the images, seeing as how the images are called in through javascript. Is there a way to edit the freewall javascript so that I can use a lightbox js with it as well? I've seen this question. .But, it's the flex layout, and I'm using the image layout, which is this one. Here's the JavaScript code:

var temp = "<div class='cell' id='imagecell' style='width:{width}px; height: {height}px; background-image: url(assets/gallery/{index}.jpg)'></div>";

var w = 1,

html = '',

limitItem = 34;

for(var i = 0; i < limitItem; ++i) {

w = 200 + 200 * Math.random() << 0;

html += temp.replace(/\{height\}/g, 100).replace(/\{width\}/g, w).replace("{index}", i + 1);

}

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

var wall = new Freewall("#freewall");

wall.reset({

selector: '.cell',

animate: true,

cellW: 20,

cellH: 200,

onResize: function() {

wall.fitWidth();

}

});

wall.fitWidth();

// for scroll bar appear;

$(window).trigger("resize");

Also, if you know how to easily filter these images too, that would be very helpful.

分享给朋友:
您可能感兴趣的文章:
随机阅读: