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

avatar

the_dav189
268
41
Punbb
Quản trị
Trảm Phong

Bài viết :
189
Points :
268
Like :
41
Punbb
Quản trị
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
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
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}
 Trả lời bài viết
avatar

Karbyz49234
501
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
234
Points :
501
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Khuyến mãi Smile
 Trả lời bài viết
avatar

the_dav189
268
41
Punbb
Quản trị
Trảm Phong

Bài viết :
189
Points :
268
Like :
41
Punbb
Quản trị
chắc copy nhầm của site demo. móm xóa hộ a đoạn thừa với
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
Hóng bài tut cách "bỏ qua" trang /post 1 cách nhanh gọn :3
 Trả lời bài viết
avatar

Karbyz49234
501
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
234
Points :
501
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Post bài không chuyển trang hả
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
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
 Trả lời bài viết
avatar

Karbyz49234
501
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
234
Points :
501
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Sẽ share Very Happy
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
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?

 Trả lời bài viết
avatar

Karbyz49234
501
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
234
Points :
501
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Vào CSS xóa đoạn này đi:
Code:
.fancybox-lock {
  overflow: hidden;
}
 Trả lời bài viết
avatar

Kou94109
157
8
Punbb
An toàn
Oppai daisuki~
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
109
Points :
157
Like :
8
Punbb
An toàn
Oppai daisuki~
Cảm ơn vì đã hỗ trợ
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...