Photoswipe and Infinite AJAX Scroll - javascript

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?

Related

Css styles not getting applied in the page which I am trying to print using javascript

I am trying to print the contents of a specific div with a class called "container" which has a number of divs having their individual classes. The problem I am facing is that when I click the print button the print preview shows the contents to be printed in completely plain format, no css styles applied. But I want the contents to be exactly the way it is being displayed in the browser. I have tried a number of ways and solutions from here but nothing seems to work. Please suggest me some way to do it. I was trying to do it with javascript. The javascript code given below is cpied as I said I was trying out all the possible ways.
javascript
$(function () {
$("#btnPrint").click(function () {
var contents = $("#content").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
The below images are the way it is being displayed in the browser and the way it is displayed in the preview
This is how i want it to get it printed
and this is how it getting printed]2
html file
<link rel="stylesheet" href="{% static 'doc.css' %}" media="all"/>
<div class="main-container">
<div class="container" id="content">
{% if object.reportable %}
<div class="report">
<p>Reportable </p>
</div>
{% endif %}
{% if object.non_reportable %}
<div class="report">
<p>Non-Reportable </p>
</div>
{% endif %}
{% if object.over_ruled %}
<div class="over">
<p>Over Ruled </p>
</div>
{% endif %}
{% if object.equivalent_citations %}
<div class="cit">
<p><b>Equivalent Citations:</b> {{object.equivalent_citations}}</p>
</div>
{% endif %}
<div class="crt">
<p><b>In The {{object.court_type}}</b></p>
</div>
<div class="appeal">
<p><b>{{object.apelLate_type}}</b></p>
</div>
<div class="jdge">
<p> <b>Before:</b> {{object.judge_name}}</p>
</div>
<div class="party-name">
<p> <b> {{object.party_name}} </b> </p>
</div>
<div class="case-no">
<p><b>Case No.:</b> {{object.case_no}} </p>
</div>
...
<div class="container-2">
<input type="button" id="btnPrint" value="Print" />
</div>
</div>
Consider the following example: https://jsfiddle.net/Twisty/aspehr0m/7/
JavaScript
$(function() {
$("#btnPrint").click(function() {
var contents = $("#content").html();
var frame1 = $('<iframe>', {
id: "frame1",
name: "frame1"
})
.css({
"position": "absolute",
"top": "-1000000px"
})
.appendTo($("body"));
var myHTML = $("<html>");
$("<head>").appendTo(myHTML);
$("<title>").html("DIV Contents").appendTo($("head", myHTML));
$("<body>").appendTo(myHTML);
$("body > link").clone().appendTo($("body", myHTML));
$("body", myHTML).append(contents);
console.log("Content", myHTML.prop("outerHTML"));
var frameDoc = window.frames.frame1;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write(myHTML.prop("outerHTML"));
frameDoc.document.close();
setTimeout(function() {
frame1.focus();
window.frames.frame1.print();
frame1.remove();
}, 500);
});
});
Here you can use .clone() to make a copy of the existing Stylesheet Link. this will ensure it uses the same as the primary page.
It is consider a better practice not to mix JavaScript and jQuery, to stick to one or the other. In this case, it's a bit easier to to manage the iFrame element with native JavaScript.
Update
You might consider making a new Function: https://jsfiddle.net/Twisty/aspehr0m/38/
JavaScript
$(function() {
$.fn.printContent = function() {
var target = $(this);
var title;
if (target.attr("title") != undefined) {
title = target.attr("title");
} else {
title = "Element Contents"
}
var uid = Date.now();
var printFrame = $("<iframe>", {
id: "printFrame_" + uid,
name: "printFrame_" + uid
}).css({
position: "absolute",
top: "-1000000px"
}).appendTo($("body"));
var frameHTML = $("<html>");
$("<head>").appendTo(frameHTML);
$("<title>").html(title).appendTo($("head", frameHTML));
$("<body>").appendTo(frameHTML);
if ($("body > link").length == 1) {
$("body > link").clone().appendTo($("body", frameHTML));
}
$("body", frameHTML).append(target.html());
var winFrame = window.frames['printFrame_' + uid];
winFrame.document.open();
winFrame.document.write(frameHTML.prop("outerHTML"));
winFrame.document.close();
setTimeout(function() {
printFrame.focus();
winFrame.print();
printFrame.remove();
}, 100);
};
$("#btnPrint").click(function() {
$("#content").printContent();
});
});
Use an URL or accessible path instead of:
C:\Users\Intel\Envs\test\project\static\doc.css" rel="stylesheet" type="text/css" />
By the way, The javascript seems to be ok, your page wouldn't show content if it were misspelled

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.

Isotope and lightbox, how to only show the visible (filtered) images in lightbox

I am building a wordpress website. I am implementing isotope for image layout and filtering (isotope.metafizzy)
I have configured Isotope already, so that images are layed out and filterable, this is all working fine.
Currently, when i open an image in the lightbox, it loads all the images in the series, including images which are currently hidden (filtered by Isotope).
I want to change my solution so that only the visible images will be loaded into the Lightbox. This way a user can use isotope to filter down to the desired set of images, and can then view these in a larger format using the lightbox.
the code below is what is outputted by wordpress (from view page source).
I have tried the solution in this post but i wasn't able to adapt to my code.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">Afficher tout</button>
<button class="button" data-filter=".faune">faune</button><button class="button" data-filter=".flore">flore</button><button class="button" data-filter=".paysage">paysage</button>
</div>
<div id="isotopegallery" class="grid">
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat.jpg" data-lightbox="image-1" data-title="Portfolio elt 8 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-piscine-décoration-paysagere-style-habitat-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier.jpg" data-lightbox="image-1" data-title="Portfolio elt 7 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/07/totem-arbre-siege-gonthier-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-1024x789.jpg" data-lightbox="image-1" data-title="Portfolio elt 6 ">
<img src="http://localhost/wordpress_onepage/wp-content/uploads/2016/08/piscine_CHU01-150x150.jpg" alt="">
</a>
</div>
<div class="element-item faune" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere.jpg" data-lightbox="image-1" data-title="Portfolio elt 5 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/decoration-minerale-paysagere-150x150.jpg" alt="">
</a>
</div>
<div class="element-item flore" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1.jpg" data-lightbox="image-1" data-title="Portfolio elt 4 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/2-1-150x150.jpg" alt="">
</a>
</div>
<div class="element-item paysage" >
<a href="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie.jpg" data-lightbox="image-1" data-title="Portfolio elt 3 ">
<img src="http://www.gonthier-entreprise.com/wp-content/uploads/2016/01/realisation-escalier-en-pierre-savoie-150x150.jpg" alt="">
</a>
</div>
</div>
</p>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- framework gallery isotope -->
<script src="https://npmcdn.com/isotope-layout#3.0/dist/isotope.pkgd.min.js"></script>
<!-- framework gallery lightbox -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script>
<!-- framework gallery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script>
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// bind sort button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$grid.isotope({ sortBy: sortByValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
</script>
Thanks for your help
Using magnificPopup I add/remove classes used by magnificPopup (see delegate option) in isotope's arrangeComplete event.
Isotope element with image, the class=mag is used by magnificPopup
<div class="element-item">
<a href="gallery-image" class="mag">
<img src="gallery-thumb" />
</a>
</div>
magnificPopup using a delegate
$grid.magnificPopup({
type: 'image',
delegate: 'a.mag',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
opener: function (e) {
return e.find("img");
}
}
});
Add/remove magnificPopup delegate classes
$grid.on('arrangeComplete', function(event, filteredItems) {
$(".element-item:hidden a").removeClass("mag");
$(".element-item:visible a").addClass("mag");
});
If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images.
For example:
Image #2
Image #3
Image #4
http://lokeshdhakar.com/projects/lightbox2/#getting-started

Fancytree not visible has class ui-helper-hidden

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: []
});

