FC Instagram
Quickly build an effective for your project with this template.
# Demo
# Installation
-
Download:
-
NAS:
\\192.168.0.2\71_Develop\template_insta\src() -
GIT:
https://gitlab.com/fc-share/template-instagram/-/releases() -
Structure of Source Code:
instagram/
└── shared/
├── css/
│ └── instagram.css
└── js/
└── FCInstagram.jsIssues
Template FC Instagram new version require update or used file shared/js/base.js & shared/js/jquery.rss.js in the latest. If you're in the old version, you can also update yourself using the tutorial below.
* Note: Color Red: Delete - Color Green: Add
- shared/js/base.js
- shared/js/jquery.rss.js
-function define(name, value) { // Line 1
+function fc_define(name, value) { // New
-function defined(name) { // Line 11
+function fc_defined(name) { // New
-define("FCBase", {}); // Line 16
+fc_define("FCBase", {}); // New-if (!defined("FCBase")) define("FCBase"); // Line 1
+if (!fc_defined("FCBase")) fc_define("FCBase"); // New# Basic usage
-
Quick start:
- Import CSS Link
- Copy CSS Style
-
For example:
You will need to include the CSS, Javascript and HTML files
you
downloaded in your page.
<!-- BEGIN - FC Instagram - Script -->
<script src="instagram/shared/js/FCInstagram.js"></script>
<script>
jQuery.fn.FCInstagram.accessData = {
accessToken: "", // Token
};
$('#instafeed').FCInstagram({
max: 9, // A number between 1 and 25 of photos to show. Default: 9
autoplay: true, // Set autoplay video: true/false. Default: false
complete: function () { // A callback function to execute after the display of the photos.
console.log('completed');
}
});
</script>
<!-- END - FC Instagram - Script -->You can Import CSS Link or Copy CSS Style
<!-- BEGIN - FC Instagram - Style -->
<link href="instagram/shared/css/instagram.css" rel="stylesheet" />
<!-- END - FC Instagram - Style -->/* *
* FC Instagram - Development FCV Team
* Website: https://foodconnection.vn
* Since: 2019-11
* Version: v2.0.0
* */
/* BEGIN - MEDIUM */
.instagram-gallery-medium {
width: 480px;
cursor: pointer;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
}
.instagram-gallery-medium > a {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
margin: 5px;
}
.instagram-gallery-medium > a > video{
width: 100%;
height: 100%;
object-fit: cover;
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
.instagram-gallery-medium {
width: 320px;
}
.instagram-gallery-medium > a {
width: 100px;
height: 100px;
margin: 2px;
}
}
/* END - MEDIUM */<!-- BEGIN - Show Instagram -->
<div id="instafeed" class="instagram-gallery-medium"></div>
<!-- END - Show Instagram --><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="shared/css/common.css"> <link rel="stylesheet" href="shared/css/hamburger.css"> <link rel="stylesheet" href="shared/css/shared.css"> <link rel="stylesheet" href="shared/css/slick.min.css"> <link rel="stylesheet" href="shared/css/index.css"><link href="instagram/shared/css/instagram.css" rel="stylesheet" /></head> <body><!-- BEGIN - Show Instagram --> <div id="instafeed" class="instagram-gallery-medium"></div> <!-- END - Show Instagram --><script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" src="shared/js/base.js"></script> <script type="text/javascript" src="shared/js/clipboard.min.js"></script> <script type="text/javascript" src="shared/js/common.js"></script><!-- BEGIN - FC Instagram - Script --> <script src="instagram/shared/js/FCInstagram.js"></script> <script> jQuery.fn.FCInstagram.accessData = { accessToken: "", // Token }; $('#instafeed').FCInstagram({ max: 9, autoplay: true, complete: function () { console.log('completed'); } }); </script> <!-- END - FC Instagram - Script --></body> </html>
# Settings
| # | Required | Default | Type | Description |
|---|---|---|---|---|
| accessToken | Yes | null |
String | This is your Instagram Application AccessToken. |
| max | No | 9 |
Number | A number between 1 and 25 of photos to show. |
| autoplay | No | false |
Boolean | Video Autoplay On / Off with setup true/false. |
| complete | No | null |
Function | A callback function to execute after the display of the photos. |