I am trying to fetch programs by search of query (name of show) through the Gracenote API.
For reference:
http://developer.tmsapi.com/io-docs (v1.1/programs/search)
Using the example (to fetch movies) listed on their website, it works fine.
http://developer.tmsapi.com/Sample_Code
<html>
<head>
<style type="text/css">
.tile {
display: inline-block;
border: 2px;
padding: 4px;
text-align: left;
font-size: 15px;
width:250px;
font-family: Avenir;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// construct the url with parameter values
var apikey = "xxxxx";
var baseUrl = "http://data.tmsapi.com/v1.1";
var showtimesUrl = baseUrl + '/movies/showings';
var zipCode = "78701";
var d = new Date();
var today = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: { startDate: today,
zip: zipCode,
jsonp: "dataHandler",
api_key: apikey
},
dataType: "jsonp",
});
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.length + ' movies showing within 5 miles of ' + zipCode+'</h2>');
$.each(data, function(index, movie) {
var movieData = '<div class="tile"><img src="http://fanc.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><br/>';
movieData += 'Title:' + movie.title + '<br>';
movieData += 'ID: ' + movie.tmsId + '<br>';
if (movie.ratings) {movieData += 'Rating: ' + movie.ratings[0].code;}
else {movieData += 'Rating: ' + 'N/A';}
$(document.body).append(movieData);
});
}
</script>
</head>
<body>
</body>
</html>
When I am trying to modify it (to fetch programs), I fail to retrieve any data, all returned as undefined.
<html>
<head>
<style type="text/css">
.tile {
display: inline-block;
border: 2px;
padding: 4px;
text-align: left;
font-size: 15px;
width:250px;
font-family: Avenir;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// construct the url with parameter values
var apikey = "xxxxx";
var baseUrl = "http://data.tmsapi.com/v1.1";
var showtimesUrl = baseUrl + '/programs/search';
var zipCode = "78701";
var showName = 'Friends';
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: { q: showName,
jsonp: "dataHandler",
api_key: apikey
},
dataType: "jsonp",
});
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.length + ' movies showing within 5 miles of ' + zipCode+'</h2>');
var programs = data.hits;
$.each(data, function(index, program) {
var programData = '<div class="tile">' + program.entityType + '<br/>';
programData += 'Title:' + program.title + '<br>';
programData += 'ID: ' + program.tmsId + '<br>';
$(document.body).append(programData);
});
}
</script>
</head>
<body>
</body>
</html>
Actual result: (Response Status: 200)
undefined
Title: undefined
ID: undefined
Expected result: (Response Status: 200)
Show
Title: Friends
ID: SH001151270000
I was able to sort it out by looking at the array.
For the Movies sample code provided by the website the array returned a property path as [""0""].entityType but for Program it is returned as hits[""0""].program.entityType.
So I replaced data with data.hits and program.entityType with program.program.entityType etc.
function dataHandler(data) {
$(document.body).append('<h2>Found ' + data.hits.length + ' shows.</h2>');
$.each(data.hits, function(index, program) {
var programData = '<div class="tile">' + program.program.entityType + '<br/>';
programData += 'Title:' + program.program.title + '<br>';
programData += 'ID: ' + program.program.tmsId + '<br>';
$(document.body).append(programData);
});
}
Related
I’m working with SharePoint and I’m able to load content from a library and display it on a webpage as a link, using REST API. I figured out a way to arrange the content in the order the documents are uploaded into the folder by the “Created Date”, displaying the last uploaded item on top. However, I feel there is a more efficient way of performing this action. The script I hacked together seem to work on occasion. Sometimes it will appear to be out of the sequence but when I refresh the browser it will return it in the items in the desire sequence. Below is the code I’m using to accomplish this task. If there is a better way of accomplishing this action will greatly be appreciated.
<ul id="column1">
<h2 id="newsletter"><img style="width: 40px; position: relative; right: 5px; top: 7px;" src="../SiteAssets/SitePages/Test Page/icons/DCSA_Portal_Newsletter.svg" alt="logo">Newsletter<img id="arrow1" src="../SiteAssets/SitePages/Test Page/icons/arrow.png" alt="logo"></h2>
<ol></ol>
</ul>
getFilesFromFolder("/sites/dcsa/ep/epMainFiles/News/Newsletter").done(function(data) {
$.each(data.d.results, function(i, item) {
var spDate = new Date(item.TimeCreated.split('T')[0]) //example: '2015-10-30T05:00:00Z'
var newTillDate = new Date();
spDate.setDate(spDate.getDate() + 5);
if (spDate <= newTillDate) {
$("#column1 ol").append('<li class="linkData newsletter" style="padding-left: 10px; padding-right: 10px;" data-date="' + item.TimeCreated.split('T')[0] + '">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</li>');
} else {
$("#column1 ol").append('<li class="linkData newsletter" style="padding-left: 10px; padding-right: 10px;" data-date="' + item.TimeCreated.split('T')[0] + '"><img class="newArrow" style="width: 60px; position: relative; right: 5px; top: 0px;"src="../SiteAssets/SitePages/Test Page/icons/arrow-with_new2.gif" alt="logo">' + item.Name.replace(/\.[^/.]+$/, "") + " - " + '<span style="color: red;">' + item.TimeCreated.split('T')[0] + '</span>' + '</li>');
}
col1_chgOrder();
});
});
function col1_chgOrder() {
var container = $("#column1 ol");
var items = $("#column1 ol .linkData");
items.each(function() {
// Convert the string in 'data-event-date' attribute to a more
// standardized date format
var BCDate = $(this).attr("data-date");
/*console.log(BCDate);
var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];*/
var standartDate = new Date(BCDate).getTime();
$(this).attr("data-event-date", standartDate);
//console.log(standartDate);
});
items.sort(function(a, b) {
a = parseFloat($(a).attr("data-event-date"));
b = parseFloat($(b).attr("data-event-date"));
return a < b ? -1 : a > b ? 1 : 0;
}).each(function() {
container.prepend(this);
});
}
function getFilesFromFolder(serverRelativeUrlToFolder) {
return $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetFolderByServerRelativeUrl('" + serverRelativeUrlToFolder + "')/files",
method: "GET",
async: false,
headers: {
"Accept": "application/json; odata=verbose"
}
});
}
you could include orderby filter in your API endpoint url rather than doing sorting after response is received.
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetFolderByServerRelativeUrl('" + serverRelativeUrlToFolder + "')/files?&$orderby=Created desc
i.e. you don't need to use col1_chgOrder() function as API will return files already sorted due to this parameter
Use Jsom to get files by caml query with order.
<script type="text/javascript">
$(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveFiles, "sp.js");
})
function retrieveFiles() {
var ctx = SP.ClientContext.get_current();
var docLib = ctx.get_web().get_lists().getByTitle("MyDoc");
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
"<View Scope='RecursiveAll'><Query><OrderBy><FieldRef Name=\"Created\" Ascending=\"False\"/></OrderBy></Query></View>");
camlQuery.set_folderServerRelativeUrl("/MyDoc/FolderA");
var Files = docLib.getItems(camlQuery);
ctx.load(Files);
ctx.executeQueryAsync(Function.createDelegate(this, function () {
var listItemEnumerator = Files.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
alert(oListItem.get_id());
}
}), Function.createDelegate(this, function () {
alert('error');
}));
}
</script>
I have a problem sorting the users based on their karma. Can you guys please help? (site: here) I want to sort the div elements of the users according to totalKarma. Also is there a good method for refreshing the data in the background so it doesn't have to load the whole page (like the user icons).
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];
var users = ['sloth_on_meth','filiptronicek','cigarkovic','gallowboob','tooshiftyforyou','actually_crazy_irl','haxpress'];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
leaderboard.innerHTML +=
"<div class='usr' id='" +
userName +
"'><br><br><img src='" +
userIcon +
"'><br><a href='" +
userUrl +
"'> u/" +
userName +
'</a><br>' +
totalKarma.toLocaleString() +
' karma';
usersloaded.push(user);
userskarma.push(totalKarma);
usersIcon.push(userIcon);
// console.log(user);
// console.log(usersIcon);
userskarma.sort(function(a, b) {
return a - b;
});
// console.log(userskarma);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
// console.log('completed loading ' + user);
});
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="leaderboard">
</div>
</body>
You could do something like this. Create an array usersloaded with user objects with userName, userIcon, userUrl etc properties. Then, it'll be easier for you sort the objects based on the totalKarma property and create the HTML as you're doing before.
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
users = [
'sloth_on_meth',
'filiptronicek',
'cigarkovic',
'gallowboob',
'tooshiftyforyou',
'actually_crazy_irl',
'haxpress'
];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
usersloaded.push({
user,
userName,
userIcon,
userUrl,
totalKarma
});
loadData(usersloaded);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
//console.log('completed loading ' + user);
});
}
function loadData(usersloaded) {
leaderboard.innerHTML = ''
usersloaded.sort((a, b) => a.totalKarma - b.totalKarma)
.forEach(u => {
leaderboard.innerHTML +=
"<div class='usr' id='" +
u.userName +
"'><br><br><img src='" +
u.userIcon +
"'><br><a href='" +
u.userUrl +
"'> u/" +
u.userName +
'</a><br>' +
u.totalKarma.toLocaleString() +
' karma';
})
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="leaderboard">
</div>
Your code is not attempting to rearrange the divs, it's just appending to the body as the requests come back. At a high level, you need to create an array of objects, sort them and print them after they have been sorted.
Note that I have made minimal changes to your code to get it working, but you would benefit from a code review
var leaderboard = document.getElementById('leaderboard');
var commentKarma;
var postKarma;
var userName;
var userIcon;
var userUrl;
var usersloaded = [];
var userskarma = [];
var usersIcon = [];
users = [
'sloth_on_meth',
'filiptronicek',
'cigarkovic',
'gallowboob',
'tooshiftyforyou',
'actually_crazy_irl',
'haxpress'
];
var userObjs = [];
function updateStats() {
leaderboard.innerHTML = '';
users.forEach(mainfunc);
}
updateStats();
function mainfunc(user) {
$.getJSON('https://www.reddit.com/user/' + user + '/about.json', function(data) {
commentKarma = data.data.comment_karma;
postKarma = data.data.link_karma;
totalKarma = commentKarma + postKarma;
userName = user;
userIcon = data.data.icon_img;
userUrl = 'https://reddit.com/u/' + userName;
userObjs.push({
commentKarma,
postKarma,
totalKarma,
userName,
userIcon,
userUrl
});
if (userObjs.length == users.length) {
userObjs.sort((a, b) => a.totalKarma - b.totalKarma);
leaderboard.innerHTML = userObjs.map(user => {
return "<div class='usr' id='" +
user.userName +
"'><br><br><img src='" +
user.userIcon +
"'><br><a href='" +
user.userUrl +
"'> u/" +
user.userName +
'</a><br>' +
user.totalKarma.toLocaleString() +
' karma';
}).join("");
}
leaderboard.innerHTML +=
"<div class='usr' id='" +
userName +
"'><br><br><img src='" +
userIcon +
"'><br><a href='" +
userUrl +
"'> u/" +
userName +
'</a><br>' +
totalKarma.toLocaleString() +
' karma';
usersloaded.push(user);
userskarma.push(totalKarma);
usersIcon.push(userIcon);
console.log(user);
console.log(usersIcon);
userskarma.sort(function(a, b) {
return a - b;
});
console.log(userskarma);
//setTimeout(function(){ updateStats(); }, 10000);
})
.done(function() {
return;
})
.fail(function() {
console.log('error loading ' + user);
})
.always(function() {
console.log('completed loading ' + user);
});
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
body {
background: black;
color: white;
font-family: Roboto;
font-weight: bold;
text-transform: uppercase;
font-size: 2vh;
}
.usr {
width: 150px;
height: 35px;
padding: 4.5em;
padding-bottom: 250px;
}
#leaderboard {
width: 95%;
height: 35px;
padding: 0.5em;
}
#leaderboard>div {
float: left;
}
img {
border-radius: 10px;
}
a {
text-decoration: none;
color: #ff4500;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Reddit karma</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="leaderboard">
</div>
</body>
</html>
I use RSS to get posts from my WordPress website and in its name have date in title and I want to remove the date from its title and use date from rss instead
The Result I want (image) I want to remove date on title (red cross) and use rss date(green underline) instead
The problem is date format in title is not international format
Any idea to make jQuery to detect this date formula and replace(remove) it?
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
<script type="text/javascript" src="http://www.sd.ac.th/main/wp-content/rss_fetch/FeedEk.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://www.sd.ac.th/main/?feed=rss2&cat=121',
//FeedUrl: 'http://www.sd.ac.th/main/?feed=rss2&cat=234',
MaxCount: 10,
ShowPubDate: true,
ShowDesc: false
});
/*setInterval(function(){
$('.itemTitle a').each(function() {
var text = $(this).text();
$(this).text(text
.replace('[', '')
.replace(']', '')
.replace('59', '')
.replace('60', '')
);
});}
, 1);*/
});
function reloadFunction() {
location.reload();
}
</script>
<button onclick="reloadFunction()">R</button>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://www.sd.ac.th/main/wp-content/rss_fetch/rss_style.css">
<div id="divRss"></div>
FeedEk.js (Plugin that I use for fetching my feed)
/*
* FeedEk jQuery RSS/ATOM Feed Plugin v3.0 with YQL API
* http://jquery-plugins.net/FeedEk/FeedEk.html https://github.com/enginkizil/FeedEk
* Author : Engin KIZIL http://www.enginkizil.com
*/
(function ($) {
$.fn.FeedEk = function (opt) {
var def = $.extend({
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 0,
TitleLinkTarget: "_blank",
DateFormat: "",
DateFormatLang:"en"
}, opt);
var id = $(this).attr("id"), i, s = "", dt;
$("#" + id).empty();
if (def.FeedUrl == undefined) return;
$("#" + id).append('<img src="loader.gif" />');
var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + def.FeedUrl + '" LIMIT ' + def.MaxCount;
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
dataType: "json",
success: function (data) {
$("#" + id).empty();
if (!(data.query.results.rss instanceof Array)) {
data.query.results.rss = [data.query.results.rss];
}
$.each(data.query.results.rss, function (e, itm) {
s += '<li><div class="itemTitle"><a href="' + itm.channel.item.link + '" target="' + def.TitleLinkTarget + '" >' + itm.channel.item.title + '</a></div>';
if (def.ShowPubDate){
dt = new Date(itm.channel.item.pubDate);
s += '<div class="itemDate">';
if ($.trim(def.DateFormat).length > 0) {
try {
moment.lang(def.DateFormatLang);
s += moment(dt).format(def.DateFormat);
}
catch (e){s += dt.toLocaleDateString();}
}
else {
s += dt.toLocaleDateString();
}
s += '</div>';
}
if (def.ShowDesc) {
s += '<div class="itemContent">';
if (def.DescCharacterLimit > 0 && itm.channel.item.description.length > def.DescCharacterLimit) {
s += itm.channel.item.description.substring(0, def.DescCharacterLimit) + '...';
}
else {
s += itm.channel.item.description;
}
s += '</div>';
}
});
$("#" + id).append('<ul class="feedEkList">' + s + '</ul>');
}
});
};
})(jQuery);
If it is always and the only thing between brackets ([ and ]) and it's always at the end of the string then use this:
text = text.replace(/(\[.*\])$/, replacementDateString);
Read about Regular Expression.
In this coding I showed progress bar on the text box. but i need loading indicator in span tag when searching for something. I added two images to better understand about it. please answer me the question.
this is flat progress in text box:
but i need the progress on span
CSS:
<style type="text/css">
.loader
{
background: url(resources/images/loader.gif);
background-repeat: no-repeat;
background-position: right;
}
</style>
JS:
try {
console.log('connections url ' , urlHolder.getconnectedusersByName);
$("#auto-complete-tag").autocomplete({
source: function(request, respond) {
$("#auto-complete-tag").addClass('loader');
var givenUserName = $("#auto-complete-tag").val();
$.post(urlHolder.getconnectedusersByName, {
userId : signedUserId,
username : givenUserName
}, function(response) {
$('#auto-complete-tag').removeClass('loader');
if(!response){
respond([]);
length = 0;
}
this.connectionsList = new Array();
for (var counter = 0; counter < response.users.length; counter++) {
var getConnectedUsers = new Object();
getConnectedUsers = {
value : response.users[counter].name,
//profileId : "onclick=return false",
image : response.users[counter].defaultImageFileName,
id:response.users[counter].id
}
this.connectionsList.push(getConnectedUsers);
}
respond (this.connectionsList);
});
},
delay: 0 ,
search: function (e, u) {
},
select : function(event, ui) {
return false;
},
response: function(event, ui) {
length = ui.content.length;
console.log('length',length );
if(length === 0) {
var noResult = {label:"No results found for you" };
ui.content.push(noResult);
}
},
}) .data('ui-autocomplete')._renderItem = function(ul, item) {
if(length !== 0){
return $('<li>')
.data( "ui-autocomplete-item", item)
.append(
'<a style="background-color: #E0F0EF; color:#0d78a3; margin-bottom: 3px; margin-top: 3px; margin-left: 3px; margin-right: 3px; font-weight: bold;">' +
'<span style="color:#86BBC9; font-weight: normal;">' +
item.label + '</span>' + '<br>'+'<span>Text message</span>'+
'<button style="margin-bottom:14px; margin-right:5px;" class=\"yellow-btn apply-btn\" id=\"apply-user-' + item.id + '\" onclick=\"openDFAChatWithUser(\'' + item.id + '\')\">Chat</button>'
+ '<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>'
)
.appendTo(ul);}else{
return $('<li>')
.data( "ui-autocomplete-item", item)
.append('<a>' +
'<span class="ui-autocomplete-user">' +
item.label + '</span>' +
'<span class="ui-autocomplete-divider"></span>' +
'<span class="ui-autocomplete-icon pull-right"></span>' +
'</a>')
.appendTo(ul);
}
};
//console.log(' this.connectionsList >>> ', this.connectionsList);
} catch (e) {
console.log('getAllConnections error >>> ', e);
}
I want to get all of the image from my Tumblr blog, (no limit)
even if I change the limit to the large number, by default it became 20 images, I just want to know what is wrong on my codes that I created, please help.. thanks in advance
please check the fiddle above to check the result.
here's my code on jsFiddle
$(document).ready(function(){
var tumblrUrl = 'http://api.tumblr.com/v2/blog/';
var blogUrl = 'blog.campbrandgoods.com';
var apiType = '/posts';
var apiKey = 'VtZPFbyp0dLYfOespTdo6oJyOE0nZx4anBSa46j9OoJO4SBIjg';
var limit = 995;
var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=' + limit;
var tileContainer = $('ul#tiles');
$.ajax({
url: postUrl,
type: 'get',
dataType: 'jsonp',
complete: function(){
},
success: function( strData ){
console.log(strData.response.posts);
var posts = strData.response.posts;
$.each(posts, function (i, v) {
if(typeof v.photos !== 'undefined') {
var n = Math.floor(Math.random() * 6);
var info = $($.parseHTML(v.caption)).text();
tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>');
//tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>');
}
});
tileContainer.gridalicious({selector: '.item', gutter: 5, animate: true});
$('ul#tiles').on('click', 'li.item', function (e) {
var href = $(this).find('.tile-info-container').find('a').attr('href');
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
window.open(href);
//$(this).find('.tile-info-container').find('a').trigger('click');
});
$('ul#tiles').on('click', 'li.item a', function (e) {
e.preventDefault();
});
/*
$("a.fancybox").fancybox({
'type': 'image',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'autoScale' : false,
'autoSize' : false,
overlayOpacity: 0.7,
overlayColor: '#000',
onStart :function () {
$('#fancybox-inner').css('width', '97%');
$('#fancybox-inner').css('height', '97%');
},
onComplete: function(){
$('#fancybox-inner').css('width', '97%');
$('#fancybox-inner').css('height', '97%');
}
});
*/
$('.tile-img-container').on('click', function (e) {
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
e.preventDefault();
});
}
});
});
#tiles li.item .tile-info-container {
background-color: rgba(0,0,0,0.7);
cursor: pointer;
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
font-size: 11px;
}
<div class="container-fluid">
<div id="page" class="row">
<div class="col-md-12 details">
<ul id="tiles">
</ul>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
On the Tumblr api docs, it is clearly stated that for the request /posts, you're only allowed to have a limit that goes from 1 to 20.
The approach I'd take would be a recursive function that takes an offset argument. (from the following I've removed some code that wasn't working / was commented out)
function GetImages(offset) {
var postUrl = tumblrUrl + blogUrl + apiType + '?api_key=' + apiKey + '&limit=20&offset=' + offset;
$.ajax({
url: postUrl,
type: 'get',
dataType: 'jsonp',
complete: function(){
},
success: function( strData ){
console.log(strData.response.posts);
var posts = strData.response.posts;
$.each(posts, function (i, v) {
if(typeof v.photos !== 'undefined') {
var n = Math.floor(Math.random() * 6);
var info = $($.parseHTML(v.caption)).text();
tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a class="various fancybox" href="' + v.post_url + '">' + info + '</a></div></li>');
//tileContainer.append('<li class="item"><div class="tile-img-container"><img src="' + v.photos[0].alt_sizes[2].url + '"></div><div class="tile-info-container"><a title="' + info + '" class="various fancybox" href="' + v.photos[0].original_size.url + '">' + info + '</a></div></li>');
}
});
$('ul#tiles').on('click', 'li.item', function (e) {
var href = $(this).find('.tile-info-container').find('a').attr('href');
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
window.open(href);
//$(this).find('.tile-info-container').find('a').trigger('click');
});
$('ul#tiles').on('click', 'li.item a', function (e) {
e.preventDefault();
});
$('.tile-img-container').on('click', function (e) {
$(this).parents('.item').find('.tile-info-container').find('a').trigger('click');
e.preventDefault();
});
// actual changed part
if (typeof offset === "undefined") {
offset = 0;
}
// (to avoid having to load a hundred pages for each time it was tested, there was also this in the if: `offset < 100 &&`)
if (((offset + 20) < strData.response.total_posts)) {
GetImages(offset + 20);
}
}
});
}
GetImages(0);