Django : Django paths not working as expected - html

I have a project . I have to reference a json file . My code which is the flashcard.html file :
{%include 'header.html' %}
<style>
{%include 'css/flashcard.css' %}
{%include 'css/header.css' %}
</style>
<div id="content" style="width: 100%; position: relative;"></div>
<i class="fas fa-caret-right" style="position: absolute; top: 20%; left: 95%; font-size: 50px;" id="next"></i>
<i class="fas fa-caret-left" style="position: absolute; top: 20%; left:5%; font-size: 50px;" id="back"></i>
<script>
let mydata = {%include 'data.json' %}
let frontSideFront = true
let cardNum = 0
let totalCards = 2
//var mydata = JSON.parse(data);
for(var i = 0 ; i < totalCards ; i++ ){
frontSideFront = true
$("#content").append(`
<div class="card-container" id="${i}">
<div class="front">${mydata['questions'][i]}</div>
<div class="back">sd</div>
</div>
`)
}
for(var m = 0 ; m < totalCards ; m++ ){
if (m !== cardNum) {
$(`#${m}`).css('visibility', 'hidden');
}
}
$("#next").click(function (e) {
$(`#${cardNum}`).css('visibility', 'hidden');
$(`#${cardNum}`).css('position', 'absolute');
cardNum++
$(`#${cardNum}`).css('visibility', 'visible');
$(`#${cardNum}`).css('position', 'relative');
});
$("#back").click(function (e) {
$(`#${cardNum}`).css('visibility', 'hidden');
$(`#${cardNum}`).css('position', 'absolute');
cardNum--
$(`#${cardNum}`).css('visibility', 'visible');
$(`#${cardNum}`).css('position', 'relative');
});
$(".card-container").click((e)=>{
if(frontSideFront){
frontSideFront = false
$(".front").css({
"transform": "rotateY(-180deg)",
})
$(".back").css({
"transform": "rotateY(0deg)",
})
}else{
frontSideFront = true
$(".front").css({
"transform": "rotateY(0deg)",
})
$(".back").css({
"transform": "rotateY(180deg)",
})
}
})
</script>
The code is to create a flashcard. But the problem is that my data.json file is not being accessed . I even tried absolute paths.Like:
D:\anshu\python\uceed-website\venv\uceedWebsite\data.json
and even
../../../data.json
and :
../../data.json
and:
./data.json
.
My file structure :
You can ask any doubts and questions .
Thanks in advance.

Related

How to get array data from dynamic tabs and delete current tabs by jquery

