สร้าง Slide show สุดสวยด้วย Java script

GA slide1

จากบทความที่ได้แนะนำการสร้างสไลด์โชว์ ในบทความ “การสร้างสไลด์จาก www.Slide.com” ที่ผ่านมา ก็พบว่าได้รับความสนใจเป็นอย่างมาก เพราะสไลด์โชว์เป็นสิ่งที่สังเกตเห็นได้ง่าย เราจึงสามารถใช้ประโยชน์ได้หลายอย่าง เช่น ประชาสัมพันธ์ แนะนำเรื่องราวน่าสนใจ บอกความเป็นตัวตนของเรา เป็นต้น 



เตรียมตัวก่อนเริ่มติดตั้ง

1. ให้ฝากรูปที่จะนำมาทำสไลด์เสียก่อน แนะนำไปฝากที่
    1.1  http://upic.me
    1.2  http://www.sigmirror.com (ต้องสมัครสมาชิกก่อน) 
    1.3  ฝากไว้บนบล็อกของเราเอง อ่านวิธีที่นี่ >>  วิธีฝากรูปไว้บนบล็อกของเราเอง

และให้คัดลอก URL ของภาพเก็บไว้ก่อน

2.back up แม่แบบ (template) เก็บไว้ก่อนเริ่มทำ เพราะถ้ามีอะไรผิดพลาดก็ อัปโหลดขึ้นมาใหม่ทุกอย่างจะเป็นปกติเหมือนเดิม  วิธีการ back up ทำดังนี้

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ดาวน์โหลดแม่แบบฉบับเต็ม >> จะได้ไฟล์นามสกุล .xml ซึ่งเป็นไฟล์ template ของเรานั่นเอง

สอนทำบล็อก และสอนวิธีทำ blogger


เริ่มต้นติดตั้งจริง

ขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง CSS code  ไปที่ ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ!

แล้วค้นหาโค้ด

]]></b:skin>

แล้ววางโค้ดต่อไปนี้ไว้ข้างบน


สอนแต่ง blogspot 



/* GA slide Edit by http://hackublog.blogspot.com/   */

#slider-holder {
    position: relative;
    height: 270px;
    width: 595px;
    margin-bottom: 20px;
    overflow: hidden;
    color: #fff;
    background: #000;
}
#slider-holder .slide {
    position: absolute;
    top: 0;
    left: 595px;
    z-index: 1;
    height: 270px;
    width: 595px;
    overflow: hidden;
    background: #000;
}
#slider-holder .slide-1 {
    display: block;
    left: 0;
    top: 0;
}
#slider-holder .slide a {
    display: block;
}
#slider-holder .slide img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#slider-holder  img.full-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
}
#slider-holder .slide-content {
    position: absolute;
    top: 270px;
    left: 0;
    height: 700px;
    width: 575px;
    background: #000;
    padding: 10px 10px 0;
    z-index: 999;
}
#slider-holder .slider-left, #slider-holder .slider-right {
    position: absolute;
    cursor: pointer;
    height: 150px;
    width: 120px;
    z-index: 999;
    display: block;
    color: white;
}
#slider-holder .slider-left {
    left: 0;
    top: 0;
    background: url(http://upic.me/i/aa/fleche1.png) no-repeat center bottom;
}
* html #slider-holder .slider-left {
    background: url(http://upic.me/i/0k/fleche1.gif) no-repeat center left;
}
#slider-holder .slider-right {
    right: 0;
    top: 0;
    background: url(http://upic.me/i/bg/fleche2.png) no-repeat center bottom;
}
* html #slider-holder .slider-right {
    background: url(http://upic.me/i/0f/fleche2.gif) no-repeat center right;
}
.slider-shelf {
    z-index: 999;
    background: #000;
    position: absolute;
    top: 0;
    width: 595px;
    overflow: visible;
}
span.clicker {
    z-index: 999;
    background: #000;
    position: absolute;
    top: 0;
    right: 120px;
    width: auto;
    font-size: 11px;
    display: block;
    padding: 2px 10px;
    cursor: pointer;
}
.shelf-content {
    z-index: 9999;
    position: absolute;
    top: 0;
    width: 595px;
        magin-buttom:10 px;
}
.shelf-content img {
    border: 1px solid #fff;
    margin: 10px 0 0 10px;
    cursor: pointer;
}
.shelf-title {
    padding: 0 10px;
}


สำหรับโค้ดข้างบนสามารถใช้ได้เลย แต่ถ้าใครติดตั้งแล้วความกว้างไม่พอดีกับบล็อก ให้แก้ไขความกว้างที่ตัวเลขสีแดงในโค้ดข้างบนทุกตัว


ขั้นที่ 2 เป็นการเรียก Java script จากภายนอกมาทำให้สไลด์ทำงานอัตโนมัติ  ให้ค้นหาโค้ด

