jQuery InstagramFeed 使用教程

jQuery InstagramFeed 使用教程

jquery.instagramFeedInstagram Feed without access token. Not using the Instagram API项目地址:https://gitcode.com/gh_mirrors/jq/jquery.instagramFeed

1. 项目的目录结构及介绍

jquery.instagramFeed/
├── LICENSE
├── README.md
├── CONTRIBUTING.md
├── examples/
│   ├── basic.html
│   ├── custom-styling.html
│   ├── custom-template.html
│   ├── multiple-feeds.html
│   ├── no-jquery.html
│   └── with-callback.html
├── jquery.instagramFeed.js
└── jquery.instagramFeed.min.js

• LICENSE: 项目的许可证文件。
• README.md: 项目的基本介绍和使用说明。
• CONTRIBUTING.md: 贡献指南。
• examples/: 包含多个示例文件，展示如何使用该插件。
• jquery.instagramFeed.js: 插件的源代码文件。
• jquery.instagramFeed.min.js: 插件的压缩版本。

2. 项目的启动文件介绍

项目的启动文件是 jquery.instagramFeed.js 或 jquery.instagramFeed.min.js。这两个文件是插件的核心代码，提供了加载和显示 Instagram 动态的功能。

使用方法

在你的 HTML 文件中引入 jQuery 和 jquery.instagramFeed.min.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.instagramFeed.min.js"></script>

然后，你可以使用以下代码来加载 Instagram 动态：

(function($){
    $(window).on('load', function(){
        $.instagramFeed({
            'username': 'turismoestadosp',
            'container': "#instafeed",
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'margin': 1
        });
    });
})(jQuery);

3. 项目的配置文件介绍

项目的配置文件主要是 jquery.instagramFeed.js 或 jquery.instagramFeed.min.js 中的配置选项。以下是一些常用的配置选项：

• username: Instagram 用户名。
• container: 用于显示 Instagram 动态的容器选择器。
• display_profile: 是否显示用户资料。
• display_biography: 是否显示用户传记。
• display_gallery: 是否显示图片画廊。
• callback: 加载完成后的回调函数。
• styling: 是否应用默认样式。
• items: 显示的图片数量。
• margin: 图片之间的间距。

通过调整这些配置选项，你可以自定义 Instagram 动态的显示效果。

示例配置

$.instagramFeed({
    'username': 'turismoestadosp',
    'container': "#instafeed",
    'display_profile': false,
    'display_biography': false,
    'display_gallery': true,
    'callback': null,
    'styling': true,
    'items': 8,
    'margin': 1
});

通过以上配置，你可以在指定的容器中显示指定用户的 Instagram 动态。

jquery.instagramFeedInstagram Feed without access token. Not using the Instagram API项目地址:https://gitcode.com/gh_mirrors/jq/jquery.instagramFeed