Fancytree not visible has class ui-helper-hidden - javascript

I have just started with fancytree 2.6.0 and I am populating it from a web service request.
My problem is that all the nodes are present but are made invisible by the ui-helper-hidden class. I have put in a temporary fix with: $(rootNode.ul).removeClass('ui-helper-hidden'); but I am sure I am missing something.
The scripts and css:
<link href="Scripts/jquery-plugins/fancytree-2.6.0/src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.11.1/jquery-1.11.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.11.1/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.js" type="text/javascript"> </script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.themeroller.js" type="text/javascript"> </script>
The code:
$('#selectedClausesDiv').fancytree();
$.when(
$.getJSON("Handlers/GetQuotationHandler.ashx?jsoncallback=?", { quoteReference: quoteReference, quoteVersion: quoteVersion })
).then(function (data) {
if (data.ErrorCode == 0 && data.Quotation != null) {
var rootNode = $("#selectedClausesDiv").fancytree("getRootNode");
$.each(data.Quotation.Covers, function (index, item) {
addCover(rootNode, item);
});
// FIXME: why is this necessary ??
// $(rootNode.ul).removeClass('ui-helper-hidden');
}
});
function addCover(rootNode, cover) {
var coverId = 'selected_' + cover.BusinessClassId + '_' + cover.CoverId;
var coverNode = rootNode.addChildren({
title: cover.Name,
tooltip: "This folder and all child nodes were added programmatically.",
folder: true
});
}
The generated html:
<div class="grid_13 alpha omega" id="selectedClausesDiv">
<ul class="ui-fancytree fancytree-container ui-fancytree-source ui-helper-hidden" tabindex="0">
<li class="">
<span class="fancytree-node fancytree-folder fancytree-exp-n fancytree-ico-cf">
<span class="fancytree-expander"/>
<span class="fancytree-icon"/>
<span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&I Owned</span>
</span>
</li>
<li class="fancytree-lastsib">
<span class="fancytree-node fancytree-folder fancytree-lastsib fancytree-exp-nl fancytree-ico-cf">
<span class="fancytree-expander"/>
<span class="fancytree-icon"/>
<span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&I Extended Cargo</span>
</span>
</li>
</ul>
</div>

Fancytree will automatically hide the root element if no data source is provided.
If you are adding data using the API and no initial source, providing a blank source option will prevent Fancytree from hiding the root element.
$("#tree").fancytree({
source: []
});

Related

How to load extensions for the Forge Viewer (without a viewerApp)

