toilet

share slide đẹp cho xenforo

Thảo luận trong 'XenForo'

Đang xem chủ đề này ( Thành viên: 0, Khách: 0)

Moderators: sgesvn
  1. Đăng 23/9/13 #1

    sanvu88 Cháu ngoan Bác Hồ

    Số bài viết: 989
    Đã được thích: 992
    Yahoo Messenger
    Skype
    Facebook Profile
    Hàng nóng vừa rip xong share luôn cho ai cần thì xài :D

    demo ảnh:
    sshot-1.

    Tạo temp slide_codientu

    Mã:
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyAccordion.js"></script>
    <script type="text/javascript" src="js/utility.js"></script>
    <div id="accordion-1">
                <dl class="easy-accordion">
                    <dt class="" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 0px;">First slide<span class="slide-number" style="bottom: 0px;">01</span></dt>
                    <dd class="" style="left: 46px; width: 470px; height: 193px; display: block;"><h2>This is the first slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img1.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                    <dt class="hover" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 46px;">Second slide<span class="slide-number" style="bottom: 0px;">02</span></dt>
                    <dd class="" style="width: 470px; height: 193px; left: 92px; display: block;"><h2>Here is the second slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img2.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                    <dt class="no-more-active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 92px;">One more slide<span class="slide-number" style="bottom: 0px;">03</span></dt>
                    <dd class="no-more-active" style="width: 470px; height: 193px; left: 138px; display: block;"><h2>One more slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img3.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                    <dt class="active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 563.8135759599547px;">Another slide<span class="slide-number" style="bottom: 0px;">04</span></dt>
                    <dd class="active" style="width: 470px; height: 193px; left: 616.1553886625081px; display: block;"><h2>Another slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img4.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                    <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 708px;" class="">Wow one more<span class="slide-number" style="bottom: 0px;">05</span></dt>
                    <dd style="width: 470px; height: 193px; left: 754px; display: block;" class=""><h2>Unbilievable one more slide here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img5.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                    <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 754px;" class="">Last one<span class="slide-number" style="bottom: 0px;">06</span></dt>
                    <dd style="width: 470px; height: 193px; left: 800px; display: block;" class=""><h2>This is definitely the last one</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img6.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                </dl>
            </div>
    copy đoạn này vào extra.css

    Mã:
    /* Begind slide */
    html {
        font-size: 62.5%;
    }
    body {
        color: #294F88;
        font-size: 1.2em;
    }
    .sample {
        background: none repeat scroll 0 0 #D7E7FF;
        border: 1px solid #92CDEC;
        margin: 30px;
        padding: 30px;
    }
    h1 {
        font-size: 2em;
        margin: 0 0 20px;
        padding: 0;
    }
    h2 {
        font-size: 1.6em;
        margin: 40px 0 20px;
        padding: 0;
    }
    .easy-accordion h2 {
        font-size: 1.6em;
        margin: 0 0 20px;
        padding: 0;
    }
    p {
        font-size: 1.2em;
        line-height: 170%;
        margin-bottom: 20px;
    }
    .easy-accordion {
        display: block;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
    }
    .easy-accordion dt, .easy-accordion dd {
        margin: 0;
        padding: 0;
    }
    .easy-accordion dt, .easy-accordion dd {
        position: absolute;
    }
    .easy-accordion dt {
        cursor: pointer;
        margin-bottom: 0;
        margin-left: 0;
        transform: rotate(-90deg);
        transform-origin: 20px 0 0;
        z-index: 5;
    }
    .easy-accordion dd {
        opacity: 0;
        overflow: hidden;
        z-index: 1;
    }
    .easy-accordion dd.active {
        opacity: 1;
    }
    .easy-accordion dd.no-more-active {
        opacity: 1;
        z-index: 2;
    }
    .easy-accordion dd.active {
        z-index: 3;
    }
    .easy-accordion dd.plus {
        z-index: 4;
    }
    .easy-accordion .slide-number {
        bottom: 0;
        font-size: 1.1em;
        font-weight: normal;
        left: 10px;
        position: absolute;
        transform: rotate(90deg);
    }
    dd p {
        line-height: 120%;
    }
    #accordion-1 {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #B5C9E8;
        height: 245px;
        padding: 30px;
        width: 800px;
    }
    #accordion-1 dl {
        height: 245px;
        width: 800px;
    }
    #accordion-1 dt {
        background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-inactive-1.jpg") no-repeat scroll 0 0 #FFFFFF;
        color: #26526C;
        font-family: Tahoma,Geneva,sans-serif;
        font-size: 1.1em;
        font-weight: bold;
        height: 46px;
        letter-spacing: 1px;
        line-height: 44px;
        padding: 0 15px 0 0;
        text-align: right;
        text-transform: uppercase;
    }
    #accordion-1 dt.active {
        background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-active-1.jpg") no-repeat scroll 0 0 #FFFFFF;
        color: #FFFFFF;
        cursor: pointer;
    }
    #accordion-1 dt.hover {
        color: #68889B;
    }
    #accordion-1 dt.active.hover {
        color: #FFFFFF;
    }
    #accordion-1 dd {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide.jpg") repeat-x scroll left bottom transparent;
        border-color: #DBE9EA #DBE9EA #DBE9EA -moz-use-text-color;
        border-image: none;
        border-style: solid solid solid none;
        border-width: 1px 1px 1px 0;
        margin-right: 3px;
        padding: 25px;
    }
    #accordion-1 .slide-number {
        color: #68889B;
        font-weight: bold;
        left: 10px;
    }
    #accordion-1 .active .slide-number {
        color: #FFFFFF;
    }
    #accordion-1 a {
        color: #68889B;
    }
    #accordion-1 dd img {
        float: right;
        margin: 0 0 0 30px;
    }
    #accordion-1 h2 {
        font-size: 2.5em;
        margin-top: 10px;
    }
    #accordion-1 .more {
        display: block;
        padding-top: 10px;
    }
    /* End slide */
    Chèn

    Mã:
    <xen:include template="slide_codientu" />  
    vào vị trí muốn hiển thị

    Tải file đính kèm up lên host

    Bác nào copy nhớ để cho em cái nguồn. Thank

    Các file đính kèm:

    • js.zip
      Kích thước:
      21.6 KB
      Đọc:
      77
    hieulv105(deleted member) thích bài này.
    #1
  2. Đăng 24/9/13 #2

    MeoHoang2009 Học sinh phổ thông

    Số bài viết: 20
    Đã được thích: 5
    Bài này mình có yêu cầu bên xf mà chưa thấy phản hồi, qua đây thấy có. Hi. nhanh thiệt. Rất thích cách làm việc của bạn sanvu88.
    #2
  3. Đăng 26/9/13 #3

    shinratensei Kỹ sư

    Số bài viết: 207
    Đã được thích: 51
    Anh SangVu ơi anh có host nào không cho em xin cái đi
    #3
  4. Đăng 26/9/13 #4

    sanvu88 Cháu ngoan Bác Hồ

    Số bài viết: 989
    Đã được thích: 992
    Yahoo Messenger
    Skype
    Facebook Profile
    A ko xài host :D a dùng vDedicated máy chủ riêng mà cũng không dùng direct hay cpanel nên không creat host được
    hieulv105shinratensei thích bài này.
    #4
  5. Đăng 26/9/13 #5

    shinratensei Kỹ sư

    Số bài viết: 207
    Đã được thích: 51
    ối zồi ôi. chơi máy chủ luôn.. Máy 24/24 quá
    #5
  6. Đăng 26/9/13 #6

    shinratensei Kỹ sư

    Số bài viết: 207
    Đã được thích: 51
    Thêm chưc năng ol và of đi anh .
    #6
  7. Đăng 13/10/13 #7

    khanhhung37 Học sinh phổ thông

    Số bài viết: 14
    Đã được thích: 0
    Ví dụ mình muốn chèn vào ngay đầu trang dưới navigation thì chèn code vào đâu các bạn nhỉ? Mình mới làm quen với XFR nên mong các bạn giúp đỡ
    #7
  8. Đăng 13/10/13 #8

    nampro Kỹ sư

    Số bài viết: 304
    Đã được thích: 474
    Tìm xem vị trí của navigation ở đâu thì thêm cái include vào dưới nó
    #8
  9. Đăng 13/10/13 #9

    sanvu88 Cháu ngoan Bác Hồ

    Số bài viết: 989
    Đã được thích: 992
    Yahoo Messenger
    Skype
    Facebook Profile
    Mã:
    <xen:include template="slide_codientu" />
    Chèn code đó xuống dưới code hiển thị của nav là đc mà bạn :D
    Mà cụ thể là bạn muốn nó hiển thị dưới nav hay dưới breadcum
    #9
  10. Đăng 13/10/13 #10

    codononline Học sinh phổ thông

    Số bài viết: 6
    Đã được thích: 0
    Đánh dấu xài sau, giờ bận quá
    #10
Moderators: sgesvn
Tags: slide, xenforo

Chia sẻ trang này