From 7af3742b014bf1f9211935283be0bf372f8494a5 Mon Sep 17 00:00:00 2001 From: DevOrc Date: Tue, 25 Sep 2018 17:24:06 -0400 Subject: [PATCH] fix photos --- build.js | 23 +- docs/css/styles.css | 17 + docs/gallery.html | 150 +- docs/js/photos.js | 206 + docs/photoswipe/default-skin/default-skin.css | 482 +++ docs/photoswipe/default-skin/default-skin.png | Bin 0 -> 547 bytes docs/photoswipe/default-skin/default-skin.svg | 1 + docs/photoswipe/default-skin/preloader.gif | Bin 0 -> 866 bytes docs/photoswipe/photoswipe-ui-default.js | 861 ++++ docs/photoswipe/photoswipe-ui-default.min.js | 4 + docs/photoswipe/photoswipe.css | 179 + docs/photoswipe/photoswipe.js | 3734 +++++++++++++++++ docs/photoswipe/photoswipe.min.js | 4 + src/css/styles.css | 17 + src/gallery.html | 69 +- src/js/photos.js | 206 + src/photoswipe/default-skin/default-skin.css | 482 +++ src/photoswipe/default-skin/default-skin.png | Bin 0 -> 547 bytes src/photoswipe/default-skin/default-skin.svg | 1 + src/photoswipe/default-skin/preloader.gif | Bin 0 -> 866 bytes src/photoswipe/photoswipe-ui-default.js | 861 ++++ src/photoswipe/photoswipe-ui-default.min.js | 4 + src/photoswipe/photoswipe.css | 179 + src/photoswipe/photoswipe.js | 3734 +++++++++++++++++ src/photoswipe/photoswipe.min.js | 4 + templates/photobody.html | 65 + templates/photoitem.html | 8 + templates/photoswipe.html | 5 + 28 files changed, 11257 insertions(+), 39 deletions(-) create mode 100644 docs/js/photos.js create mode 100644 docs/photoswipe/default-skin/default-skin.css create mode 100644 docs/photoswipe/default-skin/default-skin.png create mode 100644 docs/photoswipe/default-skin/default-skin.svg create mode 100644 docs/photoswipe/default-skin/preloader.gif create mode 100644 docs/photoswipe/photoswipe-ui-default.js create mode 100644 docs/photoswipe/photoswipe-ui-default.min.js create mode 100644 docs/photoswipe/photoswipe.css create mode 100644 docs/photoswipe/photoswipe.js create mode 100644 docs/photoswipe/photoswipe.min.js create mode 100644 src/js/photos.js create mode 100644 src/photoswipe/default-skin/default-skin.css create mode 100644 src/photoswipe/default-skin/default-skin.png create mode 100644 src/photoswipe/default-skin/default-skin.svg create mode 100644 src/photoswipe/default-skin/preloader.gif create mode 100644 src/photoswipe/photoswipe-ui-default.js create mode 100644 src/photoswipe/photoswipe-ui-default.min.js create mode 100644 src/photoswipe/photoswipe.css create mode 100644 src/photoswipe/photoswipe.js create mode 100644 src/photoswipe/photoswipe.min.js create mode 100644 templates/photobody.html create mode 100644 templates/photoitem.html create mode 100644 templates/photoswipe.html diff --git a/build.js b/build.js index 43ba7b1..a747889 100644 --- a/build.js +++ b/build.js @@ -4,13 +4,32 @@ const {ncp} = require("ncp") const del = require("del") function injectTemplates(filename) { - let html = fs.readFileSync(filename).toString() + let html = fs.readFileSync(filename).toString(); + + //Inject templates html = html.replace(/{{{.*}}}/g, (match, x, y) => { return fs.readFileSync(`templates/${match.replace(/[{}]/g, "")}`).toString() }) + + let photoItemSrc = fs.readFileSync("templates/photoitem.html").toString(); + + //Inject images + html = html.replace(/{img}(.|\n|\r)*?{img}/g, (match, x, y) => { + match = match.replace("{img}", "{"); + match = match.replace("{img}", "}"); + + json = JSON.parse(match); + + output = photoItemSrc.replace("[IMG_SRC]", json.src); + output = output.replace("[IMG_SRC]", json.src); + output = output.replace("[CAPTION]", json.caption); + output = output.replace("[SIZE]", json.size); + + return output + }) + fs.writeFileSync(filename, html) console.log("---parsed ", filename) - } function fromDir(startPath, filter) { diff --git a/docs/css/styles.css b/docs/css/styles.css index 17d384c..bc17758 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -40,6 +40,23 @@ hr { background-color: #FFFFFF; } +.title-caption{ + text-align: center; + max-width: 420px; + margin: 0 auto; + font-size: 30px; + padding: 10px; + line-height: 30px; + color: white; + font-weight: bold; +} + +.gallery-img { + max-width: 100%; /* you can use % */ + height: auto; + max-height: 500px; +} + .page-box { background: #1892ca; padding-left: 5px; diff --git a/docs/gallery.html b/docs/gallery.html index 15d0b1f..23c606c 100644 --- a/docs/gallery.html +++ b/docs/gallery.html @@ -7,9 +7,14 @@ + + + + + - +
-
-

Gallery

- - - - - - - - - - - - - + +


+ + + +
July 4th Fair
+ +
+
+ + + +
+
+
+ +
+
+ + + +
+
+
+ +
+
+ + + +
+
+
+ + + +

+
The Tee + Shirt Cannon
+
+ +
+
+ + + +
The tee shirt cannon at the high school football game
+
+
+ +
+
+ + + +
A test of the tee shirt cannons LEDs
+
+
+ + + + + +
diff --git a/docs/js/photos.js b/docs/js/photos.js new file mode 100644 index 0000000..c3818e6 --- /dev/null +++ b/docs/js/photos.js @@ -0,0 +1,206 @@ +function loadGallery() { + + // execute above function + initPhotoSwipeFromDOM('.my-gallery-item'); +} + +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]; //
element + + // include only element nodes + if (figureEl.nodeType !== 1) { + continue; + } + + linkEl = figureEl.children[0]; // 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) { + //
content + item.title = figureEl.children[1].innerHTML; + } + + if (linkEl.children.length > 0) { + // 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; + } + + 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); + } +}; \ No newline at end of file diff --git a/docs/photoswipe/default-skin/default-skin.css b/docs/photoswipe/default-skin/default-skin.css new file mode 100644 index 0000000..ed609f1 --- /dev/null +++ b/docs/photoswipe/default-skin/default-skin.css @@ -0,0 +1,482 @@ +/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ +/* + + Contents: + + 1. Buttons + 2. Share modal and links + 3. Index indicator ("1 of X" counter) + 4. Caption + 5. Loading indicator + 6. Additional styles (root element, top bar, idle state, hidden state, etc.) + +*/ +/* + + 1. Buttons + + */ +/* + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + + + +
+
+
+ + + + + + \ No newline at end of file diff --git a/templates/photoitem.html b/templates/photoitem.html new file mode 100644 index 0000000..dbe0efc --- /dev/null +++ b/templates/photoitem.html @@ -0,0 +1,8 @@ +
+
+ + + +
[CAPTION]
+
+
\ No newline at end of file diff --git a/templates/photoswipe.html b/templates/photoswipe.html new file mode 100644 index 0000000..6f75e8c --- /dev/null +++ b/templates/photoswipe.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file