[code] xem ảnh với fancybox + login + thông báo tin nhắn

  • the_dav
    Có thể nói mình rất ưng ý với tính năng của fancybox load khá là nhanh. Không như các bài viết trước mình chia sẻ thì nó tổng hợp khá rộng. nhiều ae ko muốn sài các chức năng login và thông báo mình sẽ loại ra ngoài cho anh em.

    Demo:

    Css fancybox


    Code:

    *! fancyBox v2.1.0 fancyapps.com | fancyapps.com/fancybox/#license */
    .fancybox-wrap,
    .fancybox-skin,
    .fancybox-outer,
    .fancybox-inner,
    .fancybox-image,
    .fancybox-wrap iframe,
    .fancybox-wrap object,
    .fancybox-nav,
    .fancybox-nav span,
    .fancybox-tmp
    {
       padding: 0;
       margin: 0;
       border: 0;
       outline: none;
       vertical-align: top;
    }

    .fancybox-wrap {
       position: absolute;
       top: 0;
       left: 0;
       z-index: 999;
    }

    .fancybox-skin {
       position: relative;
       background: #f9f9f9;
       color: #444;
       text-shadow: none;
       -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
               border-radius: 4px;
    }

    .fancybox-opened {
       z-index: 999;
    }

    .fancybox-opened .fancybox-skin {
       -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
               box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .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;
       margin: 0;
       padding: 15px;
       white-space: nowrap;
    }

    .fancybox-image, .fancybox-iframe {
       display: block;
       width: 100%;
       height: 100%;
    }

    .fancybox-image {
       max-width: 100%;
       max-height: 100%;
    }

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
       background-image: url('http://i.imgur.com/zq7S7MG.png');
    }

    #fancybox-loading {
       position: fixed;
       top: 50%;
       left: 50%;
       margin-top: -22px;
       margin-left: -22px;
       background-position: 0 -108px;
       opacity: 0.8;
       cursor: pointer;
       z-index: 999;
    }

    #fancybox-loading div {
       width: 44px;
       height: 44px;
       background: url('http://i.imgur.com/HsvVmma.gif') center center no-repeat;
    }

    .fancybox-close {
       position: absolute;
       top: -18px;
       right: -18px;
       width: 36px;
       height: 36px;
       cursor: pointer;
       z-index: 999;
    }

    .fancybox-nav {
       position: absolute;
       top: 0;
       width: 40%;
       height: 100%;
       cursor: pointer;
       text-decoration: none;
       background: transparent url('https://raw.githubusercontent.com/fancyapps/fancyBox/master/source/blank.gif'); /* helps IE */
       -webkit-tap-highlight-color: rgba(0,0,0,0);
       z-index: 999;
    }

    .fancybox-prev {
       left: 0;
    }

    .fancybox-next {
       right: 0;
    }

    .fancybox-nav span {
       position: absolute;
       top: 50%;
       width: 36px;
       height: 34px;
       margin-top: -18px;
       cursor: pointer;
       z-index: 999;
       visibility: hidden;
    }

    .fancybox-prev span {
       left: 10px;
       background-position: 0 -36px;
    }

    .fancybox-next span {
       right: 10px;
       background-position: 0 -72px;
    }

    .fancybox-nav:hover span {
       visibility: visible;
    }

    .fancybox-tmp {
       position: absolute;
       top: -9999px;
       left: -9999px;
       visibility: hidden;
    }

    /* Overlay helper */

    .fancybox-lock {
       overflow: hidden;
    }

    .fancybox-overlay {
       position: absolute;
       top: 0;
       left: 0;
       overflow: hidden;
       display: none;
       z-index: 999;
       background: url('http://i.imgur.com/9xmkaJc.png');
    }

    .fancybox-overlay-fixed {
       position: fixed;
       bottom: 0;
       right: 0;
    }

    .fancybox-lock .fancybox-overlay {
       overflow: auto;
       overflow-y: scroll;
    }

    /* Title helper */

    .fancybox-title {
       visibility: hidden;
       font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
       position: relative;
       text-shadow: none;
       z-index: 999;
    }

    .fancybox-opened .fancybox-title {
       visibility: visible;
    }

    .fancybox-title-float-wrap {
       position: absolute;
       bottom: 0;
       right: 50%;
       margin-bottom: -35px;
       z-index: 999;
       text-align: center;
    }

    .fancybox-title-float-wrap .child {
       display: inline-block;
       margin-right: -100%;
       padding: 2px 20px;
       background: transparent; /* Fallback for web browsers that doesn't support RGBa */
       background: rgba(0, 0, 0, 0.8);
       -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
               border-radius: 15px;
       text-shadow: 0 1px 2px #222;
       color: #FFF;
       font-weight: bold;
       line-height: 24px;
       white-space: nowrap;
    }

    .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;
       padding: 10px;
       background: #000;
       background: rgba(0, 0, 0, .8);
    }

    .resizebox, .resizebox .resize_content, .resizebox .resize_border, .resizebox .resize_filler {display: none !important;}
    a.fancybox .iconPlayer {background:url('http://i.imgur.com/9xmkaJc.png') no-repeat scroll center center transparent;opacity:0.8;z-index:99;padding:40px !important;bottom: 150px;position: absolute;right: 200px;}
    .post-entry div a.fancybox .iconPlayer {bottom: -20px;}
    .post-entry .entry-content a.fancybox .iconPlayer {bottom: 150px;}

    jquery fancybox


    JS bạn dow ở đây:
    Code:
    https://drive.google.com/file/d/0B3JtgwSeBcwoY1dKMWk4aFBCczg/view?usp=sharing

    Khi dow xong bạn up lên fm bằng cách vào acp>modules >HTML & JAVASCRIPT>>Javascript codes management tạo js trong này rùi save vào lấy link
    cho vào
    Code:
    <script src="link js vừa tạo" type="text/javascript"></script>

    Ở trên là chỉ có mỗi xem ảnh thôi. nếu muốn có thêm đăng nhập fancy và thông báo khi có tin nhắn thì thì cho thêm vào head hoặc footer

    Code:
    <script type="text/javascript">
       $(document).ready(function () {
     var u = document.location.href;
     $('body').append('<div style="display:none"><div id="login_form" class="login-box-fancybox"><div class="login-box-fancybox-content"><div class="login-form-fancybox"><form method="post" method="post" action="/login?redirect=' + u + '"><label><em>Tên truy cập : </em><input type="text" name="username"></label><label><em>Mật Khẩu : </em><input type="password" name="password"></label><label style="float: left; margin-top: 5px; text-align: left;"><em style="margin-right: 10px; margin-top: 3px; width: 85px; margin-left: 7px;">Ghi nhớ : </em><input type="checkbox" name="autologin" checked="true" style="width: 20px;"></label><input type="submit" name="login" value="Đăng nhập" class="submit"></form></div></div><div class="rpass"><a href="profile?mode=sendpassword">Quên mật khẩu</a></div></div></div>');
     $('a[href="/login"], a[href="/login?connexion"]').attr('id', 'login').attr('href', '#login_form');
     $('a#login').fancybox();
     $("#login_form").bind("submit");
     $('a img#i_icon_mini_new_message').each(function () {
     var nmp = $(this).attr("alt").match(/[0-9]+/);
     $.fancybox('<div id="FancyboxMP" style="width: 220px;text-align: center"><a href="/privmsg?folder=inbox"><img style="cursor:pointer" width="200" height="171" onmouseout="this.src=\'http://goo.gl/uf09H\'" src="http://goo.gl/uf09H" onmouseover="this.src=\'http://goo.gl/D88fp\'" /></a><p style="font-size: 13px;font-weight: 700;padding-top: 10px;">bạn có <span style="color: red;">' + nmp + '</span> tin nhắn</p></div>');
     });
       });
      </script>

    #codefm

    Tags: #code

  • Kou94
    CSS dư đoạn này rồi ad. Very Happy

    Code:
    /* breadcrumb for punbb - devs.forumvi.com */
    .pun-crumbs{padding:1em 0}
    .navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
    .navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
    .navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
    .navstrip li a{font-weight:700;text-decoration:none}
    .navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
    .navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
    .navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
    .navstrip > li.begin:before{border-left-color:#1f537b}
    .navstrip > li:hover,.navstrip > li:hover a{background-color:#d7edfc;color:#000}
    .navstrip > li:hover:before{border-left-color:#d7edfc}

  • Móm Đặc Biệt
    Khuyến mãi Smile


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • the_dav
    chắc copy nhầm của site demo. móm xóa hộ a đoạn thừa với

  • Kou94
    Hóng bài tut cách "bỏ qua" trang /post 1 cách nhanh gọn :3

  • Móm Đặc Biệt
    Post bài không chuyển trang hả


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • Kou94
    Titus đã viết:Post bài không chuyển trang hả
    Khi post bài nó có chuyển sang 1 trang "trung gian" là /post rồi chờ 2-3 giây nó mới chuyển qua bài viết ấy, hotrofm cũng chuyển như thế nhưng thời gian rút ngắn lại, nó "lướt" qua trang /post đó luôn Very Happy

  • Móm Đặc Biệt
    Sẽ share Very Happy


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • Kou94
    Thớt có thể sửa lại cho thanh scroll không bị ẩn và khi trượt xuống hoặc lên thì ảnh vẫn nằm ở giữa trình duyệt như trình xem ảnh của hotrofm đc ko?

  • Móm Đặc Biệt
    Vào CSS xóa đoạn này đi:
    Code:
    .fancybox-lock {
      overflow: hidden;
    }

  • Kou94
    Cảm ơn vì đã hỗ trợ

  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
220
Points :
316
Like :
46
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
112
Points :
165
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MEM LV3
Bài viết :
220
Points :
316
Like :
46
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
112
Points :
165
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MEM LV3
Bài viết :
112
Points :
165
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MEM LV3
Bài viết :
112
Points :
165
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MEM LV3
Bài viết :
112
Points :
165
Like :
9
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết