We Keep Coding

Custom downloading image in PhotoSwipe.js

I am using PhotoSwipe gallery for my project.
On the line 175 there is a code url:items[0].hqImage, I want to use index of current image instead of 0, how can I do that?
I've tried to use pswp.listen('afterChange', function() { }); event, like so:
//at the start of the document
var downloadIndex = 0;
//in initPhotoSwipeFromDOM function after gallery.listen('imageLoadComplete') event
gallery.listen('beforeChange', function() {
downloadIndex +=1;
console.log(downloadIndex)
;});
but when I am swiping my gallery it send me output like this:
0 1 2 3 after swiping the first image, 5 6 after second, and this code start iterating as it should, only on 5 out of 6 images.
Program code provided bellow.
(function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
if (pswpElement) {
var gallerySelector = '.masonry';
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = $(el).find('.masonry-item').toArray(),
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
imgEl,
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
imgEl = linkEl.children[0]; // <img>
size = linkEl.getAttribute('data-size');
size = size && size.split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: size && parseInt(size[0], 10) || imgEl.width,
h: size && parseInt(size[1], 10) || imgEl.height,
title: linkEl.getAttribute('data-caption'),
hqImage: linkEl.getAttribute('original-image')
};
if (figureEl.children.length > 1) {
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;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.className && el.className.toUpperCase() === 'MASONRY-ITEM');
});
if (!clickedListItem) {
return;
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = $(clickedListItem).closest(gallerySelector)[0],
childNodes = $(clickedGallery).find('.masonry-item').toArray(),
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
};
},
bgOpacity:0.85,
timeToIdle: 3000,
shareButtons: [
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
{id:'vk', label:'Share on VK', url:'https://vk.com/share.php?url={{url}}'},
{id:'download', label:'Download HQ image', url:items[0].hqImage, download:true } //items[index].hqImage
],
closeOnScroll:false,
};
// 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;
}
if (disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.listen('imageLoadComplete', function(index, item) {
var linkEl = item.el.children[0];
var img = item.container.children[0];
if (!linkEl.getAttribute('data-size')) {
linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);
item.w = img.naturalWidth;
item.h = img.naturalHeight;
gallery.invalidateCurrItems();
gallery.updateSize(true);
}
});
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
galleryElements[i].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);
}
};
// execute above function
initPhotoSwipeFromDOM(gallerySelector);
}
})();
<!--for the grid layout I use Isotope.js-->
<div class="masonry">
<div class="masonry-sizer"></div>
<div class="masonry-item">
<a href="../../img/paintings/Graia.jpg" data-caption="Graia<br>1" original-image='../../img/original/paintings/Graia.jpg'>
<img class="masonry-content" src="../../img/previews/paintings/Graia.webp">
</a>
</div>
</div>

