Question

我正在使用instafeed.js从Instagram帐户中提取三张最新图片的网站部分。我正确地加载了图像，但我需要一些关于如何根据需要设置这些图像样式的建议。从instafeed生成的html不为imga提供类，否则我不会寻求帮助。下面是我需要它的截图，以及它目前的情况。还有源文件的HTML，以及从instafeed生成的内容。任何帮助都会非常棒！

默认情况下如何加载图片（当前如何）：

我需要它：

源文件HTML（instafeed查找id为＆＃34的div; instafeed＆＃34;将图像加载到其中）：

<div class="col2">
  <div class="insta-box">

    <div id="instafeed"></div>

  </div>

  <div class="acell">
    <div class="contentbox">
      <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img class="yt-bg" src="<?php bloginfo('stylesheet_directory'); ?>/images/youtube-img.jpg" alt="Youtube" /><span><img class="play" src="<?php bloginfo('stylesheet_directory'); ?>/images/play-img.png"></img>Press Play!</span></a>
    </div>
  </div>
</div>

生成的内容：

Answer 1

您可以通过Instafeed对象访问模板中每张照片的ID。见documentation for templating here

<script type="text/javascript">

var feed = new Instafeed({
    // your options, 
    template: '<a class="{{id}}" href="{{link}}"><img src="{{image}}" /></a>'
});
feed.run();

</script>

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("img:not(:first)").attr({
            "width" : "110",
            "height" : "120"
        });
        $("img:first").attr({
            "width" : "300",
            "height" : "275"
        });

});
</script>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}
.instafeed{
max-width:480px;
max-height:300px;
border: 1px solid;
}

</style>
</head>
<body>
<div class="instafeed">
<div class="img">
 <a  href=""><img src="" ></a>

</div>
<div class="img">
 <a  href=""><img src="" ></a>

</div>
<div class="img">
 <a href=""><img src="" ></a>

</div>

</div>

</body>
</html>

使用instafeed.js解决图像样式问题

2 个答案: