From ed93409f9a01717c612c3d03ff95966d547f4cc7 Mon Sep 17 00:00:00 2001
From: prashantsinalkar
Date: Mon, 6 Aug 2018 16:06:03 +0530
Subject: added image gallary
---
static/website/bootstrap-css/custom.css | 20 ++++
static/website/js/custom.js | 93 ++++++++++++++++++
static/website/templates/index.html | 169 ++++++++++++++++++++++++--------
3 files changed, 242 insertions(+), 40 deletions(-)
create mode 100644 static/website/js/custom.js
(limited to 'static')
diff --git a/static/website/bootstrap-css/custom.css b/static/website/bootstrap-css/custom.css
index 25a4231..0f03c3b 100755
--- a/static/website/bootstrap-css/custom.css
+++ b/static/website/bootstrap-css/custom.css
@@ -12,3 +12,23 @@ if it's not present, don't show loader */
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
+
+.btn:focus, .btn:active, button:focus, button:active {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+#image-gallery .modal-footer{
+ display: block;
+}
+
+.thumb{
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+.modal-header {
+ border-bottom: none; !important
+}
+.modal-footer {
+ border-top: none; !important
+}
diff --git a/static/website/js/custom.js b/static/website/js/custom.js
new file mode 100644
index 0000000..2573428
--- /dev/null
+++ b/static/website/js/custom.js
@@ -0,0 +1,93 @@
+let modalId = $('#image-gallery');
+
+$(document)
+ .ready(function () {
+
+ loadGallery(true, 'a.thumbnail');
+
+ //This function disables buttons when needed
+ function disableButtons(counter_max, counter_current) {
+ $('#show-previous-image, #show-next-image')
+ .show();
+ if (counter_max === counter_current) {
+ $('#show-next-image')
+ .hide();
+ } else if (counter_current === 1) {
+ $('#show-previous-image')
+ .hide();
+ }
+ }
+
+ /**
+ *
+ * @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
+ * @param setClickAttr Sets the attribute for the click handler.
+ */
+
+ function loadGallery(setIDs, setClickAttr) {
+ let current_image,
+ selector,
+ counter = 0;
+
+ $('#show-next-image, #show-previous-image')
+ .click(function () {
+ if ($(this)
+ .attr('id') === 'show-previous-image') {
+ current_image--;
+ } else {
+ current_image++;
+ }
+
+ selector = $('[data-image-id="' + current_image + '"]');
+ updateGallery(selector);
+ });
+
+ function updateGallery(selector) {
+ let $sel = selector;
+ current_image = $sel.data('image-id');
+ $('#image-gallery-title')
+ .text($sel.data('title'));
+ $('#image-gallery-image')
+ .attr('src', $sel.data('image'));
+ disableButtons(counter, $sel.data('image-id'));
+ }
+
+ if (setIDs == true) {
+ $('[data-image-id]')
+ .each(function () {
+ counter++;
+ $(this)
+ .attr('data-image-id', counter);
+ });
+ }
+ $(setClickAttr)
+ .on('click', function () {
+ updateGallery($(this));
+ });
+ }
+ });
+
+// build key actions
+$(document)
+ .keydown(function (e) {
+ switch (e.which) {
+ case 37: // left
+ if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {
+ $('#show-previous-image')
+ .click();
+ }
+ break;
+
+ case 39: // right
+ if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {
+ $('#show-next-image')
+ .click();
+ }
+ break;
+
+ default:
+ return; // exit this handler for other keys
+ }
+ e.preventDefault(); // prevent the default action (scroll / move caret)
+ });
+
diff --git a/static/website/templates/index.html b/static/website/templates/index.html
index f2e5896..52e68f7 100644
--- a/static/website/templates/index.html
+++ b/static/website/templates/index.html
@@ -19,6 +19,7 @@
+
+