Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

 

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

Tác giả: - vào lúc:
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
8/29/2016, 13:24
#1
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: code - [code] xem ảnh với fancybox + login + thông báo tin nhắn 0CVJAOI

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
Bài viết : 134
Points : 210
Like : 12
Punbb
An toàn
Kou94MEM LV3
8/29/2016, 17:30
#2
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}
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/29/2016, 18:35
#3
Khuyến mãi Smile
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
8/29/2016, 18:41
#4
chắc copy nhầm của site demo. móm xóa hộ a đoạn thừa với
Kou94
Bài viết : 134
Points : 210
Like : 12
Punbb
An toàn
Kou94MEM LV3
8/29/2016, 19:02
#5
Hóng bài tut cách "bỏ qua" trang /post 1 cách nhanh gọn :3
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/29/2016, 19:10
#6
Post bài không chuyển trang hả
Kou94
Bài viết : 134
Points : 210
Like : 12
Punbb
An toàn
Kou94MEM LV3
8/29/2016, 19:22
#7
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
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/29/2016, 19:32
#8
Sẽ share Very Happy
Kou94
Bài viết : 134
Points : 210
Like : 12
Punbb
An toàn
Kou94MEM LV3
8/31/2016, 19:53
#9
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?

code - [code] xem ảnh với fancybox + login + thông báo tin nhắn 14e0x1w
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/31/2016, 21:14
#10
Vào CSS xóa đoạn này đi:

Code:

.fancybox-lock {
  overflow: hidden;
}
Kou94
Bài viết : 134
Points : 210
Like : 12
Punbb
An toàn
Kou94MEM LV3
8/31/2016, 21:27
#11
Cảm ơn vì đã hỗ trợ
Sponsored content
#12
Ads bannerAds banner