[英]How would i display images in HTML using jquery
我想显示存储在“appendReturnedImages(data)”函数中的图像。 但是我收到错误并且无法显示图像。 图像的格式应遵循我的 HTML。
HTML:
<div class="col-md-5 single-top">
<ul id="etalage">
<li>
<img class="etalage_thumb_image img-responsive" src="images/si1.jpg" alt="" >
<img class="etalage_source_image img-responsive" src="images/s2.jpg" alt="" >
</li>
<li>
<img class="etalage_thumb_image img-responsive" src="images/si2.jpg" alt="" >
</li>
<li>
<img class="etalage_thumb_image img-responsive" src="images/si3.jpg" alt="" >
</li>
</ul>
</div>
JavaScript
function appendReturnedImages(data) {
var $html = $();
$.each(data.images, function(index, element) {
$html = $html.add($("<img/>", {
height: 200,
//width: 200, // uncomment this if you need to set width as well
css: {
'max-width': 200
},
src: element
}));
$("#etalage").append($html);
});
}
设置高度和宽度的 Javascript 部分
$('#etalage').etalage({
thumb_image_width: 300,
thumb_image_height: 400,
source_image_width: 900,
source_image_height: 1200,
show_hint: true,
click_callback: function(image_anchor, instance_id){
//alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
您可以尝试创建一个li
元素并将图像附加到它,然后将li
元素附加到您的ul
。
function appendReturnedImages(data) {
var $html = $();
$.each(data.images, function(index, element) {
$html = $html.add($("<img/>", {
height: 200,
//width: 200, // uncomment this if you need to set width as well
css: {
'max-width': 200
},
src: element
}));
$("#etalage").append($('<li/>').append($html));
});
}
编辑
我添加了一个编辑来为每个图像添加li
元素
function appendReturnedImages(data) {
var $html = $();
$.each(data.images, function(index, element) {
$html = $html.add($("<img/>", {
height: 200,
//width: 200, // uncomment this if you need to set width as well
css: {
'max-width': 200
},
src: element
}));
var $li = $('<li/>');
$li.append($html[index]);
$("#etalage").append($li);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.