I'm trying to developp a Forge Autodesk Viewer for a webapp, this tutorial. I have an issue while trying to load extensions, indeed they never load on the viewer.
I've already developped the viewer of the tutorial, and the extensions worked correctly.
The main difference between my viewer and the tutorial's viewer is the use of a viewerApp in the tutorial while I had to use directly a GUIViewer3D (For the aggregation of several models).
I've already tried to load the viewer and the extensions in a different order, but it didn't change worked either. I assumed the code of the extension is correct, since it works in the tutorial, but I'm not sure about how I linked it to my viewer.
The code to load the viewer :
Autodesk.Viewing.Initializer(options, function onInitialized() {
// Initialisation du Viewer
var viewerDiv = document.getElementById('MyViewerDiv');
var config = {
extensions: ['DockingPanelExtension']
};
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv, config);
viewer.initialize();
});
The code of the index
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<!-- The Viewer CSS -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/style.min.css"
type="text/css">
<!-- Developer CSS -->
<link rel="stylesheet" href="/static/style.css" type="text/css">
<!-- Common packages: jQuery, Bootstrap, jsTree -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
</head>
<body>
<!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav left">
<li>
<a href="http://developer.autodesk.com" target="_blank">
<img alt="IM-Pact" src="static/img/IMPact.png"
height="20">
</a>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" onClick="callNew()">Add next model</button>
</li>
</ul>
</div>
</nav>
<!-- End of navbar -->
<div class="container-fluid fill">
<div class="row fill">
<div class="col-sm-4 fill">
<div class="panel panel-default fill">
<div class="panel-heading" data-toggle="tooltip">
Buckets & Objects
<span id="refreshBuckets" class="glyphicon glyphicon-refresh" style="cursor: pointer"></span>
<button class="btn btn-xs btn-info" style="float: right" id="showFormCreateBucket"
data-toggle="modal" data-target="#createBucketModal">
<span class="glyphicon glyphicon-folder-close"></span> New bucket
</button>
</div>
<div id="appBuckets">
tree here
</div>
</div>
</div>
<div class="col-sm-8 fill">
<div id="MyViewerDiv"></div>
</div>
</div>
</div>
<form id="uploadFile" method='post' enctype="multipart/form-data">
<input id="hiddenUploadField" type="file" name="theFile" style="visibility:hidden" />
</form>
<!-- Modal Create Bucket -->
<div class="modal fade" id="createBucketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Cancel">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create new bucket</h4>
</div>
<div class="modal-body">
<input type="text" id="newBucketKey" class="form-control"> For demonstration purposes, objects
(files) are
NOT automatically translated. After you upload, right click on
the object and select "Translate". Bucket keys must be of the form [-_.a-z0-9]{3,128}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="createNewBucket">Go ahead, create the
bucket</button>
</div>
</div>
</div>
</div>
<!-- <button id="MyNextButton" onClick="callNext()">Next!</button> -->
<!-- The Viewer JS -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v6.6"></script>
<!-- Developer JS -->
<script src="static/js/docLoad.js"></script>
<script src="static/js/modelLoad.js"></script>
<script src="static/js/extensions/dockingpannelextension.js"></script>
<script src="static/js/viewer.js"></script>
<script src="static/js/tree.js"></script>
</body>
The code of the extension
// *******************************************
// Model Summary Extension
// *******************************************
var propsToList = [];
function addToList(item) {
if (propsToList.includes(item)) {
var index = propsToList.indexOf(item);
propsToList.splice(index, 1);
} else {
propsToList.push(item)
}
console.log(propsToList)
}
function ModelSummaryExtension(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
this.panel = null; // create the panel variable
}
ModelSummaryExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
ModelSummaryExtension.prototype.constructor = ModelSummaryExtension;
ModelSummaryExtension.prototype.load = function () {
if (this.viewer.toolbar) {
// Toolbar is already available, create the UI
this.createUI();
} else {
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
}
return true;
};
ModelSummaryExtension.prototype.onToolbarCreated = function () {
this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
this.onToolbarCreatedBinded = null;
this.createUI();
};
ModelSummaryExtension.prototype.createUI = function () {
var _this = this;
// prepare to execute the button action
var modelSummaryToolbarButton = new Autodesk.Viewing.UI.Button('runModelSummaryCode');
modelSummaryToolbarButton.onClick = function (e) {
// check if the panel is created or not
if (_this.panel == null) {
_this.panel = new ModelSummaryPanel(_this.viewer, _this.viewer.container, 'modelSummaryPanel', 'Model Summary');
}
// show/hide docking panel
_this.panel.setVisible(!_this.panel.isVisible());
// if panel is NOT visible, exit the function
if (!_this.panel.isVisible()) return;
// ok, it's visible, let's get the summary!
// first, the Viewer contains all elements on the model, including
// categories (e.g. families or part definition), so we need to enumerate
// the leaf nodes, meaning actual instances of the model. The following
// getAllLeafComponents function is defined at the bottom
_this.getAllLeafComponents(function (dbIds) {
// now for leaf components, let's get some properties
// and count occurrences of each value.
// get only the properties we need for the leaf dbIds
_this.viewer.model.getBulkProperties(dbIds, propsToList, function (dbIdsProps) {
// iterate through the elements we found
dbIdsProps.forEach(function (item) {
// and iterate through each property
item.properties.forEach(function (itemProp) {
// now use the propsToList to store the count as a subarray
if (propsToList[itemProp.displayName] === undefined)
propsToList[itemProp.displayName] = {};
// now start counting: if first time finding it, set as 1, else +1
if (propsToList[itemProp.displayName][itemProp.displayValue] === undefined)
propsToList[itemProp.displayName][itemProp.displayValue] = 1;
else
propsToList[itemProp.displayName][itemProp.displayValue] += 1;
});
});
// now ready to show!
// the Viewer PropertyPanel has the .addProperty that receives the name, value
// and category, that simple! So just iterate through the list and add them
propsToList.forEach(function (propName) {
if (propsToList[propName] === undefined) return;
Object.keys(propsToList[propName]).forEach(function (propValue) {
_this.panel.addProperty(
/*name*/
propValue,
/*value*/
propsToList[propName][propValue],
/*category*/
propName);
});
});
})
})
};
// modelSummaryToolbarButton CSS class should be defined on your .css file
// you may include icons, below is a sample class:
modelSummaryToolbarButton.addClass('modelSummaryToolbarButton');
modelSummaryToolbarButton.setToolTip('Model Summary');
// SubToolbar
this.subToolbar = (this.viewer.toolbar.getControl("MyAppToolbar") ?
this.viewer.toolbar.getControl("MyAppToolbar") :
new Autodesk.Viewing.UI.ControlGroup('MyAppToolbar'));
this.subToolbar.addControl(modelSummaryToolbarButton);
this.viewer.toolbar.addControl(this.subToolbar);
};
ModelSummaryExtension.prototype.unload = function () {
this.viewer.toolbar.removeControl(this.subToolbar);
return true;
};
ModelSummaryExtension.prototype.getAllLeafComponents = function (callback) {
var cbCount = 0; // count pending callbacks
var components = []; // store the results
var tree; // the instance tree
function getLeafComponentsRec(parent) {
cbCount++;
if (tree.getChildCount(parent) != 0) {
tree.enumNodeChildren(parent, function (children) {
getLeafComponentsRec(children);
}, false);
} else {
components.push(parent);
}
if (--cbCount == 0) callback(components);
}
this.viewer.getObjectTree(function (objectTree) {
tree = objectTree;
var allLeafComponents = getLeafComponentsRec(tree.getRootId());
});
};
// *******************************************
// Model Summary Panel
// *******************************************
function ModelSummaryPanel(viewer, container, id, title, options) {
this.viewer = viewer;
Autodesk.Viewing.UI.PropertyPanel.call(this, container, id, title, options);
}
ModelSummaryPanel.prototype = Object.create(Autodesk.Viewing.UI.PropertyPanel.prototype);
ModelSummaryPanel.prototype.constructor = ModelSummaryPanel;
Autodesk.Viewing.theExtensionManager.registerExtension('ModelSummaryExtension', ModelSummaryExtension);
Thanks in advance !
In the extension JavaScript file, you're registering the extension under the name ModelSummaryExtension, but in the viewer initialization code you're passing the config object with extensions: ['DockingPanelExtension']. That's likely why the extension isn't loaded. Try initializing the GuiViewer3D class with the following config instead:
let config = {
extensions: ['ModelSummaryExtension']
};
EDIT (after the extension naming has been fixed):
When initializing the GuiViewer3D, call its start() method instead of initialize(). It will internally call initialize() (for initializing internal structures, event handlers, etc.), setUp(); (for configuring the viewer based on your config object), and finally it will call loadModel() if there's a URN or a filepath argument passed to the function.

