I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \
Related
I am searching using algolia search. Everything works but instead of the search result to displaying in columns it's only showing in a list format
This is the display in normal html code
but when algolia search result is used to populate the container using the code below this is what it shows
I have this html file
<div class="row isotope-grid" id="hits" >
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
this is the JS format
var search = instantsearch({
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: `
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="images/product-03.jpg" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
Only Check Trouser
</a>
<span class="stext-105 cl3">
$25.50
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
`
,
}
})
);
search.start();
I have been able to rule out the css and discovered that ALgolia is overriding the display. How do I modify the code to show a custom display of columns instead of the default Algolia list display?
after implementing Dipen Shah's answer, it partially worked and produced to wierd overlap upon rendering but the overlapp disappears if the window is width or height is decreased and return back to full size.
here is what the overlap looks like
Your code is missing very crucial function call which is why your search result is not being rendered properly.
Remove isotope-grid class from div#hits
<!-- Load more -->
<div class="row" id="hits">
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
Initialize hits div with isotope grid after search result is render.
search.on('render', function(){
$grid = $("#hits");
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
After this changes, search result will be rendered correctly.
Explanation:
In the original theme file, on page load event script calls following call to initialize grids.
$(window).on('load', function () {
var $grid = $topeContainer.each(function () {
$(this).isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
});
When algolia widget renders search result, your template sets correct css classes but you still need to initialize isotope grid for your search result container. My code does exactly that by intercepting render event of the widget.
Problem
I don't think you're using the correct method for a template.
The docs for Aloglia gives this example:
Javascript:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
Solution
This means you need something like this: (replacing the placeholders accordingly)
Javascript:
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: document.getElementById('hit-template').innerHTML,
}
})
);
search.start();
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{image}}" alt="{{name}}">
Quick View
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
${{product_name}}
<span class="stext-105 cl3">${{price}}</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</script>
API :
"data": [
{
"accrediationsId": 1,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548558/in/photostream/\" title=\"1\">
<img src=\"https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg\" width=\"266\" height=\"79\" alt=\"1\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
{
"accrediationsId": 2,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548508/in/photostream/\" title=\"2\">
<img src=\"https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg\" width=\"266\" height=\"79\" alt=\"2\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
HTML CODE :
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
{{Affiliation.imageURL}}
</div>
Need to show Images from flikr in html page by using angular js. Is that possible to get image path directly from flikr api and show in ng-repeat.
Use image element with ng-src
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
<img ng-src="{{Affiliation.imageURL}}">
</div>
DEMO
var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.getAffiliationData = [
{
"accrediationsId": 1,
"imageURL": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg"
},
{
"accrediationsId": 2,
"imageURL": "https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="Affiliation in
getAffiliationData" ng-click="setClickedRow(user)">
<img ng-src="{{Affiliation.imageURL}}">
</div>
</body>
Double braces are not used for binding html content, they are used for rendering text, to render html you can use this "ng-bind-html"
Try this:
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
<div ng-bind-html="Affiliation.imageURL"></div>
</div>
you will need to inject this module
here is the demo link
I have an object with array of data in {}, I want to print name attribute of all params.
The object is:
[
{
"name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Estafanie",
"value": 14000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Paul",
"value": 20000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}
]
I want to see in my html:
Chris, Estefanie, Paul
I try with:
{{# _.each(name, function(listname){ }}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
<h5>{{{ listname }}}</h5>
</div>
</div>
{{# }) }}
But not working ;/ I find in mustache documentation but I don't see nothing same.
Anybody can help me with this?.
Thanks
Your view doesn't look like a MustacheJS view. Amend it to look like the following. Substitute "ObjectLiteralName" for the name of your object literal variable name.
Using {{#}}{{/}} in a Mustache view denotes that you wish to loop over an object.
See MustacheJS. It contains all the information you need to get up and running with Mustache.
View
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
{{#ObjectLiteralName}}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
{{name}}
</div>
</div>
{{/ObjectLiteralName}}
</script>
Javascript
function renderTemplate() {
var $template = $('#template').html();
Mustache.parse($template); // optional, speeds up future uses
var rendered = Mustache.render($template, ObjectLiteralName);
$('#target').html(rendered);
}
Result
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Chris
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Estefanie
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Paul
</div>
</div>
I have made a small app using AngularJS 1.4, that outputs JSON data from a remote source.
Here is the JSON data in question.
Here is my view - the link to ngInfiniteScroll comes in at the top of the container:
<body ng-app="cn" ng-controller="MainCtrl as main">
<div id="header" class="container-fluid">
<p>Camper News</p>
</div>
<div class="container">
<div infinite-scroll="feed.loadMore()" infinite-scroll-distance="3">
<div ng-repeat="newsItem in myData" class="news-row col-sm-12 col-xs-12">
<div class="col-sm-2 col-xs-12">
<div id="img-container">
<img ng-src={{newsItem.author.picture}} id="user-avatar" />
</div>
</div>
<div class="news-text col-sm-10 col-xs-12">
<a href={{newsItem.link}}><em>{{newsItem.headline}}</em></a>
</div>
<div class="col-sm-10 col-xs-12" id="link-description">
{{newsItem.metaDescription}}
</div>
<div class="col-sm-12 col-xs-12" id="bottom-text">
<div class="col-sm-4 col-xs-12" id="author">
<a href='http://www.freecodecamp.com/{{newsItem.author.username}}'>{{newsItem.author.username}}</a>
</div>
<div class="col-sm-4 col-xs-12" id="likes">
<i class="fa fa-thumbs-o-up"></i> {{newsItem.upVotes.length}}
</div>
<div class="col-sm-4 col-xs-12" id="timestamp">
<span am-time-ago={{newsItem.timePosted}} | amFromUnix></span>
</div>
</div>
</div>
</div>
</div>
</body>
I am attempting to stagger the loading and outputting of the data using ngInfiniteScroll. I'm just not sure how it would work:
app.controller('MainCtrl', function($scope, Feed) {
$scope.feed = new Feed();
});
app.factory('Feed', function($http) {
var Feed = function() {
this.items = [];
this.after = '';
};
Feed.prototype.loadMore = function() {
var url = "http://www.freecodecamp.com/news/hot";
$http.get(url).success(function(data) {
var items = data;
// Insert code to append to the view, as the user scrolls
}.bind(this));
};
return Feed;
});
Here is a link to the program on Codepen. The code that relates to ngInfiniteScroll (controller and factory) is currently commented out in favour of a working version, but this of course loads all links at once.
What do I need to insert in my factory in order to make the JSON load gradually?
From what I can tell, by looking at FreeCodeCamps' story routes, there is no way to query for specific ranges of the "hot news" stories.
It looks to just return json with a fixed 100 story limit.
function hotJSON(req, res, next) {
var query = {
order: 'timePosted DESC',
limit: 1000
};
findStory(query).subscribe(
function(stories) {
var sliceVal = stories.length >= 100 ? 100 : stories.length;
var data = stories.sort(sortByRank).slice(0, sliceVal);
res.json(data);
},
next
);
}
You can use infinite scroll for the stories it does return to display the local data you retrieve from the request in chunks as you scroll.
I am trying to ng-include inside a ng-repeat. But nothing happens. If I include it statically with the whole link it works. Also tried ng-src but also not working.
index.html
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
sliderCtrl.js
MyApp.controller('sliderCtrl', function ($scope) {
$scope.slides = [
{image: '01', description: 'Image 00'},
{image: '02', description: 'Image 01'},
{image: '03', description: 'Image 02'}
];
});
console
Error: [$interpolate:noconcat] http://errors.angularjs.org/1.3.15/$interpolate/noconcat?p0='%2Fpartials%2Fslider%2F%7B%7Bslide.image%7D%7D.html'
at Error (native)
at http://192.168.33.77/bower_components/angular/angular.min.js:6:417
at g (http://192.168.33.77/bower_components/angular/angular.min.js:88:436)
at Oa (http://192.168.33.77/bower_components/angular/angular.min.js:68:208)
at X (http://192.168.33.77/bower_components/angular/angular.min.js:53:397)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:428)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:52:95)
at D (http://192.168.33.77/bower_components/angular/angular.min.js:49:467)
at fa (http://192.168.33.77/bower_components/angular/angular.min.js:61:43)
at S (http://192.168.33.77/bower_components/angular/angular.min.js:51:465) <div ng-view="" class="page ng-scope">
Thanks in advance!
Instead of:
<div ng-include src="'/partials/slider/{{slide.image}}.html'"></div>
Use this:
<div ng-include src="'/partials/slider/' + slide.image + '.html'"></div>
Try using data-ng-include data-src:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div data-ng-include data-src="'/partials/slider/{{slide.image}}.html'"></div>
</div>
</div>
You forgot to escape the inner quotes:
<div ng-controller="sliderCtrl">
<div ng-repeat="slide in slides">
<div ng-include src="\'/partials/slider/{{slide.image}}.html\'"></div>
</div>
</div>