closed captions for a mp4 video

I can't get closed captioning to work on my video, I am pretty sure that I have a lot of the code that is required for getting it to work, and I am just not sure what I might be missing. I am also getting a message in the body, where it shows that the data-begin, and data-end are underlined green, and it says that Attribute data-begin is not a valid attribute of element span, I am not sure if thats the problem, and I may need to use another tag, and that can still get it to work. I am pretty new to html. Here is all my code
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "videos/sequence01mp4video.mp4",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "/javascripts",
supplied: "m4v"
});
});
(function (_global) {
var captions = [];
var video;
var output;
var caplen;
window.addEventListener('load', function () {
output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
output.id = 'caption'; // it has an id of caption
video = document.querySelector('video'); // and it's after the first video element
video.parentNode.insertBefore(output, video.nextSibling);
getCaptions();
video.addEventListener('timeupdate', timeupdate, false);
}, false);
// function to populate the 'captions' array
function getCaptions() {
captions = []; // empty the captions array
var nodes = document.querySelectorAll('#transcript span');
var node = "";
var caption = "";
for (var i = 0, node; node = nodes[i]; i++) {
caption = {
'start': parseFloat(node.getAttribute('data-begin')), // get start time
'end': parseFloat(node.getAttribute('data-end')), // get end time
'text': node.textContent
};
captions.push(caption); // and all the captions into an array
}
caplen = captions.length;
}
function timeupdate() {
var now = video.currentTime; // how soon is now?
var text = "", cap = "";
for (var i = 0; i < caplen; i++) {
cap = captions[i];
if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
text = cap.text; // yes? then load it into a variable called text
break;
}
}
output.innerHTML = text; // and put contents of text into caption div
}
// hide transcript div when scripting is enabled
document.write('<style>#transcript{display:none}</style>');
})(this);
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div id="transcript">
<span data-begin="0:00:00.380" data-end="0:00:03.670">hello, my name is rob carson environmental engineer with the</span>
<span data-begin="0:00:03.670" data-end="0:00:06.880">hello, my name is rob carson environmental engineer with the.</span>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li>full screen</li>
<li>restore screen</li>
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>

Categories