TypeError: $(...).sortable is not a function in angular

I am using jquery and jquery ui for drag and drop functionality inside angular project for which i have added,
Index.html:
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Component.ts:
declare var jquery:any;
declare var $ :any;
export class DropAreaComponent implements OnInit, OnDestroy {
ngOnInit(): void {
$("#people").sortable({
update: function(e, ui) {
$("#people .draggable").each(function(i, element) {
$(element).attr("id", $(element).index("#people .draggable"));
$(element).text($(element).text().split("Index")[0] + " " + "Index: " + " => " + $(element).attr("id"));
});
}
});
}
Component.html:
<ul id="people">
<li *ngFor="let person of people; let i = index">
<div class="draggable" id={{i}}>
<p> <b> {{ person.name }} </b> Index => {{i}}</p>
</div>
<br><br>
</li>
</ul>
But it is showing the error as,
ERROR TypeError: $(...).sortable is not a function
angular-cli.json consists of the following in scripts,
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/moment/moment.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/hammerjs/hammer.js",
"../node_modules/materialize-css/dist/js/materialize.js",
"../node_modules/bootstrap-material-design/dist/js/material.js",
"../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
"../node_modules/arrive/src/arrive.js",
"../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
"../node_modules/bootstrap-notify/bootstrap-notify.js",
"../node_modules/chartist/dist/chartist.js",
"../node_modules/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"
],
Is there any issues with the script in angular-cli.json when i am including in index.html?
Kindly help me to solve this issue.
You missing : jquery-ui.min.js
run npm install jquery-ui-dist
add path in script (add after jquery include line)
../node_modules/jquery-ui-dist/jquery-ui.min.js
Remove following script from index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

bootstrap not rendering with jquery dynamically created elements

The below code loads a json file into my app in order to to populate some table data. It gets the job done.
function init_main () {
$('html').hide().fadeIn('slow');
// popuate from index.json
var json = $.getJSON(chrome.extension.getURL('js/index.json'), function(json) {
// CREATE SETTINGS TABLE WITH GIVEN INDEX
for (var property in json) {
var table = $('<table></table>').addClass('table');
var header = $('<thead></thead>').addClass('thead-inverse');
var head_r = $('<tr></tr>');
var h1 = $('<th></th>').text(property);
var h2 = $('<th></th>').text('check to remove: ');
head_r.append(h1);
head_r.append(h2);
header.append(head_r);
table.append(header);
var body = $('<tbody></tbody>');
table.append(body);
for (var tag in json[property]) {
var body_r = $('<tr></tr>');
var d1 = $('<td></td>').text(tag);
var d2 = $('<td></td>') // maybe change to class?
$('<input />', { type: 'checkbox', id: tag}).appendTo(d2);
body_r.append(d1);
body_r.append(d2);
body.append(body_r);
}
$('#tableWrap').append(table);
}
});
}
//bind events to dom elements
document.addEventListener('DOMContentLoaded', init_main);
However, unlike the rest of my html markup, only these elements will not use the bootstrap library to alter my CSS. All other html markup successfully uses the bootstrap library.
I have tried moving the code outside of the callback with no luck. No errors in console.
Does anyone have any idea why bootstrap wont come into effect during the above code snippet? I think it has something to do with page load but so far I have not seen any success with window.onPageLoad()
Here are my script imports in my html for reference:
<html>
<head>
<!-- load stylesheets: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/index.html -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>
<!-- load javascript: jQuery 1.9.1 - http://jquery.com/ -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- load javascript: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/ -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- load stylesheets: internal -->
<link rel="stylesheet" type="text/css" href="../css/global.css"></link>
<link rel="stylesheet" type="text/css" href="../css/main.css"></link>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a id="home" id="active" class="brand" href="#">
<!-- UNCOMMENT THE CSS VALUES TO TEST OTHER DIMENTIONS -->
<img src="../images/icon.png" alt="">
<span class="icon-bar"></span>
Fluff 1.0
</a>
<a id="settings" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Settings</a>
<a id="run" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Run</a>
</div>
</div>
<div id="outer">
<!-- Main Page -->
<div id="main-inner">
<div id="main-title"> Fluff 1.0 </div>
<div id="textblock">Donate or contact block here</div>
</div>
<!-- Settings Page -->
<div id="settings-inner">
<h5 id="directions"> <span></span> Select Tags to Remove from Automated Browser Queries </h5>
<div id="tableWrap">
</div>
</div>
<!-- Run Page -->
<div id="run-inner">
<table class='table'>
<thead>
<tr>
<td> 1 </td>
<td> 2</td>
</tr>
</thead>
</table>
</div>
</div>
<!-- load javascript: unique html page javascript file -->
<script type="text/javascript" src="../js/main.js"></script>
</body>
edit: sample.json - 'num' key is not relevant in any of the question or code
{
"sex": {
"M":{
"num":13,
},
"F": {
"num":13,
},
"T": {
"num":0
}
},
"politics": {
"L": {
"num":10,
},
"R": {
"num":10,
}
},
"race": {
"AMI":{
"num":6,
},
"ASI":{
"num":7,
},
"AFA":{
"num":7,
},
"PCI":{
"num":0
},
"WHT":{
"num":2,
"3":"-"
},
"HSP":{
"num":5,
"6":"-"
},
"MDE":{
"num":6,
}
},
"orientation": {
"STR": {
"num":0
},
"GAY": {
"num":0
},
"OTH": {
"num":0
}
},
"interests": {
"GARD":{
"num":4,
},
"NHL":{
"num":1,
},
"NBA":{
"num":1,
},
"TECH":{
"num":0
}
}
}
I don't understand your problem exactly, but I put your sample in jsfiddle by removing some unuseful html file to make it simple to read and this works. Only code which is wrong is var json = $.getJSON. Why you do it? however you have not any returned value at all and if it was it never works in async functions like get.
The second problem is that you never call your function!!
See this code and share your idea with me:
jsfiddle
Solved by changing div id='tableWrap' to table id='tableWrap' in html
Tables inside of tables ...

Passing data from parent to child when rendering a list in vue.js

