Any DOM Element as a Thumbnail is now Supported

sezanzeb · Oct 29, 2017 · 085928a · 085928a
1 parent f8fb650
commit 085928a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 <img src="https://vanilla-js.com/assets/button.png">
 
-latest stable: https://github.com/sezanzeb/Hippo/releases/tag/1.0
+latest stable that has IE9 support: https://github.com/sezanzeb/Hippo/releases/tag/1.0
 
 - Can display text and tags aswell as images
 - Responsive
@@ -29,6 +29,26 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
 
  <img zoom="full.jpg" src="thumbnail.jpg"/>
 
+
+#### Open By Clicking Text
+
+
+ <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+ <script src="hippo-gallery.js"></script> 
+
+ <img zoom="full.jpg" alt="click here"/>
+
+
+style it the way you like using the following css:
+
+ img[zoom][alt]:not([src])
+ {
+  color: #ee3388;
+  text-decoration: underline;
+  cursor: pointer;
+ }
+
+
 #### Captions and Categories
 
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
@@ -38,9 +58,10 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
  <img category="category2" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
  <img category="category2" caption="caption3" zoom="pic3.jpg" alt="click here"/>
 
+
 #### Dom Elements Instead of Images
 
-<sub>Unstable</sub>
+<sub>IE9 support yet unclear</sub>
 
  <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
  <script src="hippo-gallery.js"></script>
@@ -58,4 +79,14 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
   </p>
   </div>
 
- </div>
+ </div>
+
+
+#### Any DOM Element as a Thumbnail is Supported
+
+<sub>IE9 support yet unclear</sub>
+
+ <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+ <script src="hippo-gallery.js"></script>
+
+ <div category="examplegroup" zoom="full.jpg" caption="Foo Bar"/>this is a div that will open an image</div>
diff --git a/example/example.html b/example/example.html
@@ -8,11 +8,11 @@
  <body>
  <!-- they don't need to be in the same container, that's one of the reasons why i wrote this -->
  <p><img category="examplegroup" zoom="pic2.jpeg" src="pic2.jpeg" caption='Picture One'/></p>
- <p><img category="examplegroup" zoom="pic1.jpeg" alt='"pic1 (click)"' caption='Picture Two'/></p>
+ <p><img category="examplegroup" zoom="pic1.jpeg" alt="this is an image alt tag" caption='Picture Two'/></p>
  <p><img category="examplegroup" zoom="pic3.jpeg" src="pic3.jpeg" caption='Picture Three'/></p>
  <p>
  <div class="hippo-zoomContent" category="examplegroup" caption='Text'/>
- <p>Click me</p>
+ <p>this shows content instead of images</p>
  <div class="hippo-zoomContent-content">
  <h1>Hello World</h1>
  <p>
@@ -83,6 +83,7 @@ <h1>Hello World</h1>
  </div>
  </div>
  </p>
+ <div category="examplegroup" zoom="pic2.jpeg" caption="Foo Bar"/>this is a div that will open an image</div>
  </body>
 </hmtl>
 
@@ -95,7 +96,7 @@ <h1>Hello World</h1>
  color:#333;
  }
 
- img[zoom], .hippo-zoomContent
+ *[zoom], .hippo-zoomContent
  {
  width:400px;
  margin: 0px auto;

diff --git a/src/hippo-gallery.css b/src/hippo-gallery.css
@@ -44,7 +44,8 @@
 #hippo-next,
 #hippo-caption,
 #hippo-responsive-close-button,
-#hippo-caption-responsive {
+#hippo-caption-responsive,
+#hippo-loading {
  font-family: sans-serif;
  color: white;
 }
@@ -216,7 +217,7 @@
  transition: none !important;
 }
 
