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. sanvu88

    sanvu88 Cháu ngoan Bác Hồ

    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.
  2. MeoHoang2009

    MeoHoang2009 Học sinh phổ thông

    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.
     
  3. shinratensei

    shinratensei Kỹ sư

    Anh SangVu ơi anh có host nào không cho em xin cái đi
     
  4. sanvu88

    sanvu88 Cháu ngoan Bác Hồ

    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.
  5. shinratensei

    shinratensei Kỹ sư

    ối zồi ôi. chơi máy chủ luôn.. Máy 24/24 quá
     
  6. shinratensei

    shinratensei Kỹ sư

    Thêm chưc năng ol và of đi anh .
     
  7. khanhhung37

    khanhhung37 Học sinh phổ thông

    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 đỡ
     
  8. nampro

    nampro Kỹ sư

    Tìm xem vị trí của navigation ở đâu thì thêm cái include vào dưới nó
     
  9. sanvu88

    sanvu88 Cháu ngoan Bác Hồ

    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
     
  10. codononline

    codononline Học sinh phổ thông

    Đánh dấu xài sau, giờ bận quá
     
Moderators: sgesvn
Tags: slide, xenforo

Chia sẻ trang này