如何使用jquery在特定div中的此脚本中显示图像

时间:2014-12-11 21:36:16

标签: jquery jquery-plugins fullpage.js

我正在使用JQInstapics从Instagram获取Feed(http://projects.craftedpixelz.co.uk/jqinstapics/)。

我想更改结果图片的显示方式。我使用fullpage.js(https://github.com/alvarotrigo/fullPage.js)并想使用滑块分别显示每张图片。为了在幻灯片中显示图片,图片必须以<div>显示class="slide" (<div class="slide"><img></div>)

所以我对jQuery还不是很好(所以)因此我很难找到显示图片的方式来实现它的工作。我喜欢各种方式,但没有一个工作,我总是得到一排照片。

以下是整个JQInstapics脚本:Ive标记了我认为可行的更改。

    (function ($) {
        $.fn.jqinstapics = function (options) {

            // Defaults
            var defaults = {
                "user_id": null,
                "access_token": null,
                "count": 10
            };                      

            var o = $.extend(defaults, options);

            return this.each(function () {

              // Vars
              var elem = $(this),

                url = "https://api.instagram.com/v1/users/" + o.user_id + "/media/recent?access_token=" + o.access_token + "&count=" + o.count + "&callback=?";

                // Get the images   
                $.getJSON(url, function(data){
                    $.each(data.data, function (i, val) {

// created the div var to try and give the image the div container it needs to be a slide. wanted to append it as the first elemet to the elem var that creates the display.

                        var div = $("<div class='slide'>").appendTo(elem),
                            li = $("<li/>").appendTo(div),
                            a = $("<a/>", {"href": val.link, "target": "_blank"}).appendTo(li),

       // added the </div> to try and close out the slide div.

                            img = $("<img/></div>", {"src": val.images.thumbnail.url}).appendTo(a);


                        if (val.caption){
                            a.attr("title", val.caption.text);
                        }
                    });
                });

                if(o.user_id == null || o.access_token == null){
                  elem.append("<li>Please specify a User ID and Access Token, as outlined in the docs.</li>");
                }

            });
        };
    })(jQuery);

0 个答案:

没有答案