So, I've changed photoswipe-ui-default.js line
getImageURLForShare: function( /* shareButtonData */ ) {
return pswp.currItem.src || '';
to
getImageURLForShare: function( /* shareButtonData */ ) {
return pswp.currItem.hqImage || '';
And it worked out for me.

Can not get child node in vanilla JavaScript for PhotoSwipe custom

I am customizing the plugin PhotoSwipe 4.1.1 in combination with jquery mobile 1.4.5 and jquery 2.1.4 in order to open a larger image of a thumbnail on mobile.
There is some old code in the application which seems to be written in vanilla JavaScript and some jQuery.
Somewhere in the code must be a problem, the selector seems not to be working as it might not be able to get the child nodes. I am including the entire funtion at the end of this question.
The most important parts:
html:
<div id="demo-test-gallery" class="demo-gallery">
<div id="cl_gallery">
<a href="big.jpg" data-size="720x960" data-details="title" style="" class="ui-link">
<img src="small.jpg" width="120" height="80">
<figure>test</figure>
</a>
</div>
</div>
Once I click on the thumbnail I do get this error:
Cannot read property 'split' of null
Error detail:
psw,psw-ui,psw-custom,v1.0.0.min.js:37 Uncaught TypeError: Cannot read property 'split' of null
at parseThumbnailElements (psw,psw-ui,psw-custom,v1.0.0.min.js:37)
at openPhotoSwipe (psw,psw-ui,psw-custom,v1.0.0.min.js:156)
at HTMLDivElement.onThumbnailsClick (psw,psw-ui,psw-custom,v1.0.0.min.js:118)
lines:
37: size = el.getAttribute('data-size').split('x');
156: items = parseThumbnailElements(galleryElement);
117: if(index >= 0) {
openPhotoSwipe( index, clickedGallery );
}
// nodelist object from consol.log
NodeList(8) [div#cl_gallery_main, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link, a.ui-link]
0: div#cl_gallery_main
1: a.ui-link
2: a.ui-link
3: a.ui-link
4: a.ui-link
5: a.ui-link
6: a.ui-link
7: a.ui-link
length: 8
__proto__: NodeList
// first thumb element of object from consol.log
1: a.ui-link
accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: href, 1: data-size, 2: data-details, 3: style, 4: class, href: href, data-size: data-size, data-details: data-details, style: style, class: class, …}
autocapitalize: ""
baseURI: "http://rex.watchgurus/omega/ala-kjdlkjshdl-kajsd-fkjh"
charset: ""
childElementCount: 2
childNodes: NodeList(2) [img, figure]
children: HTMLCollection(2) [img, figure]
classList: DOMTokenList ["ui-link", value: "ui-link"]
className: "ui-link"
clientHeight: 93
clientLeft: 0
clientTop: 0
clientWidth: 93
contentEditable: "inherit"
coords: ""
dataset: DOMStringMap {size: "900x1200", details: "Wiesbaden - 4.999 €"}
dir: ""
download: ""
draggable: true
firstChild: img
firstElementChild: img
hash: ""
hidden: false
The entire custom function:
// custom integration for PhotoSwipe Gallery
(function() {
var initPhotoSwipeFromDOM = function(gallerySelector) {
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
el,
childElements,
thumbnailEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
el = thumbElements[i];
// include only element nodes
if(el.nodeType !== 1) {
continue;
}
childElements = el.children;
size = el.getAttribute('data-size').split('x');
// create slide object
item = {
src: el.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
details: el.getAttribute('data-details')
};
item.el = el; // save link to element for getThumbBoundsFn
if(childElements.length > 0) {
item.msrc = childElements[0].getAttribute('src'); // thumbnail url
if(childElements.length > 1) {
item.title = childElements[1].innerHTML; // caption (contents of figure)
}
}
var mediumSrc = el.getAttribute('data-med');
if(mediumSrc) {
size = el.getAttribute('data-med-size').split('x');
// "medium-sized" image
item.m = {
src: mediumSrc,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
// original image
item.o = {
src: item.src,
w: item.w,
h: item.h
};
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return el.tagName === 'A';
});
if(!clickedListItem) {
return;
}
var clickedGallery = clickedListItem.parentNode;
var 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) {
openPhotoSwipe( index, clickedGallery );
}
return false;
};
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) { // pid=1
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 = {
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options->getThumbBoundsFn section of docs for more info
var thumbnail = items[index].el.children[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
},
addCaptionHTMLFn: function(item, captionEl, isFake) {
if(!item.title) {
captionEl.children[0].innerText = '';
return false;
}
captionEl.children[0].innerHTML = item.title + '<br/><small>Standort: ' + item.details + '</small>';
return true;
},
};
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 {
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
if(disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
// see: http://photoswipe.com/documentation/responsive-images.html
var realViewportWidth,
useLargeImages = false,
firstResize = true,
imageSrcWillChange;
gallery.listen('beforeResize', function() {
var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
dpiRatio = Math.min(dpiRatio, 2.5);
realViewportWidth = gallery.viewportSize.x * dpiRatio;
if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
if(!useLargeImages) {
useLargeImages = true;
imageSrcWillChange = true;
}
} else {
if(useLargeImages) {
useLargeImages = false;
imageSrcWillChange = true;
}
}
if(imageSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if(firstResize) {
firstResize = false;
}
imageSrcWillChange = false;
});
gallery.listen('gettingData', function(index, item) {
// if( useLargeImages ) {
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
// } else {
// item.src = item.m.src;
// item.w = item.m.w;
// item.h = item.m.h;
// }
});
gallery.init();
};
// select all gallery elements
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].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 );
}
};
initPhotoSwipeFromDOM('#cl_gallery');
})();
Why is Photoswipe not able to retrieve the image size? It is inside the html element.

