demo ngay tại hotrofm

chức năng thông báo khi nhận dc tin nhắn xem ảnh bằng fancybox xem video bằng fancy

đầu tiên các bạn xóa code fancy box cũ đang dùng nhé hihi

tiếp theo
đây là code

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://scripts-giobanii.googlecode.com/svn/trunk/css/images/fancybox_sprite.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://scripts-giobanii.googlecode.com/svn/trunk/css/images/fancybox_loading.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('http://scripts-giobanii.googlecode.com/svn/trunk/css/images/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://scripts-giobanii.googlecode.com/svn/trunk/css/images/fancybox_overlay.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
 img {cursor:
url('http://scripts-giobanii.googlecode.com/svn/trunk/css/images/default/zoomin.cur'),
 pointer !important;}
#fancybox-overlay {cursor:
url('http://scripts-giobanii.googlecode.com/svn/trunk/css/images/default/zoomout.cur'),
 pointer !important;}
a.fancybox .iconPlayer
{background:url('http://scripts-giobanii.googlecode.com/svn/trunk/css/images/play-overlay.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;}

/*-- Bloque LogIn facyBox --*/
.login-box-fancybox
 {height: 145px; border-left-color: rgb(0, 0, 0); border-right-color:
rgb(0, 0, 0); background-color: transparent; padding: 10px 20px 0;
overflow: auto; width: 310px;}
.login-box-fancybox-content{width: 310px; height: 126px; background: none repeat scroll 0% 0% transparent;}
.login-form-fancybox
 {background:
url("http://scripts-giobanii.googlecode.com/svn/trunk/css/images/lock.png")
 no-repeat scroll left center transparent;margin: 0 auto;padding: 20px 0
 0 60px;width: 250px;}
.login-form-fancybox label {font-family: Verdana;display: block;font-size: 12px;padding-bottom: 5px;text-align: right;}
.login-form-fancybox
 label em {color: #000000;font-family: Verdana;display: block;float:
left;font-style: normal;font-size: 12px;text-align: right;}
.login-form-fancybox input {border: 1px solid #CCCCCC;height: 22px;width: 146px;}
.login-form-fancybox
 input.submit {padding: 3px 5px;-webkit-border-radius:
5px;-moz-border-radius: 5px;border-radius: 5px;font-size: 15px;border:
1px solid #CCCCCC;float: right;height: auto;width: auto;}
.login-form-fancybox input.submit:hover, .login-form-fancybox input.submit:focus {cursor:pointer;}
.login-form-fancybox input.submit:active, .login-box-fancybox .rpass a:active {position:relative; top: 1px;}
.login-box-fancybox .rpass a {text-decoration: none;}
.login-box-fancybox
 .rpass {text-align: right;background:
url("http://scripts-giobanii.googlecode.com/svn/trunk/css/images/user_key.png")
 no-repeat scroll left top transparent;float: right;height: 16px;margin:
 -1px auto 0;padding: 2px 0 0 12px;width: 150px;}
/*-- Bloque LogIn facyBox --*/



cho vào head hoặc footer

Code:

<script src="http://hotro.4forum.biz/44582.js" type="text/javascript"></script>