JSFiddle - React, Tailwind, and code Playground
by Keith Jeter
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="http://galnova.com/2015/js/instafeed.min.js"></script>
<script src="http://galnova.com/2015/js/g15.js"></script>
<div id="menulink">
CLICK ME
</div>
CSS
#menulink {
display: block;
width: 50%;
height: 50px;
background: green;
color: #fff;
}
JavaScript
$('#menulink').click(function () {
alert('test');
return false;
});
var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 200 ) { return false; }
var date = new Date(parseInt(this.created_time) * 1000);
// template
$(
'<div class="col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col grip">' +
//'<img class="pp" title="" src="' + this.user.profile_picture + '" />' +
//'<div class="coat">' + this.user.username + '</div>' +
'<a title="' + this.caption.text + '" class="fancybox zero lass" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.standard_resolution.url + '" />' +
'</a>' +
'<div class="col coat2 truncate">' + this.caption.text + '</div>' +
'<div class="row nill">' +
'<span class="col-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
'<span class="col-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
'</div>' +
'<div class="row nill">' +
'<span class="col-sm-12 check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
'</div>' +
'<a href="' + this.link + '" target="_blank"><button class="col-12 btn btn-secondary">View in <span class="fab fa-instagram"><\/span></button></a>' +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
$(".grip").hover(function(e){
"use strict";
...