photoswipe js "Cannot read property 'x' of undefined"

Library return me error on photoswipe.min.js:
"Uncaught TypeError: Cannot read property 'x' of undefined"
myPhotoswipe code is the same on official site get start:
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
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('span')[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;
}
if(disableAnimation) {
options.showAnimationDuration = 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 = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i+1);
galleryElements[i].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 );
}
};
// execute above function
initPhotoSwipeFromDOM('.my-gallery');

Making sure to set a height of the parent element containing the photoswipe gallery resolved this issue for me.
E.g. I set the parent element to have height: 100vh;

Removing an inline style on the pswp template to display none fixed this for me. For example,
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none">
should be
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

PhotoSwipe multiple photos in modal

I am trying to display multiple photos in the modal window once a user clicks a photo from the gallery
Here is the Codepen Demo
The problem I'm facing is that the photos aren't being pulled from the gallery but from an external source, for instance lets say these two photos would be displayed inside the modal window once a user clicks a gallery photo, image 1, image 2.
Since photoswipe already hooks into the existing gallery (gridrotator) from the demo, I'm having difficulty also attaching additional images.
Once I can get multiple images I can use photoswipes built in arrows or create my own pagination to control the photos.
I'm unsure how to hook into additional image sources when I'm already hooking into gridrotator as the docs state here Photoswipe Docs Demo
Here is the Javascript
var initPhotoSwipeFromDOM = function(gallerySelector) {
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
el,
childElements,
thumbnailEl,
size,
item;
for (var i = 0; i < numNodes; i++) {
el = thumbElements[i];
// include only element nodes
if (el.nodeType !== 1) {
continue;
}
childElements = el.children[0];
size = el.getAttribute('data-size').split('x');
// create slide object
item = {
src: el.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
author: el.getAttribute('data-author')
};
item.el = el; // save link to element for getThumbBoundsFn
if (childElements.length > 0) {
item.msrc = childElements[0].getAttribute('src'); // thumbnail url
item.title = childElements[0].innerHTML; // caption (contents of figure)
}
var mediumSrc = el.getAttribute('data-med');
if (mediumSrc) {
size = el.getAttribute('data-med-size').split('x');
// "medium-sized" image
item.m = {
src: mediumSrc,
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
// original image
item.o = {
src: item.src,
w: item.w,
h: item.h
};
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && (fn(el) ? el : closest(el.parentNode, fn));
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return el.tagName === 'A';
});
if (!clickedListItem) {
return;
}
var clickedGallery = clickedListItem.parentNode;
var 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) {
openPhotoSwipe(index, clickedGallery);
}
return false;
};
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if (hash.length < 5) { // pid=1
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);
}
if (!params.hasOwnProperty('pid')) {
return params;
}
params.pid = parseInt(params.pid, 10);
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
index: index,
history: false,
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options->getThumbBoundsFn section of docs for more info
var thumbnail = items[index].el.children[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {
x: rect.left,
y: rect.top + pageYScroll,
w: rect.width
};
},
addCaptionHTMLFn: function(item, captionEl, isFake) {
if (!item.title) {
captionEl.children[0].innerText = '';
return false;
}
captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
return true;
}
};
var radios = document.getElementsByName('gallery-style');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
if (radios[i].id == 'radio-all-controls') {
} else if (radios[i].id == 'radio-minimal-black') {
options.mainClass = 'pswp--minimal--dark';
options.barsSize = {
top: 0,
bottom: 0
};
options.captionEl = false;
options.fullscreenEl = false;
options.shareEl = false;
options.bgOpacity = 0.85;
options.tapToClose = true;
options.tapToToggleControls = false;
}
break;
}
}
if (disableAnimation) {
options.showAnimationDuration = 0;
}
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
// see: http://photoswipe.com/documentation/responsive-images.html
var realViewportWidth,
useLargeImages = false,
firstResize = true,
imageSrcWillChange;
gallery.listen('beforeResize', function() {
var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
dpiRatio = Math.min(dpiRatio, 2.5);
realViewportWidth = gallery.viewportSize.x * dpiRatio;
if (realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
if (!useLargeImages) {
useLargeImages = true;
imageSrcWillChange = true;
}
} else {
if (useLargeImages) {
useLargeImages = false;
imageSrcWillChange = true;
}
}
if (imageSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if (firstResize) {
firstResize = false;
}
imageSrcWillChange = false;
});
gallery.listen('gettingData', function(index, item) {
if (useLargeImages) {
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
} else {
item.src = item.o.src;
item.w = item.o.w;
item.h = item.o.h;
}
});
gallery.init();
};
// select all gallery elements
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if (hashData.pid > 0 && hashData.gid > 0) {
openPhotoSwipe(hashData.pid - 1, galleryElements[hashData.gid - 1], true);
}
};
initPhotoSwipeFromDOM('.gallery');
})();
This demo uses Animated Responsive Image Grid & photoswipe

