繁体   English   中英

我将如何使用 jquery 在 HTML 中显示图像

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM