Update jBox.js

Author: StephanWagner

Demo/Demo.css

@@ -19,7 +19,7 @@ body {
 }
 
 main {
-    padding: 20px 0;
+  padding: 20px 0;
 }
 
 .container {
@@ -51,30 +51,30 @@ h2 {
 
 .targets-wrapper:after,
 .targets-wrapper:before {
-    content: " ";
-    display: table;
+  content: " ";
+  display: table;
 }
 
 .targets-wrapper:after {
-    clear: both;
+  clear: both;
 }
 
 .target,
 .target-click,
 .target-notice {
   cursor: default;
-    font-size: 13px;
-    line-height: 52px;
-    height: 52px;
-    border-radius: 2px;
-    border: 1px solid #e2e2e2;
-    text-align: center;
-    background: #fafafa;
-    position: relative;
-    text-transform: uppercase;
-    float: left;
-    width: calc(25% - 10px);
-    margin: 5px;
+  font-size: 13px;
+  line-height: 52px;
+  height: 52px;
+  border-radius: 2px;
+  border: 1px solid #e2e2e2;
+  text-align: center;
+  background: #fafafa;
+  position: relative;
+  text-transform: uppercase;
+  float: left;
+  width: calc(25% - 10px);
+  margin: 5px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -94,8 +94,8 @@ h2 {
 
 .demo-img {
   float: left;
-    width: calc(25% - 10px);
-    margin: 5px;
+  width: calc(25% - 10px);
+  margin: 5px;
 }
 
 .demo-img > img {
@@ -117,7 +117,7 @@ h2 {
   .target,
   .target-click,
   .target-notice {
-      width: calc(50% - 10px);
+    width: calc(50% - 10px);
   }
 
   .demo-img > img {
@@ -232,12 +232,12 @@ header a:hover {
 
 .clearfix:after,
 .clearfix:before {
-    content: " ";
-    display: table;
+  content: " ";
+  display: table;
 }
 
 .clearfix:after {
-    clear: both;
+  clear: both;
 }
 
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

Demo/Demo.html

@@ -65,11 +65,11 @@ <h2>Notice</h2>
 <h2>Image</h2>
 
 <div class="targets-wrapper">
-<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo-img/CIMG4778_large.jpg" data-jbox-image="gallery1" title="Navigate with your keyboard: Press the [right] or [left] key"><img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4778_small.jpg" alt=""></a>
-<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo-img/CIMG4547_large.jpg" data-jbox-image="gallery1" title="jBox is smart, the next image gets preloaded"><img src="https://stephanwagner.me/img/jBox/demo-img/CIMG4547_small.jpg" alt=""></a>
-<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo-img/CIMG6771_large.jpg" data-jbox-image="gallery1" title="You can easily group your images into galleries"><img src="https://stephanwagner.me/img/jBox/demo-img/CIMG6771_small.jpg" alt=""></a>
-<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo-img/CIMG8142_large.jpg" data-jbox-image="gallery1" title="As usual, attaching jBox to images is easy as pie"><img src="https://stephanwagner.me/img/jBox/demo-img/CIMG8142_small.jpg" alt=""></a>
-<a href="https://stephanwagner.me/img/jBox/demo-img/NOT-FOUND.jpg" data-jbox-image="gallery1" title="You can adjust this image-not-found notice with CSS"></a>
+<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image1.jpg" data-jbox-image="gallery1" title="Navigate with your keyboard: Press the [right] or [left] key"><img src="https://stephanwagner.me/img/jBox/demo/image1-preview.jpg" alt=""></a>
+<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image2.jpg" data-jbox-image="gallery1" title="jBox is smart, the next image gets preloaded"><img src="https://stephanwagner.me/img/jBox/demo/image2-preview.jpg" alt=""></a>
+<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image3.jpg" data-jbox-image="gallery1" title="You can easily group your images into galleries"><img src="https://stephanwagner.me/img/jBox/demo/image3-preview.jpg" alt=""></a>
+<a class="demo-img" href="https://stephanwagner.me/img/jBox/demo/image4.jpg" data-jbox-image="gallery1" title="As usual, attaching jBox to images is easy as pie"><img src="https://stephanwagner.me/img/jBox/demo/image4-preview.jpg" alt=""></a>
+<a href="https://stephanwagner.me/img/jBox/demo/NOT-FOUND.jpg" data-jbox-image="gallery1" title="You can adjust this image-not-found notice with CSS"></a>
 </div>
 
 <h2>Playground</h2>

Demo/Playground/Playground.Avatar.css

@@ -124,26 +124,25 @@
 }
 
 .AvatarsCollection#DislikedAvatars {
-  left: 5px;
+  left: 4px;
 }
 
 .AvatarsCollection#LikedAvatars {
-  right: 5px;
+  right: 4px;
 }
 
 .AvatarsCollection > div {
   width: 47px;
   height: 45px;
+  padding: 0 1px;
 }
 
 .AvatarsCollection#DislikedAvatars > div {
   float: left;
-  padding-right: 2px;
 }
 
 .AvatarsCollection#LikedAvatars > div {
   float: right;
-  padding-left: 2px;
 }
 
 .AvatarsCollection > div > div {
@@ -158,12 +157,10 @@
 
 .AvatarsCollection#DislikedAvatars > div > div {
   border-color: #e33;
-  padding-right: 2px;
 }
 
 .AvatarsCollection#LikedAvatars > div > div {
   border-color: #7d0;
-  padding-left: 2px;
 }
 
 .AvatarsCollection > div > div > img {

Source/jBox.js

@@ -42,10 +42,11 @@ function jBox(type, options) {
     preventDefault: false,       // Prevent the default event when opening jBox, e.g. don't follow the href in a link
 
     // Content
-    title: null,                 // Adds a title to your jBox
     content: null,               // You can use HTML or a jQuery element, e.g. jQuery('#jBox-content'). The elements will be appended to the content element and then made visible, so hide them with style="display: none" beforehand
-    getTitle: null,              // Get the title from an attribute when jBox opens, e.g. getTitle: 'data-title'
     getContent: null,            // Get the content from an attribute when jBox opens, e.g. getContent: 'data-content'. Use 'html' to get the attached elements HTML as content
+    title: null,                 // Adds a title to your jBox
+    getTitle: null,              // Get the title from an attribute when jBox opens, e.g. getTitle: 'data-title'
+    footer: null,                // Adds a footer to your jBox
     isolateScroll: true,         // Isolates scrolling to the content container
 
     // AJAX