div中的花式盒子

Question

好的，所以我创建了一个div来将我的图像保存在页面上并保持有序。但是，我也想让它们与fancybox一起使用，我很难做到。是否可以使用这样的代码实现fancybox？

HTML：

<div id="photos">
    <div class="crop"><img src="assets/images/media page/2012-07-15_14-36-27_769.jpg"></div>
    <div class="crop"><img src="assets/images/media page/cutting tires.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.53.59.jpg"></div>
    <div class="crop"><img src="assets/images/media page/1399354_615998295125688_829511954_o.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.59.46.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.43.13.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.42.20.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.42.10.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.22.56.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2012-08-23_15-25-24_401 - Copy.jpg </div>
    <div class="crop"><img src="assets/images/media page/2012-08-23_15-23-19_513 - Copy.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-11-09 12.44.44.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-11-09 11.36.49.jpg"></div>
    <div class="crop"><img src="assets/images/media page/2013-10-08 17.49.06.jpg"></div>
</div>

CSS：

#photos {
    height: auto;
    width: auto;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 100px;
}

.crop {
    overflow:hidden;
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 10px 10px 10px 10px;
}

.crop img {
    width: auto;
    height: auto;
    max-height: 300px;
    max-width: 300px;
    margin: 0 0;
}