Oviedo

design.custom_css.css

.t-share a:last-child { margin-bottom: 0; }
  .t-share a { width: 26px; height: 26px; display: block; margin-bottom: 10px; background: black; }
  .t-share .t-fb { background:url(http://clientes.zolad.com/oviedo/facebook.png) }
  .t-share .t-ma { background:url(http://clientes.zolad.com/oviedo/mail.png) }
  .t-share .t-pi { background:url(http://clientes.zolad.com/oviedo/pinterest.png) }

  .t-share { position: absolute; background: rgba(255,255,255,0.5) url(http://clientes.zolad.com/oviedo/oo.png) center 10px no-repeat; z-index: 999; top: 50%; right: 50%; padding: 10px; padding-top: 52px; }  
  
  .sqs-lightbox-padder .t-share{ opacity:0; -webkit-transition:all 0.5s; transition:all 0.5s; -moz-transition:all 0.5s; }
  .sqs-lightbox-padder:hover .t-share{ opacity:1; }
.t-counter {
  position: absolute;
    bottom: 0;
    right: 0;
    font-size: 150%;
    line-height: 52px;
    color: #222;
    background: rgba(255,255,255,0.5);
    padding: 0px 18px;
    pointer-events: none;
  font-family: 'canada-type-gibson';
  font-style : normal;
}
.t-counter b {
  font-weight : normal;
}
.t-counter b:before {
    content: '/';
    font-size: 72%;
    vertical-align: top;
    margin: 12px;
}

.overflow-wrapper[class] {
    height: auto;
    overflow: visible;
}

.page-text-wrapper .page-description {
    display: block;
    visibility: visible;
    color: black;
    max-width: 1175px;
    text-align: justify;
    position: relative;
    margin:auto;
    margin-bottom: 40px;
    background: none;
    padding: 17px 20px;
    box-sizing: border-box;
}


@media (min-width:769px){
.page-text-wrapper .page-description {
    margin-top: -40px;
 }  
  
}


@media (min-width:1200px){
.page-text-wrapper .page-description {
    left: -0.72em;
 }  
  
}

.page-text-wrapper .page-description:empty {
    display: none;
}

.npic {
    margin-bottom: 2em;
}
.npic img {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

@media (min-width:850px){
  .npic{display:none;}
}

.sqs-lightbox-meta {
    display: none;
}

settings.advaned.code-injection.footer.html

<script>
          document.onkeydown = function (e) {
               e = e || window.event;
               if (e.keyCode == 37) {
                    document.querySelector('.sqs-lightbox-previous').click();
                    }
               else if (e.keyCode == 39) {
                    document.querySelector('.sqs-lightbox-next').click();
                    }
                };

/* Redirect /link pages */
var arr = (window.location + '').split('/link');
if (arr.length > 1) {
    var a = arr[1].split('/');
    a.shift();
    window.location = '/' + a.join('/');
}

  YUI().use('node', 'event-base', 'anim', function(Y) {
    Y.on('domready', function() {
        if (true) { /* Scroll on galleries */
            var MOBILE_SIZE = function(){return window.matchMedia("(max-width: 799px)").matches;};
            var scrollTarget = 0;
            var intervalF = null;
            var updateScroll = function() {
                var slides = Y.all('.sqs-lightbox-slideshow > *');
                slides.removeClass('sqs-active-slide');
                var done = false;
                slides.each(function(node) {
                    if (!done && node.getXY()[0] >= -10) {
                        done = true;
                        node.addClass('sqs-active-slide');
                    }
                });
            };
          
            var lastWheel = new Date();
            var lastWheelStart = null;
            var mouseWheelEvent = function(event) {
              	var nw = new Date();
                if(nw - lastWheel > 500){
                  lastWheelStart = new Date();
                }
                lastWheel = nw;
                if(!lastWheelStart || (nw - lastWheelStart < 100)){
                  return;
                }
              
                var delta = 0;
                if (!event) event = window.event;
                if (event.wheelDelta) {
                    delta = event.wheelDelta / 60;
                } else if (event.detail) {
                    delta = -event.detail / 2;
                }              
                var sd = Y.one('.sqs-lightbox-slideshow');
                if (!sd) return;

                sd.set('scrollLeft', sd.get('scrollLeft') - delta * 3000);
                sd.set('scrollTop', sd.get('scrollTop') - delta * 3000);
                updateScroll();
            };



            (function() {
                /* Horizontal scrolled gallery */
                var latevisible = function(e) {
                    window.setTimeout(function() {
                        var sd = Y.one('.sqs-lightbox-slideshow');
                            var n = sd.ancestor().getDOMNode();
                            n.innerHTML = n.innerHTML;
                            var close = Y.one('.sqs-lightbox-close');
                            close.on('click', function() {
                                Y.one('.yui3-lightbox2').remove(true);
                                Y.one('BODY').removeClass('sqs-lightbox-open');
                            });
                            close.removeAttribute('style');
                            sd = Y.one('.sqs-lightbox-slideshow');
                            sd.on('mousewheel', mouseWheelEvent);

                        sd.addClass('t-visible');
                        sd.on('scroll', updateScroll);
                        var active = Y.one('.sqs-lightbox-slideshow .sqs-active-slide');
                        if (active) {
                           sd.set('scrollLeft', active.getXY()[0]);
                           var ws = document.body.scrollTop || document.documentElement.scrollTop;
                           sd.set('scrollTop', active.getXY()[1] - ws);
                           if(MOBILE_SIZE){
                             sd.removeAttribute('style');
                           }
                        }
                      
                var ww = 100*Math.ceil(window.innerWidth/100);
                        var slides = Y.all('.sqs-lightbox-slideshow > *');
                slides.each(function(node) {
                          var pic = node.one('img')
                          if(pic){
                            var w = parseInt(pic.getAttribute('src').split('format=').pop());
                            //console.log(pic.getAttribute('src').split('format').pop(),w,ww);
                            if( w < ww*0.9 ){
                            pic.setAttribute('src',
                                 pic.getAttribute('src')
                                    .replace('format='+w+'w', 'format=' +
                                       Math.min(1500, ww) +
								    'w')
                            );
                            }
                          }
                });
                      
                      
                    }, 0);
                }
                var gotoactive = function(e) {
                    window.setTimeout(function() {
                        var sd = Y.one('.sqs-lightbox-slideshow');
                        if(!sd) return;
                        var act = Y.one('.sqs-lightbox-slideshow .sqs-active-slide');
                        animation = new Y.Anim({
                            node: sd,
                            to: {
                                scrollLeft: sd.get('scrollLeft') + act.getXY()[0]
                            },
                            duration: 0.5,
                            easing: Y.Easing.easeIn
                        });
                        animation.run();
                    }, 0);
                }

                var body = Y.one('BODY');
                var slides = Y.all('.sqs-gallery .slide');
                slides.on('mouseup', latevisible);
                body.on('mouseup', gotoactive);
                body.on('keydown', gotoactive);
                /*  */
            })();
        }

        window.setTimeout(function() {
            var titles = Y.all('.sqs-gallery-design-autocolumns-slide .project-title');
            titles.on('click', function(e) {
                window.location = e.currentTarget._node.getAttribute('href');
                e.stopImmediatePropagation();
            });
        }, 250);
    });
    var HTML =
        '<div class="t-share">' +
        '<a class="t-fb" target="_blank" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=[URL]&p%5Btitle%5D=Alberto Oviedo Photography"></a>' +
        '<a class="t-pi" target="_blank" href="http://www.pinterest.com/pin/create/bookmarklet/?media=[URL]&url=http://albertooviedo.com/&description=Alberto Oviedo Photography"></a>' +
        '<a class="t-ma" target="_blank" href="mailto:?subject=Alberto%20Oviedo%20|%20Photography&amp;body=Great%20Photo%20:%20[URLO]"></a>' +
        '</div>';
    window.setInterval(function() {
        var nodes = Y.all('.sqs-lightbox-padder img:not(.t-done)');
        var cnt = 1;
        nodes.each(function() {
            var url = this._node.getAttribute('src').split('?')[0];
            var ourl = encodeURIComponent('http://img.albertooviedo.com/_sq/i.php?i=' + url);


            var n = Y.Node.create(HTML.replace(/\[URL\]/g,
                ourl
            ).replace(/\[URLO\]/g,
                url
            ))._node;
            var c = Y.Node.create(
                  '<span class="t-counter"><i>' +
                      (cnt++) + '</i><b>' + nodes._nodes.length +
                  '</b></span>')._node;
            this._node.parentNode.appendChild(n);
            this._node.parentNode.appendChild(c);
            n.style.cssText = 'margin-right:-' +
                parseInt(parseInt(this._node.style.width) / 2) + 'px';
        });
        nodes.addClass('t-done');
    }, 500);
});
</script>


<script>
    function getRandom(arr, n) {
        var result = new Array(n),
            len = arr.length,
            taken = new Array(len);
        if (n > len)
            throw new RangeError("getRandom: more elements taken than available");
        while (n--) {
            var x = Math.floor(Math.random() * len);
            result[n] = arr[x in taken ? taken[x] : x];
            taken[x] = --len in taken ? taken[len] : len;
        }
        return result;
    }

var gwstart = function(){
  var gw = document.querySelector('.gallery-wrapper');
  if(gw._gw_started) return;
  
if(true){

function loadCollage(imgs){
    
      imgs = getRandom(imgs, 4);
      var div = document.createElement('div');
      div.className = 'npic';
      div.style.backgroundImage = 'url('+imgs[imgs.length-1]+')';
      div.style.backgroundSize = 'cover';
      div.innerHTML = imgs.map(i=>'<IMG src="' + i+'">').join('');
      var main = document.querySelector('.main-content');
      main.insertBefore(div, main.childNodes[0]);
}
function tryLoadCollage(t0=(new Date()).getTime()){
  var imgs = [...document.querySelectorAll('.gallery-wrapper IMG[alt*="[mobile-collage]"][data-image]')].map(e=>e.getAttribute('data-image')+'?format=400w').filter(e=>e);//.map(e=>e.split('?format=')[0]+'?format=300w');
  if(imgs.length >= 4) loadCollage(imgs);
  else if((new Date()).getTime() - t0 < 15000){
    setTimeout(e=>tryLoadCollage(t0), 500);
  }
}
tryLoadCollage();
  
}

if(window.location.pathname == '/'){
  var mbo = document.querySelectorAll('.gallery-wrapper .slide IMG[alt*="[mobile-home]"][data-image]').length;
  if(mbo){
    console.log('MOBILE?', window.matchMedia("(max-width: 1020px)").matches);
    
    if(window.matchMedia("(max-width: 1020px)").matches){
        [...document.querySelectorAll('.gallery-wrapper .slide IMG[data-image]:not([alt*="[mobile-home]"])')].map(e=>e.parentNode.parentNode.removeChild(e.parentNode));
      
        var nds = [...document.querySelectorAll('.gallery-wrapper .slide IMG[data-image][alt*="[mobile-home]"]')];
        var ns = getRandom(nds,1);
        nds.map(e=>{
          if(e!=ns[0]) e.parentNode.parentNode.removeChild(e.parentNode);
        });
    }else
	    [...document.querySelectorAll('.gallery-wrapper .slide IMG[data-image][alt*="[mobile-home]"]')].map(e=>e.parentNode.parentNode.removeChild(e.parentNode));
    
  }
}else{
  [...document.querySelectorAll('.gallery-wrapper .slide IMG[data-image][alt*="[mobile-home]"]')].map(e=>e.parentNode.parentNode.removeChild(e.parentNode));
}
window.dispatchEvent(new Event('resize'));
  gw._gw_started = true;
}

gwstart();
setInterval(gwstart, 500);

</script>