Clicking an element will now toggle Strip

This behavior can be disabled using toggle: false

Strip.show() calls don't use toggle behavior, it only works with
elements using class='strip'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "strip",
   "title": "Strip",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A Less Intrusive Responsive Lightbox",
   "author": {
     "name": "Nick Stakenburg",

src/css/strip/strip.css

@@ -14,14 +14,15 @@
 
 
 /* margin
-   we always have some margin around Strip to keep a visual reference to the underlying page
+   margin is added around the window to keep a visual reference 
+   to the underlying page at all times.
 */
 .strp-window { margin-left: 40px; }
 .strp-window.strp-vertical { margin-left: 0; margin-bottom: 40px; }
 
 /* reduce margin on smaller screens */
-@media all and (max-width: 420px),
-       all and (max-height: 420px) {
+@media all and (max-width: 400px),
+       all and (max-height: 400px) {
   .strp-window { margin-left: 20px; }
   .strp-window.strp-vertical { margin-bottom: 20px; }
 }
@@ -327,8 +328,8 @@
 .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background: url('skins/strip/next-hover.png'); }
 
 /* Smaller screens */
-@media all and (max-width: 420px),
-       all and (max-height: 420px) {
+@media all and (max-width: 400px),
+       all and (max-height: 400px) {
   .strp-window-skin-strip .strp-nav {
     width: 40px;
     height: 50px;

src/js/pages.js

@@ -27,7 +27,17 @@ var Pages = {
     var page = this.pages[this.uid][position - 1];
 
     // never try to reload the exact same frame
-    if (this.page && this.page.uid == page.uid) return;
+    if (this.page && this.page.uid == page.uid) {
+      // also hide the window if toggle is enabled
+      if (page.view.options.toggle) {
+        Window.hide();
+        // clear the page so double clicking when hiding will
+        // re-open the window even if it's in a hide animation
+        this.page = null;
+      }
+
+      return;
+    }
 
     this.page = page; // store
 

src/js/skins.js

@@ -17,6 +17,7 @@ Strip.Skins = {
     preload: [1,2],
     position: true,
     side: 'right',
+    toggle: true,
     uiDelay: 3000,
     vimeo: {
       autoplay: 1,