javascript - 生成动态画廊jquery

Question

我正在处理一个个人项目，但我在使用 jQuery 生成正确的标记时遇到了麻烦。

我有一个操作可以返回要在此 json 结构中显示的图像列表

[{
    "Id": imageid,
    "imagePath": path to image,
    "imageThumbnailPath": path of the thumbnail,
    "imageTitle": image title,
    "imageSubtitle": image subtitle,
    "CategoryId": id of the category
}]

所以我想动态生成标记以显示不同的图像。我正在使用引导模板，这就是我必须生成的内容:

<div class="span3">
    <div class="picture">
        <a href="path to image" rel="image" title="image title">
            <img src="path to thumbnail" alt="" class="customgalleryclass"  />
        <div class="image-overlay-zoom"></div>
        </a>
    </div>
    <div class="item-description">
        <h5><a href="#">image title</a></h5>
        <p>image subtitle</p>
    </div>
</div>

我正在尝试使用 jQuery append、wrapInner 等生成正确的标记。但由于我不太了解它，所以它产生了困惑。

谢谢!

Answer 1

您不会共享导致困惑的代码。

如果您只是不知道该怎么做，请搜索“jquery template json”。这将是一个好的开始。你可以找到数百种方法来做到这一点。

快速示例我将使用 jquery 和 http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

感谢http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html

您可以在 http://jsfiddle.net/marathonman/EkVvS/ 找到工作示例

HTML

    <div id="myGallery"></div>

模板

    <script id="myGalleryTemplate" type="text/x-jquery-tmpl">
    <div class="span3">
        <div class="picture">
            <a href="${imagePath}" rel="image" title="${imageTitle}">
                <img src="${imageThumbnailPath}" alt="" class="customgalleryclass"  />
            <div class="image-overlay-zoom"></div>
            </a>
        </div>
        <div class="item-description">
            <h5><a href="#">${imageTitle}</a></h5>
            <p>${imageSubtitle}</p>
        </div>
    </div>
    </script>

脚本

    var images = [
    {
        "Id": "imageid",
        "imagePath": "path to image",
        "imageThumbnailPath": "path of the thumbnail",
        "imageTitle": "image title",
        "imageSubtitle": "image subtitle",
        "CategoryId": "id of the category"
    }
    ];

    $( "#myGalleryTemplate" ).tmpl(images).appendTo( "#myGallery" );