Diễn Đàn Phan Ri Club Online
Chào Mừng Bạn Đến Với PhanRiClub Diễn Đàn Giao Lưu Kết Nối Bạn Bè ! Hãy Đăng Kí Thành Viên Để Chia Sẽ Nhưng Thủ Thuật Mà Bạn Biết & Còn Nếu Là Thành Viên Hãy Đăng Nhập Chia Sẽ Bài Viết Các Bạn Nhé ! Diễn Đàn Mới Thành Lập Còn Nhiều Thiếu Sót Rất Mong Sự Đóng Góp Nhiệt Tình Cửa Các Bạn ! Xin Cảm Ơn Các Bạn Nhiều
    Đăng nhập hoặcđăng kýđể tham gia thảo luận trên diễn đàn




    You are not connected. Please login or register


    Bài viết : [Hướng Dẫn - Code] Fancybox giúp xem ảnh, đăng nhập nhanh, thông báo tin nhắn


    Bài viết thứ :1
    Đăng vào:on Wed Dec 21, 2016 1:11 am
    Admin

    Admin

    Admin

    avatar

    Với fancybox mọi việc đều trở lên nhanh chóng tiện dụng, ngoài việc giúp bạn có xem ảnh trong bài viết mượt mà, fancybox còn có thể tạo ra một bảng đăng nhập nhanh và thông báo tin nhắn nếu bạn cần



    Bước 1: Thêm vào css
    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: transparenturl('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;}
    Bước 2: Acp>modules >HTML & JAVASCRIPT>>Javascript codes management tại một js để đó và lưu lại nhưng không đánh dấu vào ô nào

    Js copy ở đây: https://drive.google.com/file/d/0B3JtgwSeBcwoY1dKMWk4aFBCczg/view?usp=sharing

    Bước 3: Thay link JS ở code dưới bằng link của js vừa tạo ở bước 2
    Code:
    <script src="link JS" type="text/javascript"></script>
    Vậy là xong



    Hãy Cùng Mình Xây Dựng Diễn Đàn PhanRiClub Các Bạn Nhé

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

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

     
    • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Sosblogs.com