</head>

แล้ววางโค้ดต่อไปนี้ไว้ข้างบน


GA slide4

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/GASlider.js' type='text/javascript'/>



ขั้นสุดท้าย เป็นการกำหนดที่ตั้ง สไลด์ โดยใช้ HTML โค้ด
ให้ค้นหาโค้ด 

<div id='main-wrapper'>

แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว


สร้าง SlideShow บน blogger



<!--GA slide by hackublog start-->

<div id='slider-holder'>


<!--Small feature-->
<div class='slider-shelf'/>
<span class='clicker'>Featured Stories</span>
<div class='shelf-content'>


<span class='1' title='ใส่คำอธิบายสั้นๆ'><img alt='ใส่คำอธิบายสั้นๆ' class='thumbnail' height='70' src=' ใส่ URL ของรูป ' width='70'/></span>


<span class='2' title='ใส่คำอธิบายสั้นๆ'><img alt='ใส่คำอธิบายสั้นๆ' class='thumbnail' height='70' src=' ใส่ URL ของรูป ' width='70'/></span>

<span class='3' title='ใส่คำอธิบายสั้นๆ'><img alt= 'ใส่คำอธิบายสั้นๆ' class='thumbnail' height='70' src=' ใส่ URL ของรูป ' width='70'/></span>


<span class='4' title='ใส่คำอธิบายสั้นๆ'><img alt='ใส่คำอธิบายสั้นๆ' class='thumbnail' height='70' src=' ใส่ URL ของรูป ' width='70'/></span>

<div class='shelf-title'/>
</div>

<!--End Small feature-->



<!--Full picture start-->

<!--picture 1 start-->

<div class='slide slide-1'>

        <a class='open' href='ใส่ LINK ที่ต้องการเชื่อมโยง' title='Read the full story'><img alt='ใส่คำอธิบายสั้นๆ' class='slider-img' height='270' src=' ใส่ URL ของรูป ' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>

<h3>ใส่หัวเรื่องของสไลด์</h3>
<p> ใส่ข้อความประชาสัมพันธ์ <br/><br/></p>

</div>
</div>
</div>

<!--picture 1 end-->




<!--picture 2 start-->

<div class='slide slide-2'>

        <a class='open' href='ใส่ LINK ที่ต้องการเชื่อมโยง' title='Read the full story'><img alt='ใส่คำอธิบายสั้นๆ' class='slider-img' height='270' src=' ใส่ URL ของรูป '  width='595'/></a>  
        <div class='slide-content slide-content-2'>
            <div class='slide-content-height-2'>

<h3>ใส่หัวเรื่องของสไลด์</h3>
<p> ใส่ข้อความประชาสัมพันธ์ <br/><br/></p>

</div>
</div>
</div>

<!--picture 2 end-->



<!--picture 3 start-->

    <div class='slide slide-3'>

        <a class='open' href='ใส่ LINK ที่ต้องการเชื่อมโยง' title='Read the full story'><img alt='ใส่คำอธิบายสั้นๆ' class='slider-img' height='270' src=' ใส่ URL ของรูป ' width='595'/></a>  
        <div class='slide-content slide-content-3'>
            <div class='slide-content-height-3'>

<h3>ใส่หัวเรื่องของสไลด์</h3>
<p> ใส่ข้อความประชาสัมพันธ์ <br/><br/></p>

</div>
</div>
</div>

<!--picture 3 end-->


<!--picture 4 start-->

    <div class='slide slide-4'>

        <a class='open' href='ใส่ LINK ที่ต้องการเชื่อมโยง' title='Read the full story'><img alt='ใส่คำอธิบายสั้นๆ' class='slider-img' height='270' src='ใส่ URL ของรูป ' width='595'/></a>  
        <div class='slide-content slide-content-4'>
            <div class='slide-content-height-4'>

<h3>ใส่หัวเรื่องของสไลด์</h3>
<p> ใส่ข้อความประชาสัมพันธ์ <br/><br/></p>

</div>
</div>
</div>

<!--picture 4 end-->
<div id='slider-nav'>
<span class='slider-left'/>
<span class='slider-right'/>
</div>

</div>

<!--END GA slide by Hackublog-->



อักษรสีแดงเป็นสิ่ที่ต้องแก้ไขก่อนนำไปใช้ครับ

* ถ้าในขั้นที่ 1 มีการแก้ไขความกว้าง ตัวเลข 595  ก็จะต้องปรับให้เท่ากับตัวเลขในขั้นที่ 1 ด้วยครับ

และเมื่อวาง HTML เรียบร้อยแล้วก็ลองแสดงตัวอย่างดูผลงาน ซึ่งถ้าหากพอใจแล้วก็บันทึกแม่แบบ ก็จบขั้นตอนครับ

