[jQuery] - ELEGANT ACCORDION WITH JQUERY AND CSS3 ทำภาพสไลด์ แบบเจ๋งๆ

ขั้นตอนการติดตั้ง

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML 

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ
มองหา url รูป 
และแก้ไข url รูป ใน bg ของรูปที่จะแสดงแต่ละ ID
เช่น bg1
ul.accordion li.bg1
background-image:url(url รูป);

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin> 

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}
ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(url รูป );
}
ul.accordion li.bg2{
    background-image:url(url รูป );
}
ul.accordion li.bg3{
    background-image:url(url รูป );
}
ul.accordion li.bg4{
    background-image:url(url รูป );
}
ul.accordion li.bleft{
    border-left:2px solid #fff;
}
ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}
ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}
ul.accordion li .bgDescription{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1bY5s1x0074ZK9T7RdZQKeBx_h0_HO4rU5P47kiNwkMDD6miHfEbEzqthPLM4vK3pzIMsA6f24Sujra-R2O_CAt8_dB81EK4BezwpW0G-oeu98IJCxkAh5UCpUFB1ICLvNFQ3oEHzEXO/s1600/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ให้คุณค้นหาโค้ด </body> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

จากนั้นก็บันทึกเทมเพลต



ขั้นที่ 3 ติดตั้ง HTML ตำแหน่ง slideshow ที่ต้องการแสดง

แก้ไขรายละเอียด Heading  Heading Some descriptive text url ลิ้งเชื่อมโยง


<ul class="accordion" id="accordion">

    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="url ลิ้งเชื่อมโยง">more ?</a>
        </div>
    </li>

</ul>

จำนวนที่จะแสดง  slideshow  ขึ้นอยู่กับ CSS  ul.accordion li.bg1  ตัวอย่างมี bg1-bg4 สามารถเพิ่มได้ตามความต้องการ เช่น ul.accordion li.bg5 ul.accordion li.bg6

ก็จะได้ HTML ดังนี้ ไปวางตามตำแหน่งที่ต้องการ หรืออาจจะวางในGadget html ก็ได้ครับ

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="url ลิ้งเชื่อมโยง">more ?</a>
        </div>
    </li>
    <li class="bg2">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="url ลิ้งเชื่อมโยง">more ?</a>
        </div>
    </li>
    <li class="bg3">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="url ลิ้งเชื่อมโยง">more ?</a>
        </div>
    </li>
    <li class="bg4">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="url ลิ้งเชื่อมโยง">more ?</a>
        </div>
    </li>
</ul>

ตัวอย่าง

• ทดสอบ1

  ทดสอบ1

  รายละเอียด ทดสอบ1
  more ?
• ทดสอบ2

  ทดสอบ2

  รายละเอียด ทดสอบ2
  more ?
• ทดสอบ3

  ทดสอบ3

  รายละเอียด ทดสอบ3
  more ?
• ทดสอบ4

  ทดสอบ4

  รายละเอียด ทดสอบ4
  more ?

ชมตัวอย่างเต็มๆ