carroussel instagram
01/07/2021
0
Sera que comseguem me ajudar, estou querendo colocar no footer feed do instagram com efeito carousel infinito, porem estou com um pouco de dificuldade.
-----HTML-----
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="instacode">
<div id="instagram-feed1" class="instagram_feed"></div>
</div>
-----CSS-----
#instacode {margin: 50px auto 0; width: fit-content;}
.instagram_feed {
overflow: hidden;
}
.instagram_feed .instagram_new {
width: 250px;
float: left;
padding: 0 1px 1px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.instagram_feed img.insta-image {
position: absolute;
left: 0;
top: 0;
object-fit: cover;
width: 100%;
height: 100%;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.instagram_feed .insta-link {
position: relative;
display: block;
background: #232323;
padding-top: 100%;
}
.instagram_feed .insta-link:hover .insta-image {
opacity: 0.2;
}
----JS----
// jQuery Ajax for feed Instagram Graph API
if ( $(''''#instagram-feed1'''').length != 0 ) {
var token = ''''IGQVJVdXJzV09FMXN4OWtTX2padFQteG1RaGVsVXBfS0thNVdCSVNUSm40NzdvZA0ZABd1QwenMxNlZAaN1BmR3otWFNtSDVEUUxpbGN4WmhOZAjZARR3g1SzBFU3UtU1FPNEVXUUlqZAlM2bXBSLS0yYndPWgZDZD'''';
var fields = ''''id,media_type,media_url,thumbnail_url,timestamp,permalink,caption'''';
var limit = 6; // Set a number of display items
$.ajax ( {
url: ''''https://graph.instagram.com/me/media?fields=''''+ fields +''''&access_token=''''+ token +''''&limit=''''+ limit,
type: ''''GET'''',
success: function( response ) {
for( var x in response.data ) {
var link = response.data[x][''''permalink''''],
caption = response.data[x][''''caption''''],
image = response.data[x][''''media_url''''],
image_video = response.data[x][''''thumbnail_url''''],
html = '''''''';
if ( response.data[x][''''media_type''''] == ''''VIDEO'''' ) {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image_video + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
} else {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
}
$(''''#instagram-feed1'''').append(html);
}
},
error: function(data) {
var html = ''''<div class="class-no-data">No Images Found</div>'''';
$(''''#instagram-feed1'''').append(html);
}
});
}
-----HTML-----
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="instacode">
<div id="instagram-feed1" class="instagram_feed"></div>
</div>
-----CSS-----
#instacode {margin: 50px auto 0; width: fit-content;}
.instagram_feed {
overflow: hidden;
}
.instagram_feed .instagram_new {
width: 250px;
float: left;
padding: 0 1px 1px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.instagram_feed img.insta-image {
position: absolute;
left: 0;
top: 0;
object-fit: cover;
width: 100%;
height: 100%;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.instagram_feed .insta-link {
position: relative;
display: block;
background: #232323;
padding-top: 100%;
}
.instagram_feed .insta-link:hover .insta-image {
opacity: 0.2;
}
----JS----
// jQuery Ajax for feed Instagram Graph API
if ( $(''''#instagram-feed1'''').length != 0 ) {
var token = ''''IGQVJVdXJzV09FMXN4OWtTX2padFQteG1RaGVsVXBfS0thNVdCSVNUSm40NzdvZA0ZABd1QwenMxNlZAaN1BmR3otWFNtSDVEUUxpbGN4WmhOZAjZARR3g1SzBFU3UtU1FPNEVXUUlqZAlM2bXBSLS0yYndPWgZDZD'''';
var fields = ''''id,media_type,media_url,thumbnail_url,timestamp,permalink,caption'''';
var limit = 6; // Set a number of display items
$.ajax ( {
url: ''''https://graph.instagram.com/me/media?fields=''''+ fields +''''&access_token=''''+ token +''''&limit=''''+ limit,
type: ''''GET'''',
success: function( response ) {
for( var x in response.data ) {
var link = response.data[x][''''permalink''''],
caption = response.data[x][''''caption''''],
image = response.data[x][''''media_url''''],
image_video = response.data[x][''''thumbnail_url''''],
html = '''''''';
if ( response.data[x][''''media_type''''] == ''''VIDEO'''' ) {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image_video + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
} else {
html += ''''<div class="instagram_new">'''';
html += ''''<a class="insta-link" href="'''' + link + ''''" rel="noopener" target="_blank">'''';
html += ''''<img src="'''' + image + ''''" loading="lazy" alt="'''' + caption + ''''" class="insta-image" />'''';
html += ''''</a>'''';
html += ''''</div>'''';
}
$(''''#instagram-feed1'''').append(html);
}
},
error: function(data) {
var html = ''''<div class="class-no-data">No Images Found</div>'''';
$(''''#instagram-feed1'''').append(html);
}
});
}
Luiz Antonio
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)