หมายเหตุ ถ้าหากใครยังไม่มีรูปหรือข้อความที่เตรียมไว้ ในขั้นสุดท้ายนี้ให้ทดลองใช้โค้ดด้านล่างนี้ไปก่อนครับ


<!--GA slide by hackublog start-->

<div id='slider-holder'>


<!--Small feature-->
<div class='slider-shelf'/>
<span class='clicker'>Featured Stories</span>
<div class='shelf-content'>

<span class='1' title='Natoque non, Quisque in porttitor!'><img alt='Natoque non, Quisque in porttitor!' class='thumbnail' height='70' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/gafas_by_robbyp.jpg&amp;h=70&amp;w=70&amp;zc=1&amp;q=90' width='70'/></span>

<span class='2' title='Tortor magna dolor, aliquam tellus iaculis'><img alt='Tortor magna dolor, aliquam tellus iaculis' class='thumbnail' height='70' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/lemon_2_by_maykhiu.jpg&amp;h=70&amp;w=70&amp;zc=1&amp;q=90' width='70'/></span>

<span class='3' title='Suscipit lorem tristique'><img alt='Suscipit lorem tristique' class='thumbnail' height='70' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/9eb73d92a98ab3c6.jpg&amp;h=70&amp;w=70&amp;zc=1&amp;q=90' width='70'/></span>

<span class='4' title='The First Featured Article'><img alt='The First Featured Article' class='thumbnail' height='70' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/6cd00b481a14f14b.jpg&amp;h=70&amp;w=70&amp;zc=1&amp;q=90' width='70'/></span>

<div class='shelf-title'/>
</div>

<!--End Small feature-->


<!--Full picture start-->


<!--picture 1 start-->

<div class='slide slide-1'>

        <a class='open' href='http://www.woothemes.com/demo/gazette/2009/03/18/natoque-non-quisque-in-porttitor/' title='Read the full story'><img alt='Natoque non, Quisque in porttitor!' class='slider-img' height='270' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/gafas_by_robbyp.jpg&amp;h=270&amp;w=595&amp;zc=1&amp;q=90' width='595'/></a>  
        <div class='slide-content slide-content-1'>
            <div class='slide-content-height-1'>
                <h3>Natoque non, Quisque in porttitor!</h3>
                <p>In adipiscing, fusce morbi, ligula vitae vestibulum. Commodo convallis rutrum, posuere donec gravida. Quam massa inceptos. Nibh eros, lectus sollicitudin in, sit et felis. Vulputate praesent repellat, mauris per purus, risus ut. At eu, et mollis, nulla volutpat suspendisse.</p>

            </div>
        </div>
    </div>



<!--picture 1 end-->


<!--picture 2 start-->

<div class='slide slide-2'>

        <a class='open' href='http://www.woothemes.com/demo/gazette/2008/03/18/tortor-magna-dolor/' title='Read the full story'><img alt='Tortor magna dolor, aliquam tellus iaculis' class='slider-img' height='270' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/lemon_2_by_maykhiu.jpg&amp;h=270&amp;w=595&amp;zc=1&amp;q=90' width='595'/></a>  
        <div class='slide-content slide-content-2'>
            <div class='slide-content-height-2'>
                <h3>Tortor magna dolor, aliquam tellus iaculis</h3>
                <p>Libero non, blandit blandit, sed odio lectus. </p>

            </div>
        </div>
    </div>

<!--picture 2 end-->

 

 

<!--picture 3 start-->

    <div class='slide slide-3'>

        <a class='open' href='http://www.woothemes.com/demo/gazette/2008/03/18/suscipit-lorem-tristique/' title='Read the full story'><img alt='Suscipit lorem tristique' class='slider-img' height='270' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/9eb73d92a98ab3c6.jpg&amp;h=270&amp;w=595&amp;zc=1&amp;q=90' width='595'/></a>  
        <div class='slide-content slide-content-3'>
            <div class='slide-content-height-3'>
                <h3>Suscipit lorem tristique</h3>
                <p> Lorem ipsum dolor sit amet, quaerat ipsum, a libero. Fringilla wisi, augue est ut, duis ornare id. Vel et. Sem bibendum hymenaeos. Nullam dictum, consequat viverra nulla. Tortor ac, eget nec velit. Proin enim, ligula taciti phasellus. Ante vel morbi.

</p>
            </div>
        </div>
    </div>

<!--picture 3 end-->


<!--picture 4 start-->

    <div class='slide slide-4'>

        <a class='open' href='http://www.woothemes.com/demo/gazette/2008/03/18/the-first-featured-article/' title='Read the full story'><img alt='The First Featured Article' class='slider-img' height='270' src='http://www.woothemes.com/demo/gazette/wp-content/themes/gazette/thumb.php?src=http://woothemes.com/demo/gazette/wp-content/uploads/2008/03/6cd00b481a14f14b.jpg&amp;h=270&amp;w=595&amp;zc=1&amp;q=90' width='595'/></a>  
        <div class='slide-content slide-content-4'>
            <div class='slide-content-height-4'>
                <h3>The First Featured Article</h3>

                <p> Libero non, blandit blandit, sed odio lectus. Senectus donec, lacus scelerisque, vestibulum id tristique. Suspendisse ut dignissim. Etiam posuere netus, libero condimentum eu. Aenean a ut. Elit aliquet porttitor.

Lorem sed imperdiet, lectus enim, viverra donec tellus. Justo et ullamcorper, vel diam amet. Varius elit, sit magnis, quisque arcu nunc. Litora nulla gravida, nulla et elit, et faucibus. Interdum urna et, at dictum. Proin ac.
</p>
            </div>
        </div>
    </div>


<!--picture 4 end-->
<div id='slider-nav'>
<span class='slider-left'/>
<span class='slider-right'/>

</div><!--End Full picture-->

</div><!--END GA slide by Hackublog-->



หากมีข้อสงสัยสามารถสอบถามได้ที่กล่อง comment ด้านล่าง และฝาก link ของบล็อกไว้ด้วยนะครับ เพื่อจะได้ทำการช่วยเหลือต่อไปครับผม

ตอนนี้มีความคิดเห็น : 12 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. http://cinedevice.blogspot.com
    ผมมีปัญหาในขั้นตอนสุดท้ายเป็นการกำหนดที่ตั้งสไลด์ ผมต้องการวางสไลด์ให้อยู่ด้านล่างของภาพหัวเว็บที่เป็นโปสเตอร์หนังพูดง่ายๆคืออยู่ด้านบนคำว่า"ขายเครื่องฉายภาพยนตร์35มม.TOKIWA T-60 สีบรอนซ์ทอง" ผมจะต้องนำโค้ดในขั้นตอนสุดท้ายไปวางตรงไหน อีกอย่างในบล๊อกของผมไม่มีข้อความ <div id='main-wrapper'>
    ขอบคุณอย่างมากครับ
    ป้อม

  1. คุณป้อมต้องวางถัดจาก <div id='content'> ครับ

    ส่วน <div id='main-wrapper'> ไม่มีก็ไม่เป็นไรครับ

  1. พี่ Hack ทำให้ Slide show สุดสวยด้วย Java script
    แสดงรูปจากบทความ และหัวข้อเรื่อง ที่เรา Post ล่าสุด ประมาณ 5 Post
    แบบ อัตโนมัติ ได้ มั้ยคับ
    ต้อง แก้ไขยังไงคับ เพราะไม่อยากมานั่งเปลี่ยนใหม่อยู่เรื่อยๆ น่ะคับ

  1. @ Admin ลั่นล้า : มี blogger คนหนึ่งที่ทำได้ครับ ใช้จาวาสคริปต์เยอะหน่อย ลองศึกษาจากแม่แบบนี้ดูครับ
    http://simplexdesign.blogspot.com/2010/04/simplexauto-premium-blogger-template.html

  1. ขอบคุณพี่ Hack มากนะคับ...
    แต่มันต้อง เปลี่ยน template ใช่มั้ยคับ...
    ผมไม่อยากเปลี่ยนเลย

  1. อาจารย์แฮกครับ รบกวนช่วยดูให้ผมหน่อยนะครับตอนแรก Slide ใช้ได้ปกติแต่ตอนนี้slide ไม่ทำงานแล้วครับ

  1. เอาโค้ด

    http://siiam.bravehost.com/GASlider.js

    ไปแทนที่

    http://hackublog.googlecode.com/files/GASlider.js

    ของเดิมที่ติดตั้งไว้ที่บล็อกของคุณครับ (ดูในขั้นที่ 2)

  1. หากไม่ต้องการให้มี Title และ Description ของภาพ รวมทั้งไม่ต้องการให้มีแถบสีดำ (ไว้แสดง Title and Description) ต้องแก้ไข code อย่างไรคะ ขอบคุณค่ะ

  1. ไม่เจอทั้ง สอง เลยครับ ทำไงดี


    div id='content'>

    div id='main-wrapper'>


    http://spartacust.blogspot.com/

  1. ไม่เจอ < div id='main-wrapper' > อ่ะครับแล้วต้องวางโค้ดไว้ที่ไหน

  1. ไม่เห็นจะได้เลย งง สุดๆ โค๊ด ]]> ไม่เห็นมีเลยบอกหน่อยอยุ่ตรงไหน

  1. ไม่เจอทั้ง สอง เลยครับ ทำไงดี


    div id='content'>

    div id='main-wrapper'>

    ไม่เจอเหมือนกันครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel