I use html5lightbox to open images and pdf file in lightbox. Now I added angular.js and when click on a link, it takes me to enother page instead of opening it in a lightbox
var app = angular.module('MyApp', []);
var tiles =
[
{
class: "fileTile",
link: "images/9-credit-1.jpg",
header: "ToDo List",
content: "PDF File contains information about SAP sales and customers"
},
{
class: "videoTile",
link: "https://www.youtube.com/watch?v=Nfq3OC6B-CU",
header: "Fiori Tutorial",
content: "This Video contains information about SAP sales and customers"
},
{
class: "fileTile",
link: "images/canberra_hero_image_JiMVvYU.jpg",
header: "A Random Image",
content: "PDF File contains information about SAP sales and customers"
},
{
class: "fileTile",
link: "images/national-basketball-association-scoring-big-with-real-time-statistics-and-sap-hana.pdf?iframe=true",
header: "National Basketboal Team",
content: "PDF File contains information about SAP sales and customers"
}
];
app.controller("DisplayController", function($scope, $http){
$scope.tiles = tiles;
});
What can I do make html5lightbox working???
Use angular-bootstrap-lightbox.Simply awesome.
Here is the Working Plunker
html
<ul ng-controller="GalleryCtrl">
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
JS (controller)
angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
$scope.images = [
{
'url': '1.jpg',
'caption': 'Optional caption',
'thumbUrl': 'thumb1.jpg' // used only for this example
},
{
'url': '2.gif',
'thumbUrl': 'thumb2.jpg'
},
{
'url': '3.png',
'thumbUrl': 'thumb3.png'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
});
DEMO
Are you sure there is
data-lightbox
like identifier that means this link will be shown in lightbox..
If i remember truely you must give an attribute like this for lightbox like codes.
Or can you whare angular template/html that u are trying to use for.
Regards
Related
I'm trying to include button details which allows to go to page detail
$("#Grid").ejGrid({
dataSource: ej.DataManager({
...
columns: [
{ headerText: 'Detail', commands: ['type:"detail", buttonOptions:{text: "details", click:"OnClick"}} ],},
],
And then I defined my function:
function OnClick(id){
var url = '#Url.Action("Detail","ServicesOrder", new {id="__id__"})';
window.location.href=url.replace('__id__',id);
}
my controller ServicesOrder
public IActionResult Detail(int id)
{ServicesOrder ServicesOrder = _context.ServicesOrder.SingleOrDefault(x => x.ServicesOrderId.Equals(id));
if (ServicesOrder == null)
{
return NotFound();
}
return View(ServicesOrder);
}
the mistake I get
This site page is not found at:
https: // localhost: 44337 / ServicesOrder/Detail/[object% 20Object]
I have followed to the letter your code, but is not working (see image).
normally I would do this in a template with Syncfusion controls just works better and the tag-helpers just work.
//OPTION 1
//your original source
$("#Grid").ejGrid({
dataSource: ej.DataManager({
columns: [
{ headerText: 'Detail' template: "<a href='/ServicesOrder/Details/{{:OrderId}}'>Finiched</a>"},
{ headerText: 'Order #', field: 'OrderId'}]
});
//OPTION 2
//your original source + tweak
$("#Grid").ejGrid({
dataSource: ej.DataManager({
columns: [
{ headerText: 'Detail', template: true, templateId: "#detailsbutton"}]
});
<script type="text/x-jsrender" id="detailsbutton">
<a class="btn btn-primary" href="#Url.Action("Details", "ServicesOrder", new {id = {{:OrderId}})>Details</a>
</script>
As long as the OrderId exists in the query for the grid it will find that in the template and populate accordingly. Keep in mind Syncfusion uses JSX extensively under the covers (at least this version which is EJs1, EJs2 is a complete rewrite using pure Javascript). I
I really have to emphasize that using just javascript with asp.net core mvc works but adding in clean tag-helpers like:
<ejs-grid id="OrderGrid" dataSource=#ViewBag.somedata >
<e-datamanager></e-datamanager>
<e-grid-columns>
<e-grid-column field="Id" type="number"></e-grid-column>
</e-grid-columns>
</ejs-grid>
So much easier to deal with!
Here´s my code
<div class="container">
<!-- THE YOUTUBE PLAYER -->
<div class="vid-container">
<iframe id="vid_frame" ng-src="{{selectedVideo.url}}" frameborder="0" width="560" height="315"></iframe>
</div>
<!-- THE PLAYLIST -->
<div class="vid-list-container">
<div class="vid-list">
<div ng-repeat="video in youTubeVideos">
<div class="vid-item" ng-click="selectedVideo.url = video.url">
<div class="thumb"><img ng-src="//img.youtube.com/vi/{{video.img}}/0.jpg"></div>
<div class="desc">{{video.desc}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
$scope.youTubeVideos = [
{
url: '//youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1',
img: 'eg6kNoJmzkY',
desc: 'Jessica Hernandez & the Deltas - Dead Brains'
},
{
url: '//youtube.com/embed/_Tz7KROhuAw?autoplay=1&rel=0&showinfo=0&autohide=1',
img: '_Tz7KROhuAw',
desc: 'Barbatuques - CD Tum Pá - Sambalelê'
},
];
$scope.selectedVideo = {};
There is an error on Console:
Error: [$interpolate:interr] Can't interpolate: {{selectedVideo.url}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://youtube.com/embed/eg6kNoJmzkY
I can not solve this error and I also need to leave video # 1 available in vid-container
You resource request is being blocked by the $sceDelegateProvider in AngularJS.
The $sceDelegateProvider allows one to get/set the whitelists and
blacklists used to ensure that the URLs used for sourcing AngularJS
templates and other script-running URLs are safe
Add the URL to the $sceDelegateProvider whitelist and you should be able to grab the video
angular.module('myApp', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://youtube.com/embed/**'
]);
});
How can I change the selected video?
var app = angular.module('myApp', []);
app.controller('videoCntrl', ['$scope', '$http', function ($scope, $http) {
$scope.changeVideo = function (video) {
$scope.selectedVideo = $scope.videos[video];
}
$scope.videos = [{
url: '//youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1',
img: 'eg6kNoJmzkY',
desc: 'Jessica Hernandez & the Deltas - Dead Brains'
},
{
url: '//youtube.com/embed/_Tz7KROhuAw?autoplay=1&rel=0&showinfo=0&autohide=1',
img: '_Tz7KROhuAw',
desc: 'Barbatuques - CD Tum Pá - Sambalelê'
}];
}]);
Add the ng-click attribute to your desired trigger. Something like:
<div ng-click="changeVideo(1)"></div>
Finally, add the ng-controller attribute on the body tag.
<body ng-controller="videoCntrl">
I'm pretty new to using Backbone and Underscore..well Web Development in general.
I'd like to learn how to retrieve individual "model" data on-click from this template format to populate a pop-up modal. Any direction is much appreciated!
Currently, I have a list of projects that is rendered by passing my collection into this template and not using an individual view for each model item. I'm wondering how I can retrieve each project's data to populate a modal on-click.
I've tried getting the html data from e.currentTarget.html but I get undefined
<% _.each(collection, function(model){ %>
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="thumbnail">
<div class="caption">
<h3><a href= <%= model.url %>><%= model.caption %></a></h3>
</div>
<img class="img-responsive" src= <%= model.image %> alt=<%= model.alt %>/>
</div>
<h3 class="project-title text-center"><%= model.title %></h3>
</div><%});%>
I had thought about following the method used in the To-Do List example by Addy Osmani, but I am trying not to have to define a View for the collection of items and a View for the individual models. I can see how this method would be able to assign a click listener for the individual models and pass that model to the modalView render, but again, trying not to do it this way (if possible).
Here is an example of the data
{
"projects": [{
"title": "Portfolio Website",
"caption": "My Showcase",
"dates": " ",
"url": "https://google.ca",
"description": "Lorem Etc Etc",
"image": "picture.jpeg",
"alt": "Portfolio Image"
}, {
"title": "Online Resume",
"caption": "Learn About Me!",
"dates": " ",
"url": "resume.com",
"description": "Look at my resume",
"image": "resume.jpeg",
"alt": "Resume Image"
}, {
"title": "Project",
"caption": "Coming Soon",
"dates": " ",
"url": "",
"description": "Lorem I Don't know what comes after Lorem",
"image": "picture.jpeg",
"alt": "Image"
}]
}
This is the Collection and View I'm using
app.projectCollection = Backbone.Collection.extend({
model: app.projectDetails,
url: '/profile.json',
parse: function(attrs){
return attrs.projects;
}
});
var projects = new app.projectCollection();
projects.fetch();
// View
app.portfolioView = Backbone.View.extend({
el: '.portfolio-body',
projectTemplate: template('portfolio-template'),
initialize: function(options){
this.listenTo(this.collection, 'add', this.render);
},
events: {
'click .portfolio-item': 'showModal' // listen for click to show modal
},
showModal: function(e){
e.preventDefault();
modalView.render(); // render the modal
// console.log("clicked" + e.currentTarget.attr('caption'));
},
render: function(){ // projects render just fine
this.$el.html(this.projectTemplate({collection: this.collection.toJSON()})); // pass in collection data for template to iterate though projects
return this;
}
});
var portfolioView = new app.portfolioView({collection: projects}); // pass in JSON
// Modal View
app.modalView = Backbone.View.extend({
className: 'modal fade',
modalTemplate: template('modal-template'),
attributes: {
tabindex: '-1',
role: 'dialog'
},
render: function(){
this.$el.html(this.modalTemplate()).modal();
return this;
}
});
var modalView = new app.modalView();
Thanks for your time and help!
As I understand, you want to have a link to your model inside template. But we can only have html there. The solution will be to have some unique id for each model.
You can add id to all your models, put it in the template like this
<div class="col-md-4 col-sm-6 portfolio-item" data-id="<%= model.id %>">
get this id in event handler
var id = $(e.currentTarget).data('id');
and get model from collection by this id
var model = this.collection.get(id);
By the way, I highly recommend you to try Marionette, it is super nice view level extension for Backbone.
I want to create a master detail view with some nested JSON and am out of ideas. I know I am probably missing something simple here but I turn to you all for help.
This is a sample of the JSON. There are around 50 Items with the same number and letter pattern (e.g. 1a, 30d, etc).
{
"Items": [
{
"Name": "Item 1",
"Number: 1
"Subcategories": [
{
"Name": Sub Item 1",
"Letter: "A",
"Description": "A description about the item..."
}
"Name": Sub Item 2",
"Letter: "B",
"Description": "A description about the item..."
}
}
"Name": Sub Item 3"
"Letter: "C",
"Description": "A description about the item..."
}
}
}
I have successfully set up the master page with an accordion that lists all the items in the list that when clicked, displays all of the sub items but where I am getting confused is when I click on the sub menu item and am routed to the details page, I can only view the name parameter that is stored in $state.params. I want the details page to be able to display the description as well.
Here is the accordion list:
<div ng-repeat="item in items">
<ion-item class="item-stable"
ng-click="toggleGroup(item)"
ng-class="{active: isGroupShown(item)}">
<i class="icon" ng-class="isGroupShown(item) ? 'ion-minus' : 'ion-plus'"></i>
{{item.name}}
</ion-item>
<ion-item class="item-accordion"
ng-repeat="item_type in item.subcategories"
ng-show="isGroupShown(item)"
ng-click="onSelectItems(item_type)">
{{item_type.name}}
</ion-item>
</div>
Here is the relevant app.js .config:
.state('tab.item-listing', {
url:'/item-listing',
views: {
'tab-home': {
templateUrl: 'templates/item-listing.html',
controller: 'itemListingsCtrl'
}
}
})
.state('tab.itemDetail', {
url:'/:name',
views: {
'tab-home': {
templateUrl: 'templates/item-detail.html',
controller: 'itemListingDetailCtrl'
}
}
})
Here is the relevant function within the itemListingsCtrl controller:
$scope.onSelectItems = function(item_type) {
var params = {
name: item_type.name,
};
$state.go('tab.itemDetail', params);
console.log($state.params);
};
});
Here is the controller for itemListingDetailCtrl:
.controller("itemListingDetailCtrl", function ($scope, itemService, $stateParams, $state)
{
console.log($state.params);
$scope.name = $state.params.name;
})
Finally, this is the relevant section from the service.js that pulls in the JSON.
.factory('itemService', function($http,$location) {
var items = [];
return {
getitems: function(){
return $http.get(/path/to/JSON).then(function(resp){
items = resp.data.items;
return items;
});
},
}
});
Is anyone able to lend a hand? Thanks in advance.
Suppose I have following html file:
<!DOCTYPE html>
<html>
<head>
<title>LOG</title>
</head>
<body>
<div class="panel panel-success">
<!-- Default panel contents -->
<div class="panel-heading">Log data</div>
<div class="panel-body">
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Start processing at {{StartProcessing }}</li>
<li class="list-group-item">Finished processing at {{EndProcessing }}</li>
</ul>
<div id="logTvId" kendo-tree-view
k-data-source="treeData">
</div>
</div>
</div>
and following controller code:
Arch.LogController = function ($scope, $resource, $routeParams)
{
var LogResource = $resource('log/:markerId', {}, {
get: {method: "GET", isArray: false}
});
LogResource.get({markerId: $routeParams.markerId}, function (data1)
{
$scope.StartProcessing = new Date(data1.StartProcessing).toLocaleString();
$scope.EndProcessing = new Date(data1.EndProcessing).toLocaleString();
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
});
};
After page load I can see StartProcessing and EndProcessing on page, but I can't see treeview. If I take out code related to $scope.treeData from resource load (say the next instruction after)
then everything works as expeteced. If I add $scope.$apply() to my initial controller code it throws exception...
What I'm doing wrong? Should I deal with promises ($q ??) and wait after resource is loaded?
Thanks in advance.
Ok, actually problem is solved. In resource handler I create kendo treeview by "hand" (via jquery, as usual), so I'm not using kendo-tree-view directive. Simple div with id + jquery.