I'm creating dynamic tabs. I'm currently facing two problems:
When I click on the span x to delete current tab, it deletes all my tabs.
When I getting the array data, it always gets the first tab data only.
Can anyone help me with this? I've tried many ways but I still cannot get my desired result. Here is my fiddle Dynamic Tabs.
Currently my array result looks like this for the 2nd problem when there is two tabs, '2023' and '2025':
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2023"
}]
My expected result would be:
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2025"
}]
$(document).ready(function() {
addTab();
});
$('#add_tab').click(function() {
addTab()
});
//delete current tab
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() + nextTab;
// create the tab
$('<a class="nav-link" href="#tab-' + date + '" data-toggle="tab">' + date + '</a><span> x </span>').appendTo('#tabs');
// create the tab content
var html = "";
html += '<div class="tab-pane monthSettings" id="tab-' + date + '">';
html += '<label><b>Year: </b></label>';
html += '<input class="txtYear" type="text" value="' + date + '">';
html += '<label><b>January: </b></label>';
html += '<input class="txtJanuary" type="number" value="1">';
html += '<label><b>February: </b></label>';
html += '<input class="txtFebruary" type="number" value="1">';
html += '</div>';
//append to tab-content
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}
//get array
$(document).on('click', '#btnGetArray', function(e) {
var array = []
$(".monthSettings").each(function() {
let detail = {
Year: $(".txtYear").val() || 0,
January: $(".txtJanuary").val() || 0,
February: $(".txtFebruary").val() || 0,
}
array.push(detail)
console.log(array)
});
});
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
+ Add Year
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>
The issue is because your selectors for retrieving the .txtYear, .txtJanuary and .txtFebruary will only look at the value of the first element in the collection, no matter how many it finds.
To correct this you can use find() from the parent element, which you can reference from the each() loop, to retrieve the child elements in that iteration.
Taking this a step further, you can simplify the logic by using map() instead of each() to build your array, but the use of find() remains the same.
In addition, there's some other improvements which can be made to the code, such as ensuring all event handlers are within document.ready and using template literals to make the HTML string concatenation easier to read.
jQuery($ => {
$('#add_tab').on('click', addTab);
addTab();
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
$(document).on('click', '#btnGetArray', e => {
var array = $(".monthSettings").map((i, container) => ({
Year: $(container).find('.txtYear').val() || 0,
January: $(container).find('.txtJanuary').val() || 0,
February: $(container).find('.txtFebruary').val() || 0,
})).get();
console.log(array);
});
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() + nextTab;
$(`<a class="nav-link" href="#tab-${date}" data-toggle="tab">${date}</a><span> x </span>`).appendTo('#tabs');
var html = `
<div class="tab-pane monthSettings" id="tab-${date}">
<label><b>Year: </b></label>
<input class="txtYear" type="text" value="${date}" />
<label><b>January: </b></label>
<input class="txtJanuary" type="number" value="1" />
<label><b>February: </b></label>
<input class="txtFebruary" type="number" value="1" />
</div>`
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
+ Add Year
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>

How to calculate total in jQuery from JSON

I have a JSON file that contains the price of a product. I need to calculate the price of an individual item and the total price of the item. I succeeded in calculating the individual price of the product, but the final one did not work.
Here is the code jQuery:
var cart = {};
function init() {
$.getJSON("goods.json", goodsOut);
}
function goodsOut(data) {
var out='';
for (var key in data) {
out +='<div class="cart">';
out +=`<p class="name">${data[key].name}</p>`;
out +=`<img src="img/${data[key].img}" alt="">`;
out +=`<div class="cost">${data[key].cost} $</div>`;
out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
out +='</div>';
}
$('.goods-out').html(out);
$('.add-to-cart').on('click', addToCart);
}
function addToCart() {
//добавляем товар в корзину
var id = $(this).attr('data-id');
if (cart[id]==undefined) {
cart[id] = 1;
}
else {
cart[id]++;
}
showMiniCart();
saveCart();
}
function saveCart() {
localStorage.setItem('cart', JSON.stringify(cart));
}
function showMiniCart() {
if (!isEmpty(cart)) {
$('.mini-basket').html('Basket is empty!');
}
else {
$.getJSON('goods.json', function (data) {
var geds = data;
var out="";
for (var key in cart) {
out += '<div class="mini-basket_list">'
out += `<img src="img/${geds[key].img}" alt="Error" class="cart-product__img">`;
out += `<span class="name-basket">${geds[key].name}</span>`+'<br>';
out += ` <button data-id="${key}" class="plus-goods btn">+</button> `;
out += `<span class="quantityy">${cart[key]}</span>`;
out += ` <button data-id="${key}" class="minus-goods btn">-</button> `;
out += `<p class="cost-basket">Цена: <span class="cost-basket_plus">${Number(cart[key])*Number(geds[key].cost)}</span> $</p>`;
out += `<button data-id="${key}" class="del-goods btn">x</button> `;
out += '</div>'
}
$('.mini-basket').html(out);
$('.del-goods').on('click', delGoods);
$('.plus-goods').on('click', plusGoods);
$('.minus-goods').on('click', minusGoods);
});
}
}
function delGoods() {
var id = $(this).attr('data-id');
delete cart[id];
saveCart();
showMiniCart();
}
function plusGoods() {
var id = $(this).attr('data-id');
cart[id]++;
saveCart();
showMiniCart();
}
function minusGoods() {
var id = $(this).attr('data-id');
if (cart[id]==1) {
delete cart[id];
}
else {
cart[id]--;
}
saveCart();
showMiniCart();
}
function loadCart() {
if (localStorage.getItem('cart')) {
cart = JSON.parse(localStorage.getItem('cart'));
showMiniCart();
}
}
function isEmpty(object) {
for (var key in object)
if (object.hasOwnProperty(key)) return true;
return false;
}
$(document).ready(function () {
init();
loadCart();
});
Here is the code JSON:
{
"1234": {
"name": "Aplle",
"cost": "5",
"img" : "apple.png"
},
"1235": {
"name": "Cherry",
"cost": "7",
"img" : "cherry.png"
},
"1236": {
"name": "Grape",
"cost": "10",
"img" : "grape.png"
},
"1237": {
"name": "Slice of watermelon",
"cost": "12",
"img" : "watermelon.png"
}
}
Here is the code HTML:
<body>
<header class="header">
<nav class="nav">
<div class="basket">
<div class="cart__text">
Basket
</div>
<div class="cart-content">
<div class="block" data-simplebar>
<div class="mini-basket">
</div>
</div>
<div class="cart-content__bottom">
<div class="cart-content__fullprice">
<span>Total: </span>
<span class="fullprice"></span> <!--Here I want to display a total-->
<span>$</span>
</div>
</div>
</div>
</div>
</nav>
</header>
<section>
<div class="goods-out"></div>
</section>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/simplebar.js"></script>
<script src="js/main.js"></script>
</body>
Total should be shown in a span with fullprice class.

How can I call a function with onClick with my inline buttons with Svelte?

The buttons load into their correct column and I am trying to add functionality to them. Just adding the onClick to the first button to call my function saveMe() and I get the error saveMe is not defined. Can someone see what I'm doing wrong?
I've tried several things to get this to work. hrefs, getElementById, and even a simple alert in the button, but nothing works or I get errors.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
import { beforeUpdate, createEventDispatcher, onMount, shared } from 'svelte';
import Fuse from 'fuse.js';
import { writable } from 'svelte/store';
import { produce } from 'immer';
//import {saveMe} from './newlocal.js';
//console.log('saveme', saveMe);
//alert({saveMe})
//const testmsg = newlocal.saveMe(test);
let buttons = '<div class="btn-group style="width:100%"><button style="width:33.3%" type="button" onClick="saveMe()"><i class="fa fa-floppy-o"></i></button style="width:33.3%"><button style="width:33.3%"><i class="fa fa-rebel"></i></button><button style="width:33.3%"><i class="fa fa-print"></i></button></div>';
export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy', Action:buttons, ID: 1},
{Color:'RED', Car:'Pinto', Brand:'Ford', Action:buttons, ID: 2},
{Color:'Gray', Car:'Gremlin', Brand:'Chevy', Action:buttons, ID: 3},
{Color:'White', Car:'Maverick', Brand:'Ford', Action:buttons, ID: 4},
{Color:'Yellow', Car:'Beetle', Brand:'Volkswagen', Action:buttons, ID: 5},
{Color:'Black', Car:'Batmobile', Brand:'Wayne Enterprises', Action:buttons, ID: 6},
{Color:'Pewter', Car:'Silverado', Brand:'Chevy', Action:buttons, ID: 7},
{Color:'Yucky', Car:'F-150', Brand:'Ford', Action:buttons, ID: 8},
{Color:'Navy Blue', Car:'911', Brand:'Porsche', Action:buttons,ID: 9},
{Color:'Cherry Red', Car:'Diablo', Brand:'Lamborghini', Action:buttons, ID: 10},
{Color:'Black', Car:'Sporster', Brand:'Harley Davidson', Action:buttons, ID: 11},
{Color:'Orange', Car:'Viper', Brand:'Dodge', Action:buttons, ID: 12}
];
export let len = faketable.length;
console.log("len", len)
export let columns = ["Color", "Car", "Brand", "Action"];
export let apagetable = [];
export let clickable = true
export let currentPerPage = 10;
export let perPageOptions = [10, 20, 30, 40, 50];
export let currentPage = 1;
export let defaultpage = 1;
export let exactSearch = false;
export let newpages = parseInt(len / currentPerPage);
console.log('newpages', newpages)
export let sortType = 'asc';
let tr;
export let x;
export let z;
const dispatch = createEventDispatcher();
export function click(row) {
console.log('click', row);
if (!clickable) {
return;
}
if (getSelection().toString()) {
// Return if some text is selected instead of firing the row-click event.
return;
}
dispatch('row-click', row);
}
document.getElementById("saveme");
console.log('document', document);
function saveMe(){
console.log('saveme');
alert('I have been saved!');
}
export function sort(index) {
if (index > -1) {
setSortIcon(index);
getPaged({colName: columns[index].field, direction: sortType});
}
}
onMount(() => {
calcPage(defaultpage);
});
$: selectedPage = selected + 1;
export function calcPage(defaultpage){
x = parseInt(len / currentPerPage);
z = len % currentPerPage;
apagetable = [];
var temptable = [];
var i = 0;
if (len > currentPerPage){
if (z != 0){
x += 1;
}
}
for (i = 0 + (currentPerPage * (defaultpage - 1)); i < currentPerPage * defaultpage; ){
if (!faketable[i]){
break;
}
temptable.push(faketable[i]);
i++;
}
apagetable = temptable;
return apagetable;
}
function getNext(){
defaultpage += 1;
if (defaultpage >= x){
defaultpage = x;
}
calcPage(defaultpage);
}
function getPrev(){
defaultpage -= 1;
if (defaultpage <= 0){
defaultpage = 1;
}
calcPage(defaultpage);
}
function getPageAmount(){
currentPerPage = perPageOptions;
calcPage(defaultpage);
perPageOptions = [10, 20, 30, 40, 50];
}
</script>
<div>
<table ref="table" class="table" style="width:100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
{#each columns as column, x}
<th style="width: { column.width ? column.width : 'auto' }" align="center">
{column}
</th>
{/each}
</tr>
</thead>
<tbody>
{#each apagetable as row}
<tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">
{#each columns as column, x}
<td align="center">
{#html row[column]}
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<button style="right;"><i class="material-icons" on:click="{getPrev}">chevron_left</i></button><button style="float: right;"><i class="material-icons" on:click="{getNext}">chevron_right</i></button>
<div class="table-footer">
<div class="datatable-length">
<label>
<span>Rows per page:</span>
<select bind:value="{perPageOptions}" on:change="{getPageAmount}">
{#each perPageOptions as option}
<option value={option}>
{option}
</option>
{/each}
</select>
</label>
</div>
<div class="datatable-info">
{(currentPage - 1) * currentPerPage ? (currentPage - 1) * currentPerPage : 1}
- {currentPerPage} of {len}
</div>
</div>
</div>
<style>
tr.clickable {
cursor: pointer;
}
table {
table-layout: fixed;
}
table tr td {
padding: 0 0 0;
height: 50px;
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
border-bottom: solid 1px #DDDDDD;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #dddddd;
text-align: center;
}
table th {
border-radius: 0;
text-align: center;
}
table tbody tr:hover {
background-color: #EEE;
}
</style>
I'm just trying to get bare-bones functionality so I can add more specific details to the buttons as I go. But for this example, once the save button is clicked, I want an alert saying 'I have been saved!'.
There are 2 approaches to handling clicks in Svelte:
Inline (with anonymous arrow function):
<script>
let selectedTabIndex = 0;
</script>
<li class:is-active={selectedTabIndex === 0}>
<a href="#" on:click={() => (selectedTabIndex = 0)}>Tab 1</a>
With a function:
<script>
let hidden = false;
// with "old style" function
function toggleSectionVisiblity(event) {
hidden = !hidden;
}
// or with arrow function
const toggleSectionVisiblity = (event) => {
hidden = !hidden;
}
</script>
<a href="#" on:click={toggleSectionVisiblity}>Show / hide</a>

data in $scope not loading in the view in angularjs for dynamically loaded html

I am loading the HTML in a tab. After loading the HTML in a div. I am triggering the controller. when the controller is triggered I have the data in the controller. That data is not populating in the HTML view. Is there any suggestion on calling a controller or loading the data into HTML??
$('<div id = '+ createChannelTabId +'Properties'+ ' ng-controller="channelHomeCtrl" ng-bind="msg"> </div>').appendTo("#" + createChannelTabId);
$('body').injector().invoke(function ($compile, $rootScope) {
$compile($("#" + createChannelTabId + "Properties"))($rootScope);
$rootScope.$apply();
});
var modalFieldProperties = $("#" + createChannelTabId + "Properties");
modalFieldProperties.html(loadHTML("channelHome.html"));
$("#" + createChannelTabId + "Link")[0].click();
angular.bootstrap($("#" + createChannelTabId), ['ChannelModule']);
when the controller is called I am doing this inside the controller
MDChannelModule.controller('channelHomeCtrl', function ($scope,$http) {
debugger;
MDBPMUtils.showWaitCursor();
$scope.query = {};
$scope.queryBy = 'description';
$scope.items =
$http.get("/mondrestws/services/binData/getListOfBinDataHeaderWithAccessRights/",{params : {foreignKeyType:"channelJSon"} }).then(function(res){
debugger;
channelData = res.data;
if(res.data.length > 0){
document.getElementById("emptyDTImg").style.display = "none";
$scope.items = angular.fromJson(res.data);
}else{
$scope.items = {};
document.getElementById("emptyDTImg").style.display = "inline";
}
MDBPMUtils.showDefaultCursor();
},
function(data) {
MDBPMUtils.showMessage(data.status,data);
});
)}
even then the data is not loading in the HTML
<div ng-controller="channelHomeCtrl">
<div class="infobox infobox-green" id="{{i.binDataId}}" ng-click ="setSectedValue(i)" ng-style="{ 'width' : width}" style=" margin: 5px 5px 0px 5px; padding: 2px 3px 2px 9px; height: 55px; border: 1px solid; border-radius: 8px; " ng-repeat="i in items| filter:query" >
<div class="infobox-icon">
<img src="../images/system/decisionTree.png"></img>
</div>
<div class="infobox-data">
<span class="infobox-data-number action-buttons">
<a style="font-size: 18px;white-space: nowrap;width: 18em;overflow: hidden;text-overflow: ellipsis;" title="{{getChannelName(i)}}" href="#/channelList" ng-click="setLink(i)">{{getChannelName(i)}}</a>
</span>
<div class="infobox-content" style="font-size: 12px">
<i class="fa fa-list-ol bigger-90 blue"></i> {{i.version}}
<span style="font-weight: bold;">
<i class="fa fa-clock-o bigger-130 blue"></i> {{i.binDataUpdateUserName}}
</span> on {{i.binDataUpdatedOn}}
</div>
</div>
</div>
</div>
You can try a $scope.$apply() in then function after data is loaded from the service.
$scope.items = angular.fromJson(res.data);
$scope.$apply();

PhotoSwipe with Polymer misalignment

I'm trying to make a small web-app using Polymer, based on the Nav + List + Detail-layout example they have provided. For part of my web-app I want to make a photo gallery. Luckily, there's an element for that. Unfortunately, there's no element for that. So I set myself upon the task of making my own custom-element that provides this functionality, based on PhotoSwipe.
So I decided to start simple by just implementing the code they provided as an example (see this CodePen). I simply copied this code into a custom element to see how it works, but unfortunately it doesn't work 100%. Here is the CodePen of the custom element.
For small displays the photo's display correctly, but when the screen is tall the 3rd and 4th photo don't align to the center anymore, but slide to the bottom right corner. The easiest way to see this is by pressing the full screen button when viewing an image. Below is an image where you can clearly see the offset to the bottom-right.
I rechecked and this isn't an issue in their own CodePen, but I can't seem to find if there are overlapping styles or something else is breaking it up. Any ides?
<dom-module id="photo-album">
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.css"> <!-- photoswipe/photoswipe.css -->
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/default-skin/default-skin.css"> <!-- photoswipe/default-skin/default-skin.css -->
<template>
<style>
:host {
display: block;
}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
</style>
<iron-ajax url="" params="" handle-as="json" last-response="{{photos}}"></iron-ajax>
<!--<template is="dom-repeat" items="{{photos}}">
<iron-image style="width:400px; height:400px; background-color: lightgray;" sizing="cover" preload fade src="{{item}}"></iron-image>
</template>-->
<div class="my-gallery" id="gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
<img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
<img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.min.js"></script> <!-- photoswipe/photoswipe.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe-ui-default.min.js"></script> <!-- photoswipe/photoswipe-ui-default.min.js -->
<script>
Polymer({
is: 'photo-album',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.initPhotoSwipeFromDOM();
},
initPhotoSwipeFromDOM: function(){
var gallerySelector = this.$.gallery;
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
options.showAnimationDuration = 0;
options.hideAnimationDuration = 0;
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = this.$.gallery;
galleryElements.setAttribute('data-pswp-uid', 1);
galleryElements.onclick = onThumbnailsClick;
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
}
});
</script>
</dom-module>
It seems you're missing styles from photoswipe.css.