I am writing something in Vue.js and it requires iterating over a list of tags. When clicked, each of those tags should show the 5 most recent stories with said tag.
I am using vue resources rather than ajax and that is all working fine.
So far I have one component which generates the list of tags and a child component to generate a list of stories. The child should take the tag id from the clicked tag and make a get request. I am struggling to make vue pass the tag id from parent to child.
I am using v-bind so it looks like this (p.s. ignore the #, using Laravel's blade and that is to tell blade not to act on the moustache tags)
<child v-bind:tag="#{{tags.id}}"></child>
Though tags.id works perfectly well elsewhere, it does not appear to here.
If I try to pass through a string literal it is quite happy, ie:
<child tag="1"></child>
but I am having no luck with vue's dynamic syntax :tag
Here is my full code:
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.toggled { display: none; }
</style>
</head>
<body>
<div class="container">
<h1>My tags</h1>
<tags></tags>
</div>
<template id="tags-template">
<ul class="list-group"
>
<li class="list-group-item"
v-for="tags in list"
#click=" tags.open =! tags.open"
>
<span>#{{ tags.name }}</span>
<div v-bind:class="{'toggled': tags.open}">
See all recent stories #{{tags.id}}
<child v-bind:tag="#{{tags.id}}"></child>
</div>
</li>
</ul>
</template>
<template id="stories-template">
<p>Stories dropdown goes here #{{ tag }}</p>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
<script>
Vue.component('tags', {
//
template: '#tags-template',
data: function() {
return {
list: [],
url: '/tags/',
};
},
created: function() {
this.fetchTagsList();
},
methods: {
fetchTagsList: function() {
var resource = this.$resource('/api/tags/{id}');
resource.get( {}, function(tags)
{
this.list = tags;
}.bind(this));
},
// toggle: function() {
// var resource = this.$resource('/api/storyFromTag/{id}');
// resource.get( {id: 1}, function(stories)
// {
// this.list = stories;
// }.bind(this));
// alert(stories);
// }
}
}),
Vue.component('child', {
props: ['tag'],
template: '#stories-template'
})
new Vue ({
el: 'body'
})
</script>
</body>
</html>

Photoswipe and Infinite AJAX Scroll

First up, apologies for lots of code. Just don't want to miss anything.
I am generating images on a page in this format:
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<!-- photoswipe Core CSS file -->
<link rel="stylesheet" href="assets/photoswipe/dist/photoswipe.css">
<link rel="stylesheet" href="assets/photoswipe/dist/default-skin/default-skin.css">
</head>
<body>
<div id="page">
<div id="thumbs" itemscope itemtype="http://schema.org/ImageGallery">
<ul class="responsive-thumbnails" data-max-width="202px" data-padding="4px">
<li class="thumb">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<img src="img/th_31.jpg" itemprop="thumbnail" alt="" />
</figure>
</li>
<!-- multiple of <li> as above here for each thumbnail image -->
</ul>
</div>
<div id="pagination"><!-- my codeigniter paginiation output (gets hidden by infintie scroll</div>
</div>
<!-- Infinite AJAX Scroll stuff -->
<script type="text/javascript" src="assets/jquery-ias.min.js"></script>
<script type="text/javascript">
var ias = $.ias({
container: "#thumbs",
item: ".thumb",
pagination: "#pagination",
next: ".next a"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 5}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
/* //I think somehow here, I need to trigger photoswipe to add new items after IAS has added more.
ias.on('rendered', function(items) {
lightBox.init();
);
});
*/
</script>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- this is where the standard photoswipe html elements are stored. Copied from their docs. Omitted here -->
</div>
<!-- photoswipe Core JS file -->
<script src="assets/photoswipe/dist/photoswipe.min.js"></script>
<script src="assets/photoswipe/dist/photoswipe-ui-default.min.js"></script>
<!-- my script to initiate Photoswipe instance (see below) -->
<script type="text/javascript" src="assets/photoswipe.js"></script>
</body>
</html>
Contents of photoswipe.js:
(function($) {
var $pswp = $('.pswp')[0];
var image = [];
$('#thumbs').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
console.log(items);
$.each(items, function(index, value) {
image[index] = new Image();
image[index].src = value['src'];
});
$pic.on('click', 'li', function(event) {
event.preventDefault();
var $index = $(this).index();
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true,
showAnimationDuration: 500,
hideAnimationDuration: 500
}
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
});
});
})(jQuery);
Photoswipe is working, but it only works with the first batch of photo initially loaded on the page. In this case I load 20. Any more images that get appended by IAS can be clicked on and do bring up the photoswipe lightbox, but their preview sized images are not showing in the lightbox. I just get the first 20 to scroll through.
So the question is, how do I get photoswipe and Infinite AJAX Scroll to work together?

Categories