-img[zoom] {
+*[zoom] {
  cursor: pointer;
  border-radius: 2px;
  position: relative;

diff --git a/src/hippo-gallery.js b/src/hippo-gallery.js
@@ -27,7 +27,7 @@ window.addEventListener("load", function(e) {
  '</div>')
 
  // zoom into picture listener
- var elems = document.querySelectorAll("img[zoom], .hippo-zoomContent")
+ var elems = document.querySelectorAll("*[zoom], .hippo-zoomContent")
  for(var i = 0;i < elems.length; i++)
  {
  elems[i].addEventListener("click", function(e) {
@@ -69,6 +69,9 @@ window.addEventListener("load", function(e) {
  getElemById("hippo-div").addEventListener("click", function(e) {
  e.stopPropagation()
  })
+
+ // onclick close listener
+ getElemById("hippo-lightbox-bg").addEventListener("click", close)
 })
 
 
@@ -86,7 +89,6 @@ function load(event) {
  dir = event.target.dirString
  elem = event.target.nextImage
  // disable listeners. Listeners are going to be created from scratch
- getElemById("hippo-lightbox-bg").removeEventListener("click", close)
  getElemById(dir).removeEventListener("click", load)
 
  zoomIn(elem)
@@ -160,7 +162,7 @@ function handlegroup(elem, category) {
  var nextImg = false
  var previousImg = false
 
- var imagesList2 = document.querySelectorAll("img[category="+category+"], .hippo-zoomContent[category="+category+"]")
+ var imagesList2 = document.querySelectorAll("*[category="+category+"], .hippo-zoomContent[category="+category+"]")
 
  // get next and prev from the 'images' array
  for(var i = 0;i < imagesList2.length;i++)
@@ -217,8 +219,7 @@ function showLoadingIndicator() {
 
 /**
  * Either called by one of the buttons in load or by clicking on an image
- *
- * @param elem the image dom element that is going to be displayed in the lightbox
+ * @param elem the DOM element that is going to be displayed in the lightbox
  */
 function zoomIn(elem) {
 
@@ -229,9 +230,6 @@ function zoomIn(elem) {
  // height transition will start from scratch
  removeClass(getElemById("hippo-img-container"), "hippo-heightTransitionHasFinished")
 
- // close preview. This has to be done at the beginning, otherwise the lightbox might not close on errors
- getElemById("hippo-lightbox-bg").addEventListener("click", close)
-
  // show that the image is loading
  showLoadingIndicator()
 
@@ -244,6 +242,7 @@ function zoomIn(elem) {
  // get address of the zoomedin picture from getAttributes
  var zoomedSrc = elem.getAttribute("zoom")
 
+ // show the caption
  getElemById("hippo-caption").innerHTML = elem.getAttribute("caption")
  getElemById("hippo-caption-responsive").innerHTML = elem.getAttribute("caption")
 
@@ -253,8 +252,18 @@ function zoomIn(elem) {
  // the duration of the transition of #hippo-img-height for the opacity
  var hippoImgHeightOpacityTransitionDuration = 100
 
- // if zoom getAttribute exists
- if(elem.tagName == "IMG" && zoomedSrc !== false && zoomedSrc != "" && typeof zoomedSrc !== typeof undefined) {
+ // detect mode
+ var type
+ if(elem.getAttribute("zoom")) {
+ type = "IMG" // zooms in on an image
+ }
+ else {
+ type = "DIV" // displays DOM content
+ if(!elem.querySelector(".hippo-zoomContent-content"))
+ return console.error("The element",elem,"does not contain content to display and it does not have a zoom attribute. Take a look at the examples at https://github.com/sezanzeb/Hippo")
+ }
+
+ if(type == "IMG" && zoomedSrc !== false && zoomedSrc != "" && typeof zoomedSrc !== typeof undefined) {
  // load image
 
  // the following onload listener will add classes once it's loaded.
@@ -278,7 +287,7 @@ function zoomIn(elem) {
  // start loading
  preloadimg.src = zoomedSrc
  }
- else if(elem.tagName == "DIV") {
+ else if(type == "DIV") {
  // timeout for css transitions
  window.setTimeout(function() {
  // load div content
@@ -326,7 +335,6 @@ function handleNewContents(elem) {
 
  // though adding classes and changing heights based on javascript measurements is very unflexible
  // compared to a pure css solution, which is not available in this case.
- console.log(elem.offsetHeight, (window.innerHeight * (imgContainerHeight) / 100.0 - controlHeight))
  if(elem.offsetHeight > (window.innerHeight * imgContainerHeight / 100.0 - controlHeight)) {
  addClass(getElemById("hippo-img-container"), "hippo-tallImage")
  }