Forked from John Clarke's Pen Instagram Header.
A Pen by Jonathan Clarke on CodePen.
<div class="header"> | |
<table class="instagram-header"> | |
<tr> | |
<td class="instagram-image image-1 image-2"></td> | |
<td class="instagram-image image-3"></td> | |
<td class="instagram-image image-4 image-5"></td> | |
<td class="instagram-image image-6 image-7"></td> | |
<td class="instagram-image image-8"></td> | |
<td class="instagram-image image-9 image-10"></td> | |
</tr> | |
</table> | |
</div> | |
<script src="http://code.jquery.com/jquery.js"></script> |
Forked from John Clarke's Pen Instagram Header.
A Pen by Jonathan Clarke on CodePen.
var images = undefined; | |
jQuery(document).ready(function($){ | |
var url = "https://api.instagram.com/v1/users/1160292/media/recent"; | |
$.ajax({ | |
url: url, | |
data: {access_token: "4436356.1fb234f.f2c29a59d1a74989bc8fce8d6eac8e4b"}, | |
dataType: 'jsonp', | |
type: 'GET', | |
success: function(data) { | |
images = data; | |
// Get 10 random images | |
var arr = [] | |
while(arr.length < 10){ | |
var randomnumber=Math.floor((Math.random()*19)); | |
var found=false; | |
for(var i=0;i<arr.length;i++){ | |
if(arr[i]==randomnumber){found=true;break} | |
} | |
if(!found)arr[arr.length]=randomnumber; | |
} | |
window.current_images = arr; | |
arr.forEach(function(i, count){ | |
element = data.data[i]; | |
var _e = $('<img />', {src: element.images.standard_resolution.url, id: 'image-'+(count+1), alt: element.caption.text}).appendTo('.image-' + (count + 1)); | |
if( count == 2 || count == 7 ) { | |
// _e.attr({height: '300'}); | |
} else { | |
_e./*attr({height: '150'}).*/after('<br />') | |
} | |
_e.wrap( $('<a />', {href: element.link, title: element.caption.text, target: '_blank'}) ); | |
}); | |
setInterval('replace_image()', 3500); | |
} | |
}); | |
}); | |
function replace_image() { | |
var count = Math.floor((Math.random()*9)+1), | |
index = -1 | |
while(index == -1){ | |
var randomnumber=Math.floor((Math.random()*19)), | |
found=false; | |
window.current_images.forEach(function(i){ | |
if(i == randomnumber){found=true;} | |
}) | |
if(!found)index=randomnumber; | |
} | |
// Remove old image and add new image | |
window.current_images.splice(count - 1, 1) | |
window.current_images.splice(count - 1, 0, index) | |
element = images.data[index]; | |
var image = $('.instagram-image #image-' + (count + 1)), | |
new_image = image.clone().attr({src: element.images.standard_resolution.url, style: 'display: none', id: 'image-'+(count+1)+'-replacement', alt: element.caption.text}); | |
image.stop().fadeOut('slow', function(){ | |
if( count == 0 || count == 3 || count == 5 || count == 8 ) { | |
new_image.prependTo( image.parent() ) | |
image.parent().parent().find('br').remove(); | |
new_image.after('<br />'); | |
} else if( count == 1 || count == 4 || count == 6 || count == 9 ) { | |
new_image.appendTo( image.parent() ) | |
image.parent().parent().find('br').remove(); | |
new_image.before('<br />'); | |
} else { | |
new_image.appendTo( image.parent() ) | |
} | |
image.unwrap('a').remove(); | |
new_image.fadeIn('medium'); | |
new_image.attr('id', 'image-'+(count+1)).fadeIn('medium'); | |
new_image.wrap( $('<a />', {href: element.link, title: element.caption.text, target: '_blank'}) ) | |
}); | |
} |
.instagram-header { | |
width: 800px; | |
} | |
.instagram-image.image-1, .instagram-image.image-2, | |
.instagram-image.image-4, .instagram-image.image-5, | |
.instagram-image.image-6, .instagram-image.image-7, | |
.instagram-image.image-9, .instagram-image.image-10 { | |
/*width: 15%;*/ | |
} | |
.instagram-image.image-1 img, .instagram-image.image-2 img, | |
.instagram-image.image-4 img, .instagram-image.image-5 img, | |
.instagram-image.image-6 img, .instagram-image.image-7 img, | |
.instagram-image.image-9 img, .instagram-image.image-10 img { | |
max-width: 150px; | |
} | |
.instagram-image.image-3 img, .instagram-image.image-8 img { | |
max-width: 300px; | |
} | |
.instagram-image.image-3, .instagram-image.image-8 { | |
/*width: 20%;*/ | |
} | |
.instagram-image { | |
max-height: 300px; | |
min-height: 300px; | |
} |