Okay, so I'm trying to create a "Order Posts by Type" using jQuery JSON to get the data... All the post types works in Chrome, Safari, FF. But in IE, video / audio posts will not display (perhaps something to do with the embedding?) when I filter through the posts using JSON.
Does anyone have a clue what's going on?! Here's the code:
<script>
$('#order_by ul li').find('a').click(function() {
var postType = this.className;
var count = 0;
byCategory(postType);
return false;
function byCategory(postType, callback) {
$.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) {
var article = [];
$.each(data.posts, function(i, item) {
// i = index
// item = data for a particular post
switch(item.type) {
case 'photo':
article[i] = '<div class="post_wrap"><div class="photo"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/0yplawef6/link_photo.png" /></a><a href="'
+ item.url
+ '"><img src="'
+ item['photo-url-1280']
+ '"alt="image" /></a></div></div>';
count = 1;
break;
case 'video':
article[i] = '<div class="post_wrap"><div class="video"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/FWAlawenw/link_video.png" /></a><span><br />'
+ item['video-player']
+ '</span><div class="video_desc">'
+ item['video-caption']
+ '</div></div></div>';
count = 1;
console.log(article[i]);
break;
case 'audio':
article[i] = '<div class="post_wrap"><div class="audio"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/e8Zlawemi/link_audio.png" /></a><h2 class="heading"><a href="'
+ item.url + '">'
+ item['id3-artist']
+' - '
+ item['id3-title']
+ '</a></h2><div class="player"><br />'
+ item['audio-player']
+ '<p>' + item['id3-artist'] + ' - ' + item['id3-title'] + '</p>'
+ '<p>' + item['audio-plays'] + ' plays</p>'
+ '</div><div class="audio_desc">'
+ item['audio-caption']
+ '</div><div class="clear"></div></div></div>';
count = 1;
break;
case 'regular':
article[i] = '<div class="post_wrap"><div class="regular"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/LH3laweb7/link_text.png" /></a><h2 class="heading"><a href="'
+ item.url
+ '">' + item['regular-title']
+ '</a><div class="description_container">'
+ item['regular-body']
+ '</div></div></div>';
count = 1;
break;
case 'quote':
article[i] = '<div class="post_wrap"><div class="quote"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/1Lwlaweh7/link_quote.png" /></a><blockquote>'
+ item['quote-text']
+ '</blockquote><cite>- '
+ item['quote-source']
+ '</cite></div></div>';
count = 1;
break;
case 'conversation':
article[i] = '<div class="post_wrap"><div class="chat"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/NZ9lawekt/link_chat.png" /></a><h2 class="heading"><a href="'
+ item.url
+ '">' + item['conversation-title']
+ '</a></h2></div></div>';
count = 1;
break;
case 'link':
article[i] = '<div class="post_wrap"><div class="link"><a href="'
+ item.url
+ '" title="View Full Post" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/G1zlaweir/link_link.png" /></a><h2 class="heading"><a href="'
+ item['link-url']
+ '">' + item['link-text']
+ '</a></h2></div></div>';
count = 1;
break;
default:
alert('No Entries Found.');
};
}) // end each
if (!(count == 0)) {
$('#main_content')
.fadeOut('fast')
.html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying '
+ postType
+ ' Posts Only</h2></div></div>'
+ '<div class="post_wrap"'
+ article.join('')
+ '</div>'
).fadeIn('fast')
$('div.video').each(function() {
var video_container_height = $(this).innerHeight();
video_container_height = (video_container_height - 60)
$(this).children('div.video_desc').css(
{'position': 'absolute',
'top': '40px',
'right': '20px',
'width': '380px',
'height': video_container_height}
).jScrollPane({
verticalGutter: 25
});
});
$('div.audio div.audio_desc').each(function() {
var container_width = $('div.audio').outerWidth(true);
var player_width = $('div.audio div.player').outerWidth(true);
var audio_desc_width = (container_width - player_width);
$(this).css(
{'position': 'absolute',
'top': '75px',
'right': '20px',
'height': '125px',
'width': (audio_desc_width - 50 /*The size of the left and right margin*/)})
.jScrollPane({
verticalGutter: 25
});
});
} else {
$('#main_content')
.fadeOut('fast')
.html('<div class="post_wrap"><div class="regular"><h2 class="heading">Whoops! There are no '
+ postType
+ ' Posts To Display</h2></div></div>'
).fadeIn('fast')
} // end IF
}); // end getJSON
}; // end byCategory
}); // end click
</script>
To check out the live version, head on over to http://minimus.tumblr.com
I think you problem is caused by a tiny error at line 1690:
$('#main_content')
.fadeOut('fast')
.html('<div class="post_wrap"><div class="regular"><h2 class="heading">Displaying '
+ postType
+ ' Posts Only</h2></div></div>'
+ '<div class="post_wrap"' // line 1690: you are missing a '>'
+ article.join('')
+ '</div>'
).fadeIn('fast')
Related
I have a page in which I have to show list of data in UI through ajax & append the list data in html table save that list data into Local Storage with Jquery, My question is that I want to implement lazy load in UI such that user clicks a button (Click to view more list), and after clicking the button the ajax calls another list with limit & offset to show more list & append the new list below the existing list in UI and also save the data into local storage along with the existing data present.
My Ajax Call for List Data
var sendingData = {
limit: "50000",
offset: "0"
};
$.ajax({
type: 'POST',
url: "/Common/Item/getselleritems?SellerId=" + userid,
data: sendingData ,
crossDomain: true,
success: function (data)
{
localStorage.setItem("productCode", JSON.stringify(data));
},
error()
{
//Do something
}
});
``
My Html design Function
function showProducts()
{
var productsStorage = localStorage.getItem("productCode");
var products = JSON.parse(productsStorage);
var trHTML = '';
$("table tbody").html("");
$.each(products.Data, function (key, value)
{
trHTML += '<tr>'
+ '<td class="d-md-flex align-items-center">' + '<figure style="' + imgStyle + '"><a href="" title="Photo title" data-effect="mfp-zoom-in">' +
'<img src="' + imgSrc + '" alt="thumb" class="lazy"></a></figure>' +
'<div class="flex-md-column">' +
'<h4 class="package_name" id="itemdescription_' + value.Id + '" onclick = "packageDetails(\'' + value.Price + '\',\'' + value.Name + '\',\'' + value.Description
+ '\',\'' + itemTimeSlotType + '\',\'' + value.ServiceName + '\',\'' + value.PreparationTime + '\',\'' + value.Quantity + '\')" >' +
'<i class="icon_box-selected" style="' + style + '; margin-right:3px"></i>' +
value.Name + '</h4>' +
'<p>' + value.Description + '</p>' +
'<em>' + "Available In: " + itemTimeSlotType + '</em>' + '<br>' +
'<span class="stars_sellerItem" style="' + starStyle + '">' + value.FoodtestAvgRating + ' <i class="icon_star"> </i> ' +
'</span>' +
'</div>' +
'</td>' + '<td style="padding: 0.75rem 0 0.75rem 0;">' +
'<strong id="itemprice_' + value.Id + '">' +
'<i class="fa fa-inr" aria-hidden="true"></i>' + value.Price +
'</strong>' +
'</td>' +
'<td class="options">' +
'<div class="dropdown dropdown-options">' +
'<i class="icon_plus_alt2"></i>' +
'<div class="numbers-row number" id="item2_' + value.Id + '" data-id="' + value.Id + '">' +
'<input type="text" value="1" class="form-control" name="quantity" id="itemvalue_' + value.Id + '" onchange="getval(' + itemId + ');" readonly>' +
'<div class="inc button_inc plus">' + '+' + '</div><div class="dec button_inc minus">' + '-' + '</div>' + '</div>' +
'</td>' + '</tr>';
}
$("table tbody").append(trHTML);
}
I have a problem with my code. I am pushing items into a new array and displaying two of them in a DIV. For some reason its showing the same item twice rather than showing two separate items. Hoping someone can help me out with this. I just need a way to prevent the same recipe from being able to show twice in the DIV.
var categoryItems = [];
var recipeTitle = $('#recipeTitle').text();
$.each(recipe_data, function(i, item){
if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); }
});
var similarRecipe = '';
var randomRecipe = {};
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit: Please take a look at this fiddle for an example. It should not show the same recipe twice when refreshing, rather show two different recipes from the category. My problem is that is is sometimes it is showing the same one twice when you refresh. https://jsfiddle.net/wn4fmm5r/
you are generating one random Recipe and displaying same twice into your for loop
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
try including your statement for generating random recipe inside loop.
for(var i = 0; i < categoryItems.length; i += 2) {
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit for no repeating ----
var counter;
for (var i = 0; i < categoryItems.length; i += 2) {
var item = Math.floor(Math.random() * categoryItems.length);
if (!counter) {
counter = item;
} else {
if (counter == item) {
item = Math.floor(Math.random() * categoryItems.length);
counter = item;
}
}
randomRecipe = categoryItems[item];
similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>'];
$('#recipeSimilar').append(similarRecipe);
}
I have a gallery loading images from an API then showing them with the lightgallery plugin.
After calling the lightbox in the correct location (see question here) I noticed the plugin is creating three slides for each photo.
There are 20 photos but it creates 60 slides.
Any thoughts on this? Anyone else run into something similar?
** Edit: Here is a CodePen with the page, error happing there: http://codepen.io/nathan-anderson/pen/GqXbvK
JS:
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"'+ 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>' + '</div>' + '</a>';
});
// Putitng into HTML
$('#photoBox').html(photoData);
//--------//
// Calling Lightbox
//--------//
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
} // End Displayphotos function
// Show popular photos on pageload
$.getJSON(unsplashAPI, popularPhotos, displayPhotos);
HTML:
<div class="content" id="photoBox"></div>
The issue was solved by separating the sections of code I wanted to generate within the function.
Here is the updated function code:
function displayPhotos(data) {
var photoData = '';
var photoInfo = '';
$.each(data, function(i, photo) {
photoData += '<a class="tile"' + 'data-sub-html="#' + photo.id + '"' + 'data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">';
photoInfo += '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' (aka:' + '<a target="_blank" href="' + photo.links.html + '">' + photo.user.username + ')</a>' + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes.' + ' You can download this photo if you wish, it has a free <a target="_blank" href="https://unsplash.com/license"> Do whatever you want </a> license. <a target="_blank" href="' + photo.links.download + '"><i class="fa fa-download" aria-hidden="true"></i> </a> </p>';
});
// Putitng into HTML
photoData += '</a>';
photoInfo += '</div>';
$('#photoBox').html(photoData + photoInfo);
I have a gallery setup with the lightbox plugin lightGallery
The gallery works perfect with static HTML. The problem arises when I dynamically grab API data and try to have the lightbox working on those items.
I can't seem to get another lightbox to both work with this function and load an HTML block from the page correctly (load the one that's been dynamically generated). This app does the correct HTML grabs, if I can get the conflict resolved.
Any initial thoughts? Anyone else run into anything similar?
JS:
//----------------------------------------------------------------//
//---------------// Calling Lightgallery //---------------//
//----------------------------------------------------------------//
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
// ----------------------------------------------------------------//
// ---------------// Unsplash Photos //---------------//
// ----------------------------------------------------------------//
// Filter Difference based on button click
$('button').click(function () {
$('button').removeClass("active");
$(this).addClass("active");
var unsplashAPI = "#URL";
var order = $(this).text();
var sortOptions = {
order_by: order,
format: "json"
};
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile" data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' aka: ' + photo.user.username + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes' + '</p>' + '</div>' + '</a>';
});
$('#photoBox').html(photoData);
}
$.getJSON(unsplashAPI, sortOptions, displayPhotos);
}); // End button
HTML:
<div class="content" id="photoBox"></div>
-- Thanks
Call the plugin after the data is appended to the page
function displayPhotos(data) {
var photoData = '';
$.each(data, function (i, photo) {
photoData += '<a class="tile" data-src="' + photo.urls.regular + '">' + '<img alt class="photo" src="' + photo.urls.regular + '">' + '<div class="caption-box" id="' + photo.id + '">' + '<h1 class="photo-title">' + 'Photo By: ' + photo.user.name + '</h1>' + '<p class="photo-description"> Description: Awesome photo by ' + photo.user.name + ' aka: ' + photo.user.username + ' So far this photo has ' + '<span>' + photo.likes + '</span>' + ' Likes' + '</p>' + '</div>' + '</a>';
});
$('#photoBox').html(photoData);
$('#photoBox').lightGallery({
selector: '.tile',
download: false,
counter: false,
zoom: false,
thumbnail: false,
mode: 'lg-fade'
});
}
I have issues when trying to display a YouTube file using the fancybox iframe. It displays a small frame with a scroller. I have attached a link to the code. I am using the YouTube API to extract the content.
https://jsfiddle.net/Le98zx1s/
jQuery displaying to html
function getOutput (item)
{
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
var output = '<li>' +
'<div class = "list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class ="list-right">' +
'<h3><a class="fancybox fancybox.iframe"' + 'href="http://youtube.com/embed/' + videoId + '">' + title + '</a></h3>' +
'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description+'</p>' +
'</div>' +
'</li>' +
'<div class ="clearfix"></div>' + ' ';
return output;
}