quarta-feira, 25 de setembro de 2019

Modelo de galeria simples



Vá até o </head> e abaixo dele cole:

 <script src='http://code.jquery.com/jquery-1.9.1.js'/>
<script src='http://code.jquery.com/jquery-migrate-1.1.0.js'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width = 135;
    var height = 135;
    var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYU1USViFRL5RB6J-kKEF1vMM6J1Y1b2JOnSBEnet8jeoODikRqAmGDgIv8s9sN65_Y4hM6VnqtcGNRH6DK00FjgJlKSsm42e-QuyOBaLzSLDqVawBJceWqRLkGHDY019UitpNxVw8sJs/s1600/no-thumb.png';
    var margins = "0px 0px 10px 10px";
    var fitThumb = 0;
    var titleTopPadding = 5;
    var titleBottomPadding = 8;
    var titleLeftRightPadding = 10;
    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper) {
        var wrapper = $(wrapper);
        var image = $(wrapper).find('img').first();
        var link = wrapper.parent().find('h3 a');
        var linkURL = link.attr('href');
        var linkTitle = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
                    });
                image.attr('width', width).attr('height', height);
            } else {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
                    });
                image.attr('width', width);
                var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
                image.attr('height', changeHeight);
            }
        } else {
            var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top', '-' + summary + 'px');
        wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
    });
    $('#blog-pager').css('clear', 'both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length;++i) {
        images[i].onmouseover = function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load', hideLightbox, undefined);
} else {
    window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
}
h2,.post-footer {
    display: none;
}
a.postThumbnail div {
display: none;
}
a.postThumbnail:hover div {
    display: none;
}
.post-body img {
    border: 1px solid #dce9df;
    box-shadow:1px 1px 2px rgba(000,000,000,0.2),
    inset 0px 0px 1px rgba(252,252,252,1);
    background:#e1e1e1;
    padding: 8px;
    opacity: 1;
    width:115px;
    height:115px;
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;
}
.post-body img:hover {
    background:#df8db9;
filter: grayscale(60%);
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-o-filter: grayscale(60%);
-ms-filter: grayscale(60%);
}
</style>
</b:if>

Nenhum comentário:

Postar um comentário

Popular Posts