var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
el,
childElements,
thumbnailEl,
size,
item;
for (var i = 0; i < numNodes; i++) {
el = thumbElements[i]; //li
el = el.children[0]; //a
Add one line to make 'el' right Node.
It's work http://codepen.io/anon/pen/rxgMww

Find a class inside another class and do some browser action

I am trying to find a specific class (profileCard) and then check if that class has a different class (followStatus) inside it. If it does have followStatus inside it, I want to click a button which is also inside the profileCard class. here is my code:
var profileCard = document.getElementsByClassName('ProfileCard');
var unfollowButtons = profileCard.getElementsByClassName('button-text');
var followStatus = profileCard.getElementsByClassName('FollowStatus');
for (var i = 0; i < profileCard.length; i++) {
if (followStatus[i] != null) {
unfollowButtons[i].click();
}
}
I want to use this function in Chrome simply pasting it into the console, but the code seemingly does nothing: the button is never clicked. Where is the error in my code and how can I fix that?

It's more convenient to use querySelector method here inside the loop over .profileCards elements:
var profileCards = document.querySelectorAll('.ProfileCard');
for (var i = 0; i < profileCards.length; i++) {
if (profileCards[i].querySelector('.FollowStatus')) {
var button = profileCards[i].querySelector('.button-text');
if (button) {
button.click();
}
}
}

Well i suggest programming some sort of Node selector or using http://jquery.com/.
Please note document.getElementsByClass name is not compatible in some browsers.
Here is a node selector i just programmed which solves that.
N$ = (function(){
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
if (!window.getComputedStyle) {//IE
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
var N$_CURRENT_EVENT_THIS = null;
var DOM_N$ = function(selector){
if(typeof selector == typeof ""){
this.selector = selector;
this.nodes = $prepare(this.selector);
this.win = window;
this.doc = document;
}else if(typeof selector == typeof {}){
this.selector = N$_CURRENT_EVENT_THIS.selector;
this.nodes = $prepare(this.selector);
this.win = window;
this.doc = document;
}
this.getSelector=function(){
return this.selector;
};
this.eachNode = function(func){
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
N$_CURRENT_EVENT_THIS = that;
func(this.nodes[i]);
N$_CURRENT_EVENT_THIS = null;
};
};
this.css = function(attr, value){
N$_CURRENT_EVENT_THIS = this;
var attribute = "";
if(attr.indexOf('-') !== -1){
var split_attr = attr.split('-');
for (var i = 0; i < split_attr.length; i++) {
if(i != 0)
attribute += split_attr[i].charAt(0).toUpperCase() + split_attr[i].slice(1);
else
attribute += split_attr[i].charAt(0).toLowerCase() + split_attr[i].slice(1);
};
}else{
attribute = attr;
}
var properties = new Array();
for (var i = 0; i < this.nodes.length; i++) {
if(typeof value != 'undefined'){
this.nodes[i].style[attribute] = value;
}
properties.push(window.getComputedStyle(this.nodes[i], null).getPropertyValue(attr));
};
return properties;
};
this.addEvent = function(event_, func){
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
var events = this.nodes[i].events || {};
if(node.addEventListener){
if((event_) in events){
node.removeEventListener(event_, events[event_], true);
var tmp___ = events[event_];
var tmp__ = function(){
this.bar = "hello";
N$_CURRENT_EVENT_THIS = that;
tmp___(node, event_);
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
};
node.addEventListener(event_, tmp__, true);
events[event_] = tmp__;
}else{
var tmp__ = function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
};
node.addEventListener(event_, tmp__, true);
events[event_] = tmp__;
}
}else if(node.attachEvent){
var ie_event = 'on' + event_;
if(event_ in events){
node.attachEvent(ie_event, function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
events[event_](node, event_);
N$_CURRENT_EVENT_THIS = null;
});
}else{
node.attachEvent(ie_event, function(){
N$_CURRENT_EVENT_THIS = that;
func(node, event_);
N$_CURRENT_EVENT_THIS = null;
});
}
events[event_] = func;
}
this.nodes[i].events = events;
}
};
this.removeEvent = function(event_){
N$_CURRENT_EVENT_THIS = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
var events = this.nodes[i].events || {};
if(node.removeEventListener){
if((event_) in events){
node.removeEventListener(event_, events[event_], true);
events[event_] = null;
}
}else if(node.detachEvent){
var ie_event = 'on' + event_;
if((event_) in events){
node.detachEvent(ie_event, events[event_]);
delete events[event_];
}
}
}
};
this.text = function(str){
N$_CURRENT_EVENT_THIS = this;
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[i];
node.innerHTML = '';
node.appendChild(document.createTextNode(str));
}
};
this.animate = function(func, from, to, speed){
var nodes = this.nodes;
var that = this;
for (var i = 0; i < this.nodes.length; i++) {
(function animate(func, from, to, speed, i){
if(from >= to){
N$_CURRENT_EVENT_THIS = that;
func(nodes[i], to);
N$_CURRENT_EVENT_THIS = null;
}else{
N$_CURRENT_EVENT_THIS = that;
func(nodes[i], from);
N$_CURRENT_EVENT_THIS = null;
setTimeout(
function(){
animate(func, from +1, to, speed, i);
}, speed
);
}
})(func, from, to, speed, i);
}
};
this.appendNode = function(tagname, innerHTML){
for (var i = 0; i < this.nodes.length; i++) {
var new_node = document.createElement(tagname);
new_node.innerHTML = innerHTML;
this.nodes[i].appendChild(new_node);
}
};
this.removeNode = function(){
for (var i = 0; i < this.nodes.length; i++) {
this.nodes[i].parentNode.removeChild(this.nodes[i]);
}
};
function $prepare(str){
str = str.replace(/(\s+>\s+)/g,'>');
str = str.replace(/(\s+)/g,' ');
var str_ = str;
var querys = str.split(/[\s\>]+/);
var querys_des = Array();
var ascender = new Array();
for (var i = 0; i < str_.length; i++) {
if(str_[i] == ">" || str_[i] == " "){
var tmp_ = (str_[i] == ">")? 'next_child' : 'ascended';
ascender.push( tmp_);
}
};
var recognizes = new Array();
for (var i = 0; i < querys.length; i++) {
var asc_child = null;
asc_child = ascender[i-1];
var tmp_ = {
"selector": querys[i],
"i":i
};
recognizes[i] = recognize(querys[i]);
if(i != 0){
tmp_["asc_child"] = asc_child;
}else{
tmp_["base_selector"] = true;
}
querys_des.push(tmp_);
};
return $select(querys_des, recognizes);
}
function $select(querys_des, recognizes, parent_){
var parents = parent_ || null;
for (var i = 0; i < querys_des.length; i++) {
if('base_selector' in querys_des[i]){
parents = recognizes[querys_des[i]['i']];
}else if('asc_child' in querys_des[i]){
var cur_children = recognizes[querys_des[i]['i']];
if(querys_des[i]['asc_child'] == 'next_child'){
var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
parents = compatible;
}else if(querys_des[i]['asc_child'] == 'ascended'){
var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
parents = compatible;
}
}
};
return parents;
}
function compatible_children(parents, children, type){
var ret = new Array();
for (var a = 0; a < parents.length; a++) {
for (var b = 0; b < children.length; b++) {
if(type == 'next_child'){
if(parents[a] == children[b].parentNode){
if(ret.indexOf(children[b]) == -1)
ret.push(children[b]);
}
}else if(type == 'ascended'){
if(isin(parents[a], children[b])){
if(ret.indexOf(children[b]) == -1)
ret.push(children[b]);
}
}
}
}
return ret;
}
function isin(parent, child){
var child_ = child;
var ret = new Array();
while((child_ = child_.parentNode) && child_ != document.body){
if(parent == child_){
return true;
}
}
return false;
}
function recognize(str){
var identifier = new Array();
var id_ = false;
var class_ = false;
var dom_ = false;
if(str.indexOf("#") >= 0){
id_ = true;
var tmp = str.split("#")[1];
if(str.indexOf(".") >= 0){
identifier['ID'] = tmp.split(".")[0];
}else{
identifier['ID'] = tmp;
}
}
if(str.indexOf(".") >= 0){
class_ = true;
var tmp = str.split(".")[1];
if(str.indexOf("#") >= 0){
identifier['CLASS'] = tmp.split("#")[0];
}else{
identifier['CLASS'] = tmp;
}
}
if(id_ && class_){
if(str.indexOf("#") < str.indexOf(".")){
var tmp = str.split("#")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else{
var tmp = str.split(".")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}
}else if(id_){
var tmp = str.split("#")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else if(class_){
var tmp = str.split(".")[0];
if(tmp.length > 0){
dom_ = true;
identifier['DOM'] = tmp;
}
}else{
if(str.length > 0){
dom_ = true;
identifier['DOM'] = str;
}
}
var x;
if(class_){
if(typeof document.getElementsByClassName !== 'function') {//Old browsers
x = document.body.getElementsByTagName("*");
}else{
x = document.getElementsByClassName(identifier['CLASS']);
}
}else if(dom_){
x = document.getElementsByTagName(identifier['DOM']);
}else if(id_){
x = document.body.getElementsByTagName("*");
for (var i = 0; i < x.length; i++) {
if(x[i].getAttribute("id") != identifier['ID']){
delete x[i];
}
};
}
var elements = new Array();
for (var i = 0; i < x.length; i++) {
if(id_ && class_){
if(x[i].getAttribute("id") == identifier["ID"] && x[i].getAttribute("class") == identifier["CLASS"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else if(id_){
if(x[i].getAttribute("id") == identifier["ID"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else if(class_){
if(x[i].getAttribute("class") == identifier["CLASS"]){
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
}else{
if(dom_){
if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
elements.push(x[i]);
}
}else{
elements.push(x[i]);
}
}
};
return elements;
}
}
var selectors = new Array();
return function(selector){
var N$_new = new DOM_N$(selector);
var N$_ = null;
if(selectors.length > 0){
for (var i = selectors.length - 1; i >= 0; i--) {
if(selectors[i].selector == selector){
var not_in = new Array();
for (var b = N$_new.nodes.length - 1; b >= 0; b--) {
if(selectors[i].nodes.indexOf(N$_new.nodes[b]) == -1){
not_in.push(N$_new.nodes[b]);
}
};
for (var a = not_in.length - 1; a >= 0; a--) {
if(selectors[i].nodes.indexOf(not_in[a]) == -1){
selectors[i].nodes.push(not_in[a]);
}
};
N$_ = selectors[i];
break;
}else{
N$_ = N$_new;
/*
if(N$_.nodes.length > 0){
selectors.push(N$_);
}*/
}
};
}else{
N$_ = N$_new;
if(N$_.nodes.length > 0){
selectors.push(N$_);
}
}
return N$_;
};
})();
use with:
N$('.ProfileCard .FollowStatus').addEvent('click', function(node_, event_){
//Do something.
//node_ is a native Node
});