esqueleto basico

bower_components/jbox/Source/plugins/Image/jBox.Image.css

@@ -0,0 +1,168 @@
+
+.jBox-Image .jBox-container {
+  background-color: transparent;
+}
+
+.jBox-Image .jBox-content {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.jBox-image-container {
+  background: center center no-repeat;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.jBox-image-label-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 40px;
+  z-index: 100;
+}
+
+.jBox-image-label {
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  left: 0;
+  color: #fff;
+  padding: 8px 40px;
+  line-height: 24px;
+  transition: opacity .36s;
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.jBox-image-label.expanded {
+  background: #000;
+}
+
+.jBox-image-label:not(.expanded) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.jBox-image-label.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.jBox-image-pointer-next,
+.jBox-image-pointer-prev {
+  position: absolute;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  opacity: .8;
+  transition: opacity .2s;
+  background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);
+  background-size: 11px auto;
+  user-select: none;
+  z-index: 1;
+}
+
+.jBox-image-pointer-next:hover,
+.jBox-image-pointer-prev:hover {
+  opacity: 1;
+}
+
+.jBox-image-pointer-next {
+  right: 0;
+  transform: scaleX(-1);
+}
+
+.jBox-image-pointer-prev {
+  left: 0;
+}
+
+.jBox-image-counter-container {
+  position: absolute;
+  right: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 13px;
+  color: #fff;
+  text-align: right;
+  display: none;
+}
+
+.jBox-image-has-counter .jBox-image-counter-container {
+  display: block;
+}
+
+.jBox-image-has-counter .jBox-image-label:not(.expanded) {
+  padding-right: 80px;
+  text-indent: 40px;
+}
+
+.jBox-overlay.jBox-overlay-Image {
+  background: #000;
+}
+
+.jBox-image-not-found {
+  background: #000;
+}
+
+.jBox-image-not-found:before {
+  content: '';
+  box-sizing: border-box;
+  display: block;
+  width: 80px;
+  height: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border: 5px solid #222;
+  border-radius: 50%;
+}
+
+.jBox-image-not-found:after {
+  content: '';
+  display: block;
+  box-sizing: content-box;
+  z-index: auto;
+  width: 6px;
+  height: 74px;
+  margin-top: -37px;
+  margin-left: -3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #222;
+  transform: rotateZ(45deg);
+  transform-origin: 50% 50% 0;
+}
+
+/* Image spinner */
+
+@keyframes jBoxImageLoading {
+  to { transform: rotate(360deg); }
+}
+
+.jBox-image-loading .jBox-container:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 32px;
+  height: 32px;
+  margin-top: -16px;
+  margin-left: -16px;
+  border: 4px solid #333;
+  border-bottom-color: #666;
+  animation: jBoxImageLoading 1.2s linear infinite;
+  border-radius: 50%;
+}

bower_components/jbox/Source/plugins/Image/jBox.Image.js

@@ -0,0 +1,249 @@
+/**
+ * jBox Image plugin: Adds a lightbox to your images
+ *
+ * Author: Stephan Wagner (https://stephanwagner.me)
+ *
+ * License: MIT (https://opensource.org/licenses/MIT)
+ * 
+ * Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
+ */
+ 
+jQuery(document).ready(function () {
+  
+  new jBox.plugin('Image', {
+    
+    
+    // Options (https://stephanwagner.me/jBox/options#options-confirm)
+    
+    src: 'href',                // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg"
+    gallery: 'data-jbox-image', // The attribute to set the galleries, e.g. data-jbox-image="gallery1"
+    imageLabel: 'title',        // The attribute where jBox gets the image label from, e.g. title="My label"
+    imageFade: 360,             // The fade duration for images in ms
+    imageSize: 'contain',       // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%'
+    imageCounter: false,        // Set to true to add an image counter, e.g. 4/20
+    imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of '
+    target: window,
+    attach: '[data-jbox-image]',
+    fixed: true,
+    blockScroll: true,
+    closeOnEsc: true,
+    closeOnClick: 'button',
+    closeButton: true,
+    overlay: true,
+    animation: 'zoomIn',
+    preventDefault: true,
+    width: '100%',
+    height: '100%',
+    adjustDistance: {
+      top: 40,
+      right: 5,
+      bottom: 40,
+      left: 5
+    },
+    
+    
+    // Triggered when jBox is initialized
+    
+    _onInit: function ()
+    {
+      // Initial images and z-index
+      this.images = this.currentImage = {};
+      this.imageZIndex = 1;
+      
+      // Loop through images, sort and save in global variable
+      this.attachedElements && jQuery.each(this.attachedElements, function (index, item)
+      {
+        item = jQuery(item);
+        
+        // Abort if the item was added to a gallery already
+        if (item.data('jBox-image-gallery')) return;
+        
+        // Add item to a gallery
+        var gallery = item.attr(this.options.gallery) || 'default';
+        !this.images[gallery] && (this.images[gallery] = []);
+        this.images[gallery].push({src: item.attr(this.options.src), label: (item.attr(this.options.imageLabel) || '')});
+        
+        // Remove the title attribute so it won't show the browsers tooltip
+        this.options.imageLabel == 'title' && item.removeAttr('title');
+        
+        // Store data in source element for easy access
+        item.data('jBox-image-gallery', gallery);
+        item.data('jBox-image-id', (this.images[gallery].length - 1));
+        
+      }.bind(this));
+      
+      // Helper to inject the image into content area
+      var appendImage = function (gallery, id, preload, open, error)
+      {
+        // Abort if image was appended already
+        if (jQuery('#jBox-image-' + gallery + '-' + id).length) return;
+        
+        // Create image container
+        var image = jQuery('<div/>', {
+          id: 'jBox-image-' + gallery + '-' + id,
+          'class': 'jBox-image-container' + (error ? ' jBox-image-not-found' : '') + (!open && !preload ? ' jBox-image-' + gallery + '-current' : '')
+        }).css({
+          backgroundImage: error ? '' : 'url("' + this.images[gallery][id].src + '")',
+          backgroundSize: this.options.imageSize,
+          opacity: (open ? 1 : 0),
+          zIndex: (preload ? 0 : this.imageZIndex++)
+        }).appendTo(this.content);
+        
+        // Create labels
+        jQuery('<div/>', {
+          id: 'jBox-image-label-' + gallery + '-' + id,
+          'class': 'jBox-image-label' + (open ? ' active' : '')
+        }).html(this.images[gallery][id].label).click(function () { $(this).toggleClass('expanded'); }).appendTo(this.imageLabel);
+        
+        // Show image
+        !open && !preload && image.animate({opacity: 1}, this.options.imageFade);
+        
+      }.bind(this);
+      
+      // Helper to show new image label
+      var showLabel = function (gallery, id)
+      {
+        jQuery('.jBox-image-label.active').removeClass('active expanded');
+        jQuery('#jBox-image-label-' + gallery + '-' + id).addClass('active');
+      };
+      
+      // Show images when they are loaded or load them if not
+      this.showImage = function (img)
+      {
+        // Get the gallery and the image id from the next or the previous image
+        if (img != 'open') {
+          var gallery = this.currentImage.gallery;
+          var id = this.currentImage.id + (1 * (img == 'prev') ? -1 : 1);
+          id = id > (this.images[gallery].length - 1) ? 0 : (id < 0 ? (this.images[gallery].length - 1) : id);
+        
+        // Or get image data from source element
+        } else {
+          var gallery = this.source.data('jBox-image-gallery');
+          var id = this.source.data('jBox-image-id');
+          
+          // Remove or show the next and prev buttons
+          jQuery('.jBox-image-pointer-prev, .jBox-image-pointer-next').css({display: (this.images[gallery].length > 1 ? 'block' : 'none')});
+        }
+        
+        // If there is a current image already shown, hide it
+        if (jQuery('.jBox-image-' + gallery + '-current').length) {
+          jQuery('.jBox-image-' + gallery + '-current').removeClass('jBox-image-' + gallery + '-current').animate({opacity: 0}, (img == 'open') ? 0 : this.options.imageFade);
+        }
+        
+        // Set new current image
+        this.currentImage = {gallery: gallery, id: id};
+        
+        // Show image if it already exists
+        if (jQuery('#jBox-image-' + gallery + '-' + id).length) {
+          jQuery('#jBox-image-' + gallery + '-' + id).addClass('jBox-image-' + gallery + '-current').css({zIndex: this.imageZIndex++, opacity: 0}).animate({opacity: 1}, (img == 'open') ? 0 : this.options.imageFade);
+          showLabel(gallery, id);
+          
+        // Load image
+        } else {
+          this.wrapper.addClass('jBox-image-loading');
+          
+          jQuery('<img src="' + this.images[gallery][id].src + '"/>').each(function ()
+          {
+            var tmpImg = new Image();
+            tmpImg.onload = function ()
+            {
+              appendImage(gallery, id, false);
+              showLabel(gallery, id);
+              this.wrapper.removeClass('jBox-image-loading');
+            }.bind(this);
+            
+            tmpImg.onerror = function () {
+              appendImage(gallery, id, false, null, true);
+              showLabel(gallery, id);
+              this.wrapper.removeClass('jBox-image-loading');
+            }.bind(this);
+            
+            tmpImg.src = this.images[gallery][id].src;
+          }.bind(this));
+        }
+        
+        // Update the image counter numbers
+        if (this.imageCounter) {
+          if (this.images[gallery].length > 1) {
+            this.wrapper.addClass('jBox-image-has-counter');
+            this.imageCounter.find('.jBox-image-counter-all').html(this.images[gallery].length);
+            this.imageCounter.find('.jBox-image-counter-current').html(id + 1);
+          } else {
+            this.wrapper.removeClass('jBox-image-has-counter');
+          }
+        }
+        
+        // Preload next image
+        var next_id = id + 1;
+        next_id = next_id > (this.images[gallery].length - 1) ? 0 : (next_id < 0 ? (this.images[gallery].length - 1) : next_id);
+        
+        (!jQuery('#jBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '"/>').each(function ()
+        {
+          var tmpImg = new Image();
+          tmpImg.onload = function ()
+          {
+              appendImage(gallery, next_id, true);
+          }.bind(this);
+          
+          tmpImg.onerror = function ()
+          {
+            appendImage(gallery, next_id, true, null, true);
+          }.bind(this);
+          
+          tmpImg.src = this.images[gallery][next_id].src;
+        }.bind(this));
+      };
+    },
+    
+    
+    // Triggered when jBox was created
+    
+    _onCreated: function ()
+    {
+      // Append image label containers
+      this.imageLabel = jQuery('<div/>', {'class': 'jBox-image-label-container'}).appendTo(this.wrapper);
+      this.imageLabel.append(jQuery('<div/>', {'class': 'jBox-image-pointer-prev', click: function () { this.showImage('prev'); }.bind(this)})).append(jQuery('<div/>', {'class': 'jBox-image-pointer-next', click: function () { this.showImage('next'); }.bind(this)}));
+      
+      // Creating the image counter containers
+      if (this.options.imageCounter) {
+        this.imageCounter = jQuery('<div/>', {'class': 'jBox-image-counter-container'}).appendTo(this.wrapper);
+        this.imageCounter.append(jQuery('<span/>', {'class': 'jBox-image-counter-current'})).append(jQuery('<span/>').html(this.options.imageCounterSeparator)).append(jQuery('<span/>', {'class': 'jBox-image-counter-all'}));
+      }
+    },
+    
+    
+    // Triggered when jBox opens
+    
+    _onOpen: function ()
+    {
+      // Add key events
+      jQuery(document).on('keyup.jBox-Image-' + this.id, function (ev) {
+        (ev.keyCode == 37) && this.showImage('prev');
+        (ev.keyCode == 39) && this.showImage('next');
+      }.bind(this));
+      
+      // Load the image from the attached element
+      this.showImage('open');
+    },
+    
+    
+    // Triggered when jBox closes
+    
+    _onClose: function ()
+    {
+      // Remove key events
+      jQuery(document).off('keyup.jBox-Image-' + this.id);
+    },
+    
+    
+    // Triggered when jBox finished closing
+    
+    _onCloseComplete: function ()
+    {
+      // Hide all image containers
+      this.wrapper.find('.jBox-image-container').css('opacity', 0);
+    }
+    
+  });
+  
+});

bower_components/jbox/Source/plugins/Image/jBox.Image.min.js

@@ -0,0 +1 @@
+jQuery(document).ready(function(){new jBox.plugin("Image",{src:"href",gallery:"data-jbox-image",imageLabel:"title",imageFade:360,imageSize:"contain",imageCounter:!1,imageCounterSeparator:"/",target:window,attach:"[data-jbox-image]",fixed:!0,blockScroll:!0,closeOnEsc:!0,closeOnClick:"button",closeButton:!0,overlay:!0,animation:"zoomIn",preventDefault:!0,width:"100%",height:"100%",adjustDistance:{top:40,right:5,bottom:40,left:5},_onInit:function(){this.images=this.currentImage={},this.imageZIndex=1,this.attachedElements&&jQuery.each(this.attachedElements,function(e,i){if(i=jQuery(i),!i.data("jBox-image-gallery")){var a=i.attr(this.options.gallery)||"default";!this.images[a]&&(this.images[a]=[]),this.images[a].push({src:i.attr(this.options.src),label:i.attr(this.options.imageLabel)||""}),"title"==this.options.imageLabel&&i.removeAttr("title"),i.data("jBox-image-gallery",a),i.data("jBox-image-id",this.images[a].length-1)}}.bind(this));var e=function(e,i,a,t,n){if(!jQuery("#jBox-image-"+e+"-"+i).length){var o=jQuery("<div/>",{id:"jBox-image-"+e+"-"+i,class:"jBox-image-container"+(n?" jBox-image-not-found":"")+(t||a?"":" jBox-image-"+e+"-current")}).css({backgroundImage:n?"":'url("'+this.images[e][i].src+'")',backgroundSize:this.options.imageSize,opacity:t?1:0,zIndex:a?0:this.imageZIndex++}).appendTo(this.content);jQuery("<div/>",{id:"jBox-image-label-"+e+"-"+i,class:"jBox-image-label"+(t?" active":"")}).html(this.images[e][i].label).click(function(){$(this).toggleClass("expanded")}).appendTo(this.imageLabel),!t&&!a&&o.animate({opacity:1},this.options.imageFade)}}.bind(this),i=function(e,i){jQuery(".jBox-image-label.active").removeClass("active expanded"),jQuery("#jBox-image-label-"+e+"-"+i).addClass("active")};this.showImage=function(a){if("open"!=a){var t=this.currentImage.gallery,n=this.currentImage.id+(1*("prev"==a)?-1:1);n=n>this.images[t].length-1?0:n<0?this.images[t].length-1:n}else{var t=this.source.data("jBox-image-gallery"),n=this.source.data("jBox-image-id");jQuery(".jBox-image-pointer-prev, .jBox-image-pointer-next").css({display:this.images[t].length>1?"block":"none"})}jQuery(".jBox-image-"+t+"-current").length&&jQuery(".jBox-image-"+t+"-current").removeClass("jBox-image-"+t+"-current").animate({opacity:0},"open"==a?0:this.options.imageFade),this.currentImage={gallery:t,id:n},jQuery("#jBox-image-"+t+"-"+n).length?(jQuery("#jBox-image-"+t+"-"+n).addClass("jBox-image-"+t+"-current").css({zIndex:this.imageZIndex++,opacity:0}).animate({opacity:1},"open"==a?0:this.options.imageFade),i(t,n)):(this.wrapper.addClass("jBox-image-loading"),jQuery('<img src="'+this.images[t][n].src+'"/>').each(function(){var a=new Image;a.onload=function(){e(t,n,!1),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.onerror=function(){e(t,n,!1,null,!0),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.src=this.images[t][n].src}.bind(this))),this.imageCounter&&(this.images[t].length>1?(this.wrapper.addClass("jBox-image-has-counter"),this.imageCounter.find(".jBox-image-counter-all").html(this.images[t].length),this.imageCounter.find(".jBox-image-counter-current").html(n+1)):this.wrapper.removeClass("jBox-image-has-counter"));var o=n+1;o=o>this.images[t].length-1?0:o<0?this.images[t].length-1:o,!jQuery("#jBox-image-"+t+"-"+o).length&&jQuery('<img src="'+this.images[t][o].src+'"/>').each(function(){var i=new Image;i.onload=function(){e(t,o,!0)}.bind(this),i.onerror=function(){e(t,o,!0,null,!0)}.bind(this),i.src=this.images[t][o].src}.bind(this))}},_onCreated:function(){this.imageLabel=jQuery("<div/>",{class:"jBox-image-label-container"}).appendTo(this.wrapper),this.imageLabel.append(jQuery("<div/>",{class:"jBox-image-pointer-prev",click:function(){this.showImage("prev")}.bind(this)})).append(jQuery("<div/>",{class:"jBox-image-pointer-next",click:function(){this.showImage("next")}.bind(this)})),this.options.imageCounter&&(this.imageCounter=jQuery("<div/>",{class:"jBox-image-counter-container"}).appendTo(this.wrapper),this.imageCounter.append(jQuery("<span/>",{class:"jBox-image-counter-current"})).append(jQuery("<span/>").html(this.options.imageCounterSeparator)).append(jQuery("<span/>",{class:"jBox-image-counter-all"})))},_onOpen:function(){jQuery(document).on("keyup.jBox-Image-"+this.id,function(e){37==e.keyCode&&this.showImage("prev"),39==e.keyCode&&this.showImage("next")}.bind(this)),this.showImage("open")},_onClose:function(){jQuery(document).off("keyup.jBox-Image-"+this.id)},_onCloseComplete:function(){this.wrapper.find(".jBox-image-container").css("opacity",0)}})});