Hướng dẫn tạo Lightbox tuyệt đẹp cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Hướng dẫn tạo Lightbox tuyệt đẹp cho blogger

Share:
Chào các bạn, hôm nay tôi sẽ hướng dẫn cho các bạn cách tạo lightbox tuyệt đẹp khi bạn click vào một hình ảnh trong bài viết blogger.
Xem Demo

Cách Thực Hiện

Đầu tiên các bạn vào Chủ đề -> Chỉnh sửa
Các bạn tìm đến thẻ ]]></b:skin> rồi copy đoạn code sau và dán lên trên nó
html{-ms-touch-action:manipulation;touch-action:manipulation}button{border:none;cursor:pointer}#imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0,0,0,.75 );box-shadow:0 0 3.125em rgba( 0,0,0,.75 )}#imagelightbox-loading,#imagelightbox-loading div{border-radius:50%}#imagelightbox-loading{width:2.5em;height:2.5em;background-color:rgba( 0,0,0,.5 );position:fixed;z-index:10003;top:50%;left:50%;margin:-1.25em 0 0 -1.25em;-webkit-box-shadow:0 0 2.5em rgba( 0,0,0,.75 );box-shadow:0 0 2.5em rgba( 0,0,0,.75 )}#imagelightbox-loading div{margin:25%;width:1.25em;height:1.25em;background-color:#fff;-webkit-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite}@-webkit-keyframes imagelightbox-loading{from{opacity:.5;-webkit-transform:scale( .75 )}50%{opacity:1;-webkit-transform:scale( 1 )}to{opacity:.5;-webkit-transform:scale( .75 )}}@keyframes imagelightbox-loading{from{opacity:.5;transform:scale( .75 )}50%{opacity:1;transform:scale( 1 )}to{opacity:.5;transform:scale( .75 )}}#imagelightbox-overlay{background-color:rgb(255, 255, 255);position:fixed;z-index:9999;top:0;right:0;bottom:0;left:0}#imagelightbox-close{width:2.5em;height:2.5em;text-align:left;background-color:#666;border-radius:50%;position:fixed;z-index:10002;top:2.5em;right:2.5em;-webkit-transition:color .3s ease;transition:color .3s ease}#imagelightbox-close:hover,#imagelightbox-close:focus{background-color:#111}#imagelightbox-close:before,#imagelightbox-close:after{width:2px;background-color:#fff;content:'';position:absolute;top:20%;bottom:20%;left:50%;margin-left:-1px}#imagelightbox-close:before{-webkit-transform:rotate( 45deg );-ms-transform:rotate( 45deg );transform:rotate( 45deg )}#imagelightbox-close:after{-webkit-transform:rotate( -45deg );-ms-transform:rotate( -45deg );transform:rotate( -45deg )}#imagelightbox-caption{text-align:center;color:#fff;background-color:#666;position:fixed;z-index:10001;left:0;right:0;bottom:0;padding:0.625em}#imagelightbox-nav{background-color:rgba( 0,0,0,.5 );border-radius:20px;position:fixed;z-index:10001;left:50%;bottom:3.75em;padding:0.313em;-webkit-transform:translateX( -50% );-ms-transform:translateX( -50% );transform:translateX( -50% )}#imagelightbox-nav button{width:1em;height:1em;background-color:transparent;border:1px solid #fff;border-radius:50%;display:inline-block;margin:0 0.313em}#imagelightbox-nav button.active{background-color:#fff}.imagelightbox-arrow{width:3.75em;height:7.5em;background-color:rgba( 0,0,0,.5 );vertical-align:middle;display:none;position:fixed;z-index:10001;top:50%;margin-top:-3.75em}.imagelightbox-arrow:hover,.imagelightbox-arrow:focus{background-color:rgba( 0,0,0,.75 )}.imagelightbox-arrow:active{background-color:#111}.imagelightbox-arrow-left{left:2.5em}.imagelightbox-arrow-right{right:2.5em}.imagelightbox-arrow:before{width:0;height:0;border:1em solid transparent;content:'';display:inline-block;margin-bottom:-0.125em}.imagelightbox-arrow-left:before{border-left:none;border-right-color:#fff;margin-left:-0.313em}.imagelightbox-arrow-right:before{border-right:none;border-left-color:#fff;margin-right:-0.313em}#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav,.imagelightbox-arrow{-webkit-animation:fade-in .25s linear;animation:fade-in .25s linear}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@media only screen and (max-width:41.250em){#imagelightbox-close{top:1.25em;right:1.25em}.imagelightbox-arrow{width:2.5em;height:3.75em;margin-top:-2.75em}.imagelightbox-arrow-left{left:1.25em}.imagelightbox-arrow-right{right:1.25em}}@media only screen and (max-width:20em){.imagelightbox-arrow-left{left:0}.imagelightbox-arrow-right{right:0}}
Tiếp theo các bạn dán đoạn code dưới đây lên trước thẻ </body>
<script>
/*<![CDATA[*/
// Modal
;(function(e,t,n,r){"use strict";var i = function(){var e = n.body || n.documentElement,e = e.style;if (e.WebkitTransition == "") return "-webkit-";if (e.MozTransition == "") return "-moz-";if (e.OTransition == "") return "-o-";if (e.transition == "") return "";return false},s = i() === false ? false:true,o = function(e,t,n){var r ={},s = i();r[s + "transform"] = "translateX(" + t + ")";r[s + "transition"] = s + "transform " + n + "s linear";e.css(r)},u = "ontouchstart" in t,a = t.navigator.pointerEnabled || t.navigator.msPointerEnabled,f = function(e){if (u) return true;if (!a || typeof e === "undefined" || typeof e.pointerType === "undefined") return false;if (typeof e.MSPOINTER_TYPE_MOUSE !== "undefined"){if (e.MSPOINTER_TYPE_MOUSE != e.pointerType) return true}else if (e.pointerType != "mouse") return true;return false};e.fn.imageLightbox = function(r){var r = e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i = e([]),l = e(),c = e(),h = 0,p = 0,d = 0,v = false,m = function(t){return e(t).prop("tagName").toLowerCase() == "a" && (new RegExp(".(" + r.allowedTypes + ")$","i")).test(e(t).attr("href"))},g = function(){if (!c.length) return true;var n = e(t).width() * .8,r = e(t).height() * .9,i = new Image;i.src = c.attr("src");i.onload = function(){h = i.width;p = i.height;if (h > n || p > r){var s = h / p > n / r ? h / n:p / r;h /= s;p /= s}c.css({width:h + "px",height:p + "px",top:(e(t).height() - p) / 2 + "px",left:(e(t).width() - h) / 2 + "px"})}},y = function(t){if (v) return false;t = typeof t === "undefined" ? false:t == "left" ? 1:-1;if (c.length){if (t !== false && (i.length < 2 || r.quitOnEnd === true && (t === -1 && i.index(l) == 0 || t === 1 && i.index(l) == i.length - 1))){w();return false}var n ={opacity:0};if (s) o(c,100 * t - d + "px",r.animationSpeed / 1e3);else n.left = parseInt(c.css("left")) + 100 * t + "px";c.animate(n,r.animationSpeed,function(){b()});d = 0}v = true;if (r.onLoadStart !== false) r.onLoadStart();setTimeout(function(){c = e("<img " + r.selector + " />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n ={opacity:1};c.css("opacity",0);if (s){o(c,-100 * t + "px",0);setTimeout(function(){o(c,0 + "px",r.animationSpeed / 1e3)},50)}else{var u = parseInt(c.css("left"));n.left = u + "px";c.css("left",u - 100 * t + "px")}c.animate(n,r.animationSpeed,function(){v = false;if (r.onLoadEnd !== false) r.onLoadEnd()});if (r.preloadNext){var a = i.eq(i.index(l) + 1);if (!a.length) a = i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if (r.onLoadEnd !== false) r.onLoadEnd()});var n = 0,u = 0,p = 0;c.on(a ? "pointerup MSPointerUp":"click",function(e){e.preventDefault();if (r.quitOnImgClick){w();return false}if (f(e.originalEvent)) return true;var t = (e.pageX || e.originalEvent.pageX) - e.target.offsetLeft;l = i.eq(i.index(l) - (h / 2 > t ? 1:-1));if (!l.length) l = i.eq(h / 2 > t ? i.length:0);y(h / 2 > t ? "left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if (!f(e.originalEvent) || r.quitOnImgClick) return true;if (s) p = parseInt(c.css("left"));n = e.originalEvent.pageX || e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if (!f(e.originalEvent) || r.quitOnImgClick) return true;e.preventDefault();u = e.originalEvent.pageX || e.originalEvent.touches[0].pageX;d = n - u;if (s) o(c,-d + "px",0);else c.css("left",p - d + "px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if (!f(e.originalEvent) || r.quitOnImgClick) return true;if (Math.abs(d) > 50){l = i.eq(i.index(l) - (d < 0 ? 1:-1));if (!l.length) l = i.eq(d < 0 ? i.length:0);y(d > 0 ? "right":"left")}else{if (s) o(c,0 + "px",r.animationSpeed / 1e3);else c.animate({left:p + "px"},r.animationSpeed / 2)}})},r.animationSpeed + 100)},b = function(){if (!c.length) return false;c.remove();c = e()},w = function(){if (!c.length) return false;c.animate({opacity:0},r.animationSpeed,function(){b();v = false;if (r.onEnd !== false) r.onEnd()})};e(t).on("resize",g);if (r.quitOnDocClick){e(n).on(u ? "touchend":"click",function(t){if (c.length && !e(t.target).is(c)) w()})}if (r.enableKeyboard){e(n).on("keyup",function(e){if (!c.length) return true;e.preventDefault();if (e.keyCode == 27) w();if (e.keyCode == 37 || e.keyCode == 39){l = i.eq(i.index(l) - (e.keyCode == 37 ? 1:-1));if (!l.length) l = i.eq(e.keyCode == 37 ? i.length:0);y(e.keyCode == 37 ? "left":"right")}})}e(n).on("click",this.selector,function(t){if (!m(this)) return true;t.preventDefault();if (v) return false;v = false;if (r.onStart !== false) r.onStart();l = e(this);y()});this.each(function(){if (!m(this)) return true;i = i.add(e(this))});this.switchImageLightbox = function(e){var t = i.eq(e);if (t.length){var n = i.index(l);l = t;y(e < n ? "left":"right")}return this};this.quitImageLightbox = function(){w();return this};return this}})(jQuery,window,document);$(function(){// ACTIVITY INDICATOR
  var activityIndicatorOn = function(){$('<div id="imagelightbox-loading"><div></div></div>').appendTo('body')},activityIndicatorOff = function(){$('#imagelightbox-loading').remove()},// OVERLAY
    overlayOn = function(){$('<div id="imagelightbox-overlay"></div>').appendTo('body')},overlayOff = function(){$('#imagelightbox-overlay').remove()},// CLOSE BUTTON
    closeButtonOn = function(instance){$('<button type="button" id="imagelightbox-close" title="Close"></button>').appendTo('body').on('click touchend',function(){$(this).remove();instance.quitImageLightbox();return false})},closeButtonOff = function(){$('#imagelightbox-close').remove()},// CAPTION
    captionOn = function(){var img = $('a[href="' + $('#imagelightbox').attr('src') + '"] img');var description = 'BacSiWindows.Com';if ($(img).is('[alt]')){description = $(img).attr('alt')}$('<div id="imagelightbox-caption">' + description + '</div>').appendTo('body')},captionOff = function(){$( '#imagelightbox-caption' ).remove()},// NAVIGATION
    navigationOn = function(instance,selector){var images = $(selector);if (images.length){var nav = $('<div id="imagelightbox-nav"></div>');for (var i = 0;i < images.length;i++)
          nav.append('<button type="button"></button>');nav.appendTo('body');nav.on('click touchend',function(){return false});var navItems = nav.find('button');navItems.on('click touchend',function(){var $this = $(this);if (images.eq($this.index()).attr('href') != $('#imagelightbox').attr('src'))
              instance.switchImageLightbox($this.index());navItems.removeClass('active');navItems.eq($this.index()).addClass('active');return false})
          .on('touchend',function(){return false})}},navigationUpdate = function(selector){var items = $('#imagelightbox-nav button');items.removeClass('active');items.eq($(selector).filter('[href="' + $('#imagelightbox').attr('src') + '"]').index(selector)).addClass('active')},navigationOff = function(){$('#imagelightbox-nav').remove()},// ARROWS
    arrowsOn = function(instance,selector){var $arrows = $('<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>');$arrows.appendTo('body');$arrows.on('click touchend',function(e){e.preventDefault();var $this = $(this),$target = $(selector + '[href="' + $('#imagelightbox').attr('src') + '"]'),index = $target.index(selector);if ($this.hasClass('imagelightbox-arrow-left')){index = index - 1;if (!$(selector).eq(index).length)
            index = $(selector).length}else{index = index + 1;if (!$(selector).eq(index).length)
            index = 0}instance.switchImageLightbox(index);return false})},arrowsOff = function(){$('.imagelightbox-arrow').remove()};var selector = '.post-body a[href]:has(img)';var instance = $(selector).imageLightbox({onStart:function(){overlayOn();closeButtonOn(instance);arrowsOn(instance,selector);navigationOn(instance,selector)},onEnd:function(){overlayOff();captionOff();closeButtonOff();arrowsOff();activityIndicatorOff();navigationOff()},onLoadStart:function(){captionOff();activityIndicatorOn()},onLoadEnd:function(){captionOn();activityIndicatorOff();$('.imagelightbox-arrow').css('display','block');navigationUpdate(selector)}})});
/*]]>*/
</script>
Cuối cùng các bạn lưu mẫu lại là xong

Lời Kết 

Vậy là chỉ với vài bước đơn giản là bạn đã có thể tạo ra một hiệu ứng tuyệt đẹp khi click vào ảnh trên blog của mình rồi.
Với Lightbox này bạn có thể áp dụng cho blog chia sẻ hình ảnh thì thật tuyệt vời
Chúc các bạn thành công
Nếu bạn gặp bất cứ lỗi nào vui lòng để lại bình luận bên dưới bài viết này.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

1 Nhận xét

Nhận xét này đã bị tác giả xóa.

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.