javascript - How would i display images in HTML using jquery -
i want show images stored in "appendreturnedimages(data)" function. gets error , cannot display images. format of images should follow 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 if need set width css: { 'max-width': 200 }, src: element })); $("#etalage").append($html); }); } javascript part sets height , width
$('#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 image anchor: "'+image_anchor+'"\n(in etalage instance: "'+instance_id+'")'); } });
can try creating li element , append images , append li element ul.
function appendreturnedimages(data) { var $html = $(); $.each(data.images, function(index, element) { $html = $html.add($("<img/>", { height: 200, //width: 200, // uncomment if need set width css: { 'max-width': 200 }, src: element })); $("#etalage").append($('<li/>').append($html)); }); } edit
i have added edit adding li elements each image
function appendreturnedimages(data) { var $html = $(); $.each(data.images, function(index, element) { $html = $html.add($("<img/>", { height: 200, //width: 200, // uncomment if need set width css: { 'max-width': 200 }, src: element })); var $li = $('<li/>'); $li.append($html[index]); $("#etalage").append($li); }); }
Comments
Post a Comment