Đăng nhập

Đừng nghĩ rằng bạn đang cô đơn bởi vì có ai đó đang sẵn sàng giơ tay cho bạn nắm. Hãy cùng chia sẻ để vơi đi nỗi buồn và tận hưởng trọn vẹn niềm vui trong cuộc sống này bạn nhé!




You are not connected. Please login or register

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

  1. admin
    • Admin

    avatar
    Nam posts : 104
    thanked : 0
    Join date : 21/08/2009
    Age : 28
    Đến từ : ca mau

    1
    [Share] 2 kiểu xem ảnh dùng lightbox on Fri Oct 05, 2012 9:35 pm

    1.xem ảnh với Fancybox
    demo :


    Bắt đầu nào :


    Youtube: [You must be registered and logged in to see this link.]
    Quản lý tổng thể - Display - Templates - overall_header:
    Thêm vào bên dưới
    Code:
    CSS
    ...bằng:
    Code:
    <link rel="stylesheet" href="http://link.08sh.tk/Cbox" type="text/css" />
    Thêm vào bên dưới:
    Code:
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    ...code sau:
    Code:
    [table class="spoiler" align="center" border="0" cellpadding="0" cellspacing="1" width="90%"][tr][td class="spoiler_content"]<script src="http://link.08sh.tk/Sbox" type="text/javascript"></script>[/td][/tr][/table]
    Ưu điểm: Ứng dụng xem ảnh, chèn webside, video, flash, Ajax,...
    Nhược điểm: Hơi... nặng
    2-Xem ảnh với Slimbox
    demo :

    Youtube: [You must be registered and logged in to see this link.]
    Bước 1: Chèn vào Css:
    Code:
    #lbOverlay{position:fixed;z-index:
     
    999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}#lbCenter,#lbBottomContainer{position:absolute;z-index:
     999;overflow:hidden;background-color:#fff;}.lbLoading{background:#fff
    url(http://i27.servimg.com/u/f27/14/67/90/38/novfao10.gif) no-repeat
    center;}#lbImage{position:absolute;left:0;top:0;border:10px solid
    #fff;background-repeat:no-repeat;}#lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}#lbPrevLink{left:0;}#lbPrevLink:hover{background:transparent
     url(http://i27.servimg.com/u/f27/14/67/90/38/11qo2n10.gif) no-repeat 0
    15%;}#lbNextLink{right:0;}#lbNextLink:hover{background:transparent
    url(http://i27.servimg.com/u/f27/14/67/90/38/1r7u6o10.gif) no-repeat
    100% 15%;}#lbBottom{font-family:Verdana, Arial, Geneva, Helvetica,
    sans-serif;font-size:10px;color:#666;line-height:1.4em;text-align:left;border:10px
     solid
    #fff;border-top-style:none;}#lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent
     url(http://i27.servimg.com/u/f27/14/67/90/38/1217by10.gif) no-repeat
    center;outline:none;margin:5px
    0;}#lbCaption,#lbNumber{margin-right:71px;}
    .postbody img{max-width:450px;}
    Bước 2: Thêm vào header:
    Trong header. Thêm vào bên dưới
    Code:
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    ...bằng code:
    Code:
    [table class="spoiler" align="center" border="0" cellpadding="0" cellspacing="1" width="90%"][tr][td class="spoiler_content"]<script type="text/javascript" src="http://link.08sh.tk/Slimbox"></script>[/td][/tr][/table]
    Bước 3: Kiểm tra Templates
    1- Xem trong viewtopic_body còn đoạn script này không, nếu không thì thêm vào.
    Code:
    [table class="spoiler" align="center" border="0" cellpadding="0" cellspacing="1" width="90%"][tr][td class="spoiler_content"]<!-- BEGIN switch_image_resize --><script type="text/javascript">
    //<![CDATA[
    $(resize_images({
     'selector' : '.postbody', 'max_width' :
    {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' :
    {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]></script><!-- END switch_image_resize -->[/td][/tr][/table]
    2- Kiểm tra overall_header xem có đoạn này chưa:
    Code:
    <div id="page-body">
    3- Kiểm tra viewtopic_body xem còn đoạn này không:
    Code:
    <div class="postbody">
    4- Quản lý tổng thể - Messages and e-mails - Cấu hình diễn đàn - Images resize : Xoá trống 2 ô Width và Height
    Ưu điểm: Trình xem ảnh siêu nhẹ.
    Nhược điểm: Chỉ để xem ảnh chứ chẳng làm gì khác.
    [

  2. sayedn73

    dulieuava : 1|0|1|0|0|0|0|1|
    Nam posts : 1
    thanked : 1
    Join date : 05/01/2015

    2
    Re: [Share] 2 kiểu xem ảnh dùng lightbox on Mon Jan 05, 2015 5:37 am

    thank'sthank's

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 | Create a blog










Log In