Đưa Skin mới vào diễn đàn sử dụng ! Nếu quá trình sử dụng diễn đàn xảy ra lỗi, xin vui lòng liên hệ Admin để báo lỗi ! Cảm ơn !

You are not connected. Please login or register

[Code] fancyFBcmt - Xem ảnh trong Fancybox với facebook bình luận

  • Please log in to post a topic
  • avatar

    Êu Ngáo VL
    avatar

    Êu Ngáo VL

    Group: Administrator

    Hiện đang:
    Bài viết : 1725
    Points : 7059
    Birthday : 08/11/2000
    Thanks : 3826

    Administrator
    Xem lý lịch thành viên http://www.cntt-k3.org/

    Administrator
    Bài viết thứ :1

    Đăng vào:on 1/1/2014, 09:39

    Administrator
    fancyFBcmt ver 0.1
    Tác giả: Zzbaivong

    [You must be registered and logged in to see this link.]


    Lấy ý tưởng từ plugin [You must be registered and logged in to see this link.] viết cho WordPress, mình đã viết plugin fancyFBcmt, với chức năng tương đương, và tối ưu hơn.

    fancyFBcmt là một fancybox helper, viết bằng API fancybox, nên thừa hưởng tất cả những ưu điểm của fancybox. dưới đây là một số điểm nổi bật so với phiên bản WordPress:

    1. Thiết kế giao diện xem ảnh tương đồng với facebook.
    2. Căn chỉnh vị trí, kích thước fancybox thumbnail helper, thêm hiệu ứng cho khung bình luận.
    3. Tự tắt khung bình luận khi màn hình quá hẹp và khi facebook bị chặn.
    4. Lưu lại khung bình luận khi xem ảnh lặp lại (ver WP tạo bình luận mới).
    5. Giả liên kết để sử dụng nhiều ảnh trong cùng một trang, liên kết này có thể dùng để kích hoạt fancyFBcmt.



    Hướng dẫn:

    Bước 1: Kích hoạt Facebook Connect

    ACP >> Modules >> Facebook Connect >> Cấu hình diễn đàn

    Nếu bạn chưa tạo ứng dụng trên facebook thì truy cập: [You must be registered and logged in to see this link.]

    Nếu bạn chưa đăng ký tài khoản Deverloper, nhấn vào Register as a Deverloper để đăng ký

    Trường hợp tài khoản bạn chưa được kích hoạt, thì truy cập: [You must be registered and logged in to see this link.]
    Làm theo hướng dẫn, sau đó quay lại trang đăng ký, thực hiện các bước tiếp theo.

    Nếu bạn đã đăng ký tài khoản Deverloper, nhấn vào Create a New App và điền các thông tin cần thiết.

    Khi tạo app thành công bạn sẽ có được App IDFacebook secret code để kích hoạt Facebook Connect.



    Tiếp theo bạn cần kích hoạt app bạn vừa tạo.
    Tại tab Thiết lập, bạn nhấn vào Thêm nền tảng >> Trang Web và nhập URL của diễn đàn và ô Site URL.
    Sau đó mới điền Domain vào App Domains (Không có [You must be registered and logged in to see this link.]).



    Và kích hoạt app tại tab Trạng thái & Đánh giá.



    Thế là xong phần app Facebook.

    Bước 2: Chỉnh sửa Templates

    Vì mặc định forumotion chỉ dùng Facebook Connect để đăng nhập và đăng ký nên ngoài các trang đó nó không hiển thị ở các trang khác, mà mình cần sử dụng nó ở trong bài viết.
    Ngoài ra, nếu bạn muốn dùng Facebook Connect ở tất cả các trang như trường hợp dùng login popup thì sẽ phải kích hoạt ở tất cả các trang.

    ACP >> Display >> Templates >> QLTT >> overall_header

    Tìm:
    Code:
    {NAMESPACE_FB_LIKE} {NAMESPACE_FB}
    Thay bằng:
    Code:
    xmlns:fb="http://ogp.me/ns/fb#"

    Tìm:
    Code:
    {META_FB_LIKE}
    Thay bằng:
    Code:
    <meta property="fb:admins" content="Admin ID"/>
    <meta property="fb:app_id" content="App ID"/>
    Để có Admin ID, bạn truy cập [You must be registered and logged in to see this link.]
    Thay baivong.ctrlc bằng username tài khoản Facebook của bạn.
    Thay App ID bằng code tạo ở bước 1.

    Tìm:
    Code:
    <!-- BEGIN switch_fb_login -->
    <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
    <!-- END switch_fb_login -->
    Thay bằng:
    Code:
    <script src="//connect.facebook.net/vi_VN/all.js" type="text/javascript"></script>
    <script src="//illiweb.com/rsc/90/frm/ograph/fb_login.js" type="text/javascript"></script>

    ACP >> Display >> Templates >> QLTT >> overall_footer_end

    Tìm:
    Code:
    <!-- BEGIN switch_facebook_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({
       appId: '{switch_facebook_login.FACEBOOK_APP_ID}',
        status: true,
        cookie: true,
        xfbml: true,
       oauth: true
    });
    //]]>
    </script>
    <!-- END switch_facebook_login -->
    Thay bằng:
    Code:
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    if(GetParam("page_profil") != "facebook" && window.FB){
            FB.init({
                    appId: 'App ID',
                    status: true,
                    cookie: true,
                    xfbml: true,
                    oauth: true
            });
    }
    //]]>
    </script>

    Thay App ID bằng code tạo ở bước 1.


    Bước 3: Thêm CSS

    ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

    Code:
    /* fancyFB v0.1 by Zzbaivong */
    .fancybox-overlay,.fancybox-comments-block,#fancybox-thumbs,.fancybox-overlay *,.fancybox-comments-block *,#fancybox-thumbs *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{border:0;outline:none;vertical-align:top;margin:0;padding:0}
    .fancybox-wrap{position:fixed;top:0;left:0;z-index:802}
    .fancybox-skin{position:relative;background:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb10.gif) center center no-repeat #111}
    .fancybox-opened{z-index:803}
    .fancybox-outer,.fancybox-inner{position:relative}
    .fancybox-inner{overflow:hidden}
    .fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
    .fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;margin:0;padding:15px}
    .fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}
    .fancybox-image{max-width:100%;max-height:100%}
    .fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i56.servimg.com/u/f56/18/59/49/93/fancyb16.png);opacity:0.8;z-index:900}
    #fancybox-loading{}
    #fancybox-loading div{}
    .fancybox-close{background-position:0 -114px;position:fixed;top:0;left:0;width:45px;height:45px;cursor:pointer;z-index:804}
    .fancybox-nav{position:fixed;top:0;width:20%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(http://i56.servimg.com/u/f56/18/59/49/93/blank10.gif);-webkit-tap-highlight-color:rgba(0,0,0,0)}
    .fancybox-prev{left:0}
    .fancybox-next{right:0}
    .fancybox-nav span{position:fixed;top:50%;width:45px;height:57px;margin-top:-75px;cursor:pointer;visibility:hidden}
    .fancybox-prev span{left:0;background-position:0 0}
    .fancybox-next span{right:0;background-position:0 -57px}
    .fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}
    .fancybox-lock{overflow:hidden!important;width:auto}
    .fancybox-lock body{overflow:hidden!important}
    .fancybox-lock-test{overflow-y:hidden!important}
    .fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:801;background:url(http://i56.servimg.com/u/f56/18/59/49/93/overla11.png)}
    .fancybox-overlay-fixed{position:fixed;bottom:0;right:0}
    .fancybox-lock .fancybox-overlay{overflow:hidden}
    .fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:805}
    .fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:805;text-align:center}
    .fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);text-shadow:0 1px 2px #222;color:#fff;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
    .fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
    .fancybox-title-inside-wrap{padding-top:10px}
    .fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
    #fancybox-thumbs{position:fixed;left:0;width:100%;overflow:hidden;z-index:805}
    #fancybox-thumbs.bottom{bottom:2px}
    #fancybox-thumbs.top{top:2px}
    #fancybox-thumbs ul{position:relative;list-style:none;margin:0;padding:0}
    #fancybox-thumbs ul li{float:left;opacity:0.5;padding:1px}
    #fancybox-thumbs ul li.active{opacity:0.75;border:1px solid #fff;padding:0}
    #fancybox-thumbs ul li:hover{opacity:1}
    #fancybox-thumbs ul li a{display:block;position:relative;overflow:hidden;border:1px solid #222;background:#111;outline:none}
    #fancybox-thumbs ul li img{display:block;position:relative;border:0;max-width:none;padding:0}
    .fancybox-comments-block{position:fixed;z-index:999;top:0;right:0;background:#f2f2f2;height:100%;display:block;overflow:auto;overflow-x:hidden;width:430px;margin-right:0!important;padding:0 5px}
    .fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}
    .zzbv_FBcmt{position:absolute;top:0;right:0;z-index:0;background:inherit;height:100%;width:100%;padding:0 5px}


    Bước 4: Tạo javascript

    ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management

    Title * : Fancybox min v2.1.5
    Placement : In the topics
    Javascript Code * : [You must be registered and logged in to see this link.]

    Title * : mousewheel + fancythumbs + fancyFBcmt
    Placement : In the topics
    Javascript Code * :
    Code:
    (function (c) {
       function b(b) {
          var a = b || window.event,
             h = [].slice.call(arguments, 1),
             e = 0,
             f = 0,
             g = 0;
          b = c.event.fix(a);
          b.type = "mousewheel";
          a.wheelDelta && (e = a.wheelDelta / 120);
          a.detail && (e = -a.detail / 3);
          g = e;
          void 0 !== a.axis && a.axis === a.HORIZONTAL_AXIS && (g = 0, f = -1 * e);
          void 0 !== a.wheelDeltaY && (g = a.wheelDeltaY / 120);
          void 0 !== a.wheelDeltaX && (f = -1 * a.wheelDeltaX / 120);
          h.unshift(b, e, f, g);
          return (c.event.dispatch || c.event.handle).apply(this, h)
       }
       var a = ["DOMMouseScroll", "mousewheel"];
       if (c.event.fixHooks)
          for (var g = a.length; g;) c.event.fixHooks[a[--g]] =
             c.event.mouseHooks;
       c.event.special.mousewheel = {
          setup: function () {
             if (this.addEventListener)
                for (var c = a.length; c;) this.addEventListener(a[--c], b, !1);
             else this.onmousewheel = b
          },
          teardown: function () {
             if (this.removeEventListener)
                for (var c = a.length; c;) this.removeEventListener(a[--c], b, !1);
             else this.onmousewheel = null
          }
       };
       c.fn.extend({
          mousewheel: function (a) {
             return a ? this.bind("mousewheel", a) : this.trigger("mousewheel")
          },
          unmousewheel: function (a) {
             return this.unbind("mousewheel", a)
          }
       })
    })(jQuery);
    (function (c) {
       c.fancybox.helpers.thumbs = {
          defaults: {
             width: 50,
             height: 50,
             position: "bottom",
             source: function (b) {
                var a;
                b.element && (a = c(b.element).find("img").attr("src"));
                !a && "image" === b.type && b.href && (a = b.href);
                return a
             }
          },
          wrap: null,
          list: null,
          width: 0,
          init: function (b, a) {
             var g = this,
                d, k = b.width,
                h = b.height,
                e = b.source;
             d = "";
             for (var f = 0; f < a.group.length; f++) d += '<li><a style="width:' + k + "px;height:" + h + 'px;" href="javascript:jQuery.fancybox.jumpto(' + f + ');"></a></li>';
             this.wrap = c('<div id="fancybox-thumbs"></div>').addClass(b.position).appendTo("body");
             this.list = c("<ul>" + d + "</ul>").appendTo(this.wrap);
             c.each(a.group, function (b) {
                var d = e(a.group[b]);
                d && c("<img />").load(function () {
                   var a = this.width,
                      d = this.height,
                      e, f, l;
                   g.list && a && d && (e = a / k, f = d / h, l = g.list.children().eq(b).find("a"), 1 <= e && 1 <= f && (e > f ? (a = Math.floor(a / f), d = h) : (a = k, d = Math.floor(d / e))), c(this).css({
                      width: a,
                      height: d,
                      top: Math.floor(h / 2 - d / 2),
                      left: Math.floor(k / 2 - a / 2)
                   }), l.width(k).height(h), c(this).hide().appendTo(l).fadeIn(300))
                }).attr("src", d)
             });
             this.width = this.list.children().eq(0).outerWidth(!0);
             this.list.width(this.width * (a.group.length + 1)).css("left", Math.floor(0.5 * c(window).width() - (a.index * this.width + 0.5 * this.width)))
          },
          beforeLoad: function (b, a) {
             2 > a.group.length ? a.helpers.thumbs = !1 : a.margin["top" === b.position ? 0 : 2] += b.height + 15
          },
          afterShow: function (b, a) {
             if (this.list) this.onUpdate(b, a);
             else this.init(b, a);
             this.list.children().removeClass("active").eq(a.index).addClass("active")
          },
          onUpdate: function (b, a) {
             this.list && this.list.stop(!0).animate({
                left: Math.floor(0.5 * c(window).width() - (a.index * this.width +
                   0.5 * this.width))
             }, 150)
          },
          beforeClose: function () {
             this.wrap && this.wrap.remove();
             this.list = this.wrap = null;
             this.width = 0
          }
       }
    })(jQuery);
    (function (c) {
       if (window.FB) {
          var b = c.fancybox,
             a, g;
          b.helpers.comments = {
             defaults: {
                numberPosts: 7,
                commentsWidth: 420,
                colorScheme: "light"
             },
             formatURL: function (a) {
                a = a.replace(/\W+/g, "-");
                return a = a.replace(/^\-+|\-+$/g, "")
             },
             beforeShow: function (d) {
                g = b.current.href;
                a = d.commentsWidth;
                600 >= c(window).width() ? (b.helpers.comments.hideCmt(), b.coming.margin[1] = 10, b.coming.tpl.next = '<a class="fancybox-nav fancybox-next" href="javascript:;" style="right:0"><span style="right:0"></span></a>') : (b.coming.margin[1] = (a + 20), b.coming.tpl.next =
                   '<a class="fancybox-nav fancybox-next" href="javascript:;" style="right:' + (a + 10) + 'px"><span style="right:' + (a + 10) + 'px"></span></a>')
             },
             afterShow: function (d) {
                var k = "fb_cmt=" + encodeURIComponent(g),
                   h = c('link[rel="canonical"]').attr("href").replace(/topic/, lang_vi(document.title));
                c(".fancybox-comments-block").length || c('<div class="fancybox-comments-block fancybox-comments-overlay-wrap" style="width:' + (a + 10) + 'px"></div>').appendTo("body");
                var e = h.replace(/p\d+/, "") + "[" + b.helpers.comments.formatURL(k) +
                   "]",
                   f = c(".zzbv_FBcmt .fb_iframe_widget[href='" + e + "']");
                c(".zzbv_FBcmt:visible").fadeOut(300);
                f.length ? f.parent().fadeIn(300) : (c(".fancybox-comments-block").append('<div class="zzbv_FBcmt"><fb:comments href="' + e + '" width="' + a + '" num_posts="' + d.numberPosts + '" colorscheme="' + d.colorScheme + '" ></fb:comments></div>'), FB.XFBML.parse());
                history.replaceState(null, null, h + "?" + k);
                b.helpers.comments.showCmt()
             },
             onUpdate: function () {
                600 >= c(window).width() ? b.helpers.comments.hideCmt() : b.helpers.comments.showCmt()
             },
             beforeClose: function () {
                b.helpers.comments.hideCmt();
                history.replaceState(null, null, location.pathname)
             },
             hideCmt: function () {
                c("#fancybox-thumbs").css("margin-left", 0);
                c(".fancybox-comments-block").animate({
                   right: "-" + (a + 10) + "px"
                })
             },
             showCmt: function () {
                c("#fancybox-thumbs").css("margin-left", "-" + (a / 2 + 10) + "px");
                c(".fancybox-comments-block").animate({
                   right: 0
                })
             }
          }
       }
    })(jQuery);
    /android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent) || jQuery(function (c) {
       c(".post-entry img:not([src*='illiweb.com']):not([src*='imgfast.net'])").replaceWith(function () {
          return '<a href="' + this.src + '">DEVs</a>'
       });
       c(".post-entry a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif'],a[href$='.bmp']").not("a[href*='illiweb.com']").not("a[href*='imgfast.net']").not("a[href*='?fb_cmt=']").attr({
          title: function () {
             var b = c(this).text();
             return "" == b || this.href == b ?
                "DEVs" : b
          },
          "class": "lb_lazy fancybox-comments",
          "data-fancybox-group": function () {
             return "gallery" + c(this).closest(".postmain").prev().attr("name")
          }
       }).html(function () {
          return '<img alt="zzBv" src="' + this.href + '" />'
       });
       c(".lb_lazy").fancybox({
          padding: 0,
          openEffect: "fade",
          closeEffect: "fade",
          margin: [10, 10, 0, 10],
          helpers: {
             overlay: {
                closeClick: !1
             },
             title: {
                type: "over"
             },
             thumbs: {
                width: 70,
                height: 70
             },
             comments: {}
          },
          tpl: {
             closeBtn: '<a class="fancybox-item fancybox-close" href="javascript:;"></a>',
             next: '<a class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
             prev: '<a class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
          }
       });
       /\?fb_cmt=/.test(location.search) && c(".fancybox-comments[href='" + decodeURIComponent(GetParam("fb_cmt")) + "']").click()
    });


    Tùy biến với tham số:

    THAM SỐ PHÂN LOẠIMẶC ĐỊNH GHI CHÚ
    numberPosts number 7 Số bình luận tối đa sẽ hiển thị.
    commentsWidth number 420 Chiều rộng phần bình luận.
    colorScheme string "light" Dùng "dark" cho giao diện bình luận tối.


    Zzbaivong
    Nguồn : DEVS

    #1 - Posted on 1/1/2014, 09:39
    Xem lý lịch thành viên http://www.cntt-k3.org/
    avatar

    dittcumay12
    avatar

    dittcumay12

    Group: Member

    Hiện đang:
    Bài viết : 21
    Points : 22
    Birthday : 06/02/1994
    Thanks : -1
    Đến từ : lồn

    Member
    Xem lý lịch thành viên

    Member
    Bài viết thứ :2

    Đăng vào:on 11/2/2014, 18:10

    Member
    11111111111111111111111111111111111

    #2 - Posted on 11/2/2014, 18:10
    Xem lý lịch thành viên

    Đang kiểm tra dữ liệu...

    Bạn phải điền đầy đủ thông tin đăng ký.

    Số ký tự phải từ 3 trở lên
    Hãy chọn tài khoản khác
    Có thể dùng tài khoản này
    Không sử dụng địa chỉ này
    E-mail sẽ được kiểm sau
    Số ký tự phải từ 3 trở lên
    Trùng tên đăng nhập
    Chưa đúng
    Chính xác

    Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | www.sosblogs.com
    YOUR BANNER HERE
    728x90