Jd Gallery อีกหนึ่งสไลด์โชว์สวยๆ ของ JonDesign

jd gallary

จากที่ได้แนะนำการสร้างสไลด์โชว์ ในบทความ สร้าง Slide show สุดสวยด้วย Java script บทความความนี้ก็จะนำเสนออีก 1 สไลด์โชว์ซึ่งพัฒนาโดย JonDesign ที่สวยงามไม่แพ้กับสไลด์แบบแรกที่ได้แนะนำไปแล้ว

Mootool Slide DEMO

http://trickblogger4all.blogspot.com

ความแตกต่างของสไลด์ทั้งสองแบบนี้คือ การเปลี่ยนสไลด์ + จาวาสคริปต์ที่ใช้ ครับ ส่วนวิธีการติดตั้งก็ยังคงเหมือนกันคือ และเรามาเริ่มกันเลยครับ

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


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

หรือจะฝากไว้บนบล็อกของเราเอง อ่านวิธีที่นี่
http://hackublog.blogspot.com/2009/10/blog-post.html
จากนั้นให้คัดลอก URL ของภาพเก็บเอาไว้ก่อน

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

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


ขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง CSS code  ไปที่ ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> จากนั้นค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้เอาไว้ก่อนหน้าโค้ดดังกล่าว

/* CSS for jdGaller by Hackublog */
#myGallery, #myGallerySet, #flickrGallery {
overflow:hidden;
width: 625px; /* ความกว้างของสไลด์ควรปรับให้พอดีกับตำแหน่งที่ติดตั้ง*/
height: 263px; /* ความสูงของสไลด์จะปรับแต่งหรือไม่ก็ได้*/
z-index: 5;
}
#flickrGallery {
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail {
display: none;
}
.jdGallery {
overflow: hidden;
position: relative;
}
.jdGallery img {
border: 0;
margin: 0;
}
.jdGallery .slideElement {
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://4.bp.blogspot.com/_04rN-X01taU/SnIa5P43ymI/AAAAAAAAAF4/kPcSs5ZnO0k/s1600/loading-bar-black.gif');
}
.jdGallery .loadingElement {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://4.bp.blogspot.com/_04rN-X01taU/SnIa5P43ymI/AAAAAAAAAF4/kPcSs5ZnO0k/s1600/loading-bar-black.gif');
}
.jdGallery .slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 60px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone {
bottom: -1px;
}
.jdGallery .slideInfoZone h2 {
padding: 0;
font-size: 80%;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}
.jdGallery .slideInfoZone p {
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
.jdGallery div.carouselContainer {
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn {
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel {
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel {
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper {
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner {
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail {
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail {
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label {
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton {
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number {
color: #b5b5b5;
}
.jdGallery a {
font-size: 100%;
text-decoration: none;
color: inherit;
}
.jdGallery a.right, .jdGallery a.left {
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right, * html .jdGallery a.left {
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left {
left: 0;
top: 0;
background: url('http://2.bp.blogspot.com/_04rN-X01taU/SnIax7mSsNI/AAAAAAAAAFo/nvXNSH8Kk_E/s1600/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left { background: url('http://3.bp.blogspot.com/_04rN-X01taU/SnIaxxFXU_I/AAAAAAAAAFg/Vl9IT7ejYZA/s1600/fleche1.gif') no-repeat center left; }
.jdGallery a.right {
right: 0;
top: 0;
background: url('http://1.bp.blogspot.com/_04rN-X01taU/SnIdF5bZpMI/AAAAAAAAAGQ/qRJOfGjbKJM/s1600/fleche2.png') no-repeat center right;
}
* html .jdGallery a.right { background: url('http://1.bp.blogspot.com/_04rN-X01taU/SnIayc93hoI/AAAAAAAAAFw/bvPeJwRiPHQ/s1600/fleche2.gif') no-repeat center right; }
.jdGallery a.open {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open {
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover { background: url('http://3.bp.blogspot.com/_04rN-X01taU/SnIa5gaYqiI/AAAAAAAAAGI/J8N61DLkQig/s1600/open.png') no-repeat center center; }
* html .withArrows a.open:hover {
background: url('http://4.bp.blogspot.com/_04rN-X01taU/SnIa5d6u7HI/AAAAAAAAAGA/lV4yh9EnKZE/s1600/open.gif') no-repeat center center;
filter:alpha(opacity=80);
}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn {
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector {
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2 {
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper {
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton {
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover {
background: #333;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview {
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}

ขั้นที่ 2 ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้เอาไว้ก่อนหน้าโค้ดดังกล่าว

<!--Script for jdGallery start -->
<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.1.2/mootools.js' type='text/javascript'/>
<script src='http://slideshow-dinix.googlecode.com/files/jd.gallery.js' type='text/javascript'/>
<!--Script for jdGallery end -->

ขั้นที่ 3 ค้นหาโค้ด
<div id='main-wrapper'>
แล้วทำการวางโค้ดต่อไปนี้ ถัดจาก โค้ดดังกล่าว
หรือถ้าหากเป็นแม่แบบรุ่นใหม่อาจจะวางได้ในตำแหน่ง ก่อนหน้าหรือถัดจาก โค้ด
<div class='main-outer'>

<!-- Jd Gallery start-->
<div id='myGallery'>

<div class='imageElement'>
<h3>Lorem</h3>
<p>Loremipsum dolor sit Etiam...<a href='http://www.hackublog.com' /></p>   
<a class='open' href='#' title='Read more'/>
<img alt='Heroes TV Series' class='full' src='http://3.bp.blogspot.com/_04rN-X01taU/SnIYXSQhANI/AAAAAAAAACY/5bjnVfU32Mw/s1600/image1.jpg'/>
<img alt='Heroes TV Series' class='thumbnail' src='http://3.bp.blogspot.com/_04rN-X01taU/SnIYXSQhANI/AAAAAAAAACY/5bjnVfU32Mw/s1600/image1.jpg'/>
</div>

<div class='imageElement'>
<h3>Tropical Paradise</h3>
<p>Loremipsum dolor sit amet. Etiam...<a href='http://www.hackublog.com'/></p>   
<a class='open' href='#' title='Read more'/>
<img alt='Tropical Paradise' class='full' src='http://1.bp.blogspot.com/_04rN-X01taU/SnIYXlHK7TI/AAAAAAAAACg/EPBfF4EtC24/s1600/image2.jpg'/>
<img alt='Tropical Paradise' class='thumbnail' src='http://1.bp.blogspot.com/_04rN-X01taU/SnIYXlHK7TI/AAAAAAAAACg/EPBfF4EtC24/s1600/image2.jpg'/>
</div>

<script type='text/javascript'>
    function startGallery() {
    var myGallery = new gallery($(&#39;myGallery&#39;), {
    timed: true
    });
    }
    window.addEvent(&#39;domready&#39;, startGallery);
    </script>
</div>

<!-- Jd Gallery stop-->

แนวทางการเปลี่ยนแก้ไขให้เป็นข้อความและภาพของเราเอง ทำโดยแก้อักษรสีแดงต่อไปนี้ครับ
<div class='imageElement'>
<h3>หัวข้อ</h3>
<p> พิมพ์ข้อความอธิบายที่นี่</p>   
<a class='open' href='ใส่ Link ที่ต้องการ' title='Read more'/>
<img alt='ใส่ข้อความอธิบายสั้น ๆ' class='full' src='ใส่ URL ของรูปขนาด  625 คูณ 263'/>
<img alt='ใส่ข้อความอธิบายสั้น ๆ' class='thumbnail' src='ใส URL ของรูปเล็กขนาด 100 คูณ 75'/>
</div>

ถ้าอยากใส่รูปเพิ่ม! อีกก็ คัดลอกโค้ดข้างบนมาเปลี่ยนรูป เปลี่ยนข้อความ แล้วแทรกเข้าไปได้เรื่อยๆ โดยตำแหน่งที่แทรกจะแทรกก่อน โค้ด <script type='text/javascript'> เช่น

<!--โค้ดก่อนหน้านี้-->
<img alt='Tropical Paradise' class='thumbnail' src='http://1.bp.blogspot.com/_04rN-X01taU/SnIYXlHK7TI/AAAAAAAAACg/EPBfF4EtC24/s1600/image2.jpg'/>
</div>

แทรกเพิ่มตรงนี้

<script type='text/javascript'>
    function startGallery() {
    var myGallery = new gallery($(&#39;myGallery&#39;), {
    timed: true
    });
    }
    window.addEvent(&#39;domready&#39;, startGallery);
    </script>
</div>
<!-- Jd Gallery stop-->

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

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

  1. บรรทัด บนสุด กับ บบรทัดล่าง ของขั้นที่ 2 อะครับ

  1. @ จุตินันท์ : ขอบคุณมากครับที่ช่วยแก้ให้ ตอนนี้ผมมีปัญหาในการโพส โค้ดในบทความครับ เครื่องหมาย - - มันเหลือ - อันเดียวตลอดเลยครับ ต้องมานั่งเติม

    ขอบคุณอีกครั้งครับ

  1. พี่HackBlog คับ ไม่ทราบว่า เราสามารถ ปรับให้ ขอบของรูป เป็น มลักษณ ขอบมนๆๆ บ้างไม๊คับ แบบว่า เป็น สีแหล่ม มัน คมไปอะคับ
    ปล.เปิดอ่าน มา2วันยังอ่านไม่หมดเลยคับ เยอะจริงๆๆคับความรู้ในนี้

  1. แล้วมีวิธีคลิ๊กที่ รุปแล้วไปที่เวปอื่นไม๊คับ
    ปลขอบคุรอีกครั้งคับ

  1. @ AngelofDeath :
    1. ทำให้ภาพขอบโค้งใช้ Photoshop ครับ หรือ
    2. ถ้าต้องการให้พื้นที่ ๆ ต้องการมีขอบโค้ง (ไม่ใช่ภาพ) ใช้โค้ด CSS ดังนี้
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;

    เลข 12 เปลี่ยนได้ครับ

    3. โค้ดใส่ link ให้รูป
    <a href='ใส่ Link ที่ต้องการ' title=''><img src='ใส่ URL ของรูป'/> </a>

  1. ทำอย่างไรให้มันอยู่ตรงกลางครับ

  1. คุณ kookต้องการให้อะไรอยู่ตรงกลางครับ

  1. ถ้าต้องการให้ข้อความอยู่ตรงกลางก็เพิ่มโค้ด .jdGallery .slideInfoZone{text-align:center;} ลงไปในขั้นที่ 1 อีกครับ

  1. ขอบพระคุณมากกกกกกกกกกกกกกกกกกก

  1. คุณ Hack ช่วยสอนการติดตั้ง slide แบบตัวอย่างข้างล่าหน่อยคะ อยากเอาไปติดที่หัวบล็อก

    http://caroufredsel.frebsite.nl/

    ขอบคุณคะ

  1. ทำได้แล้วครับ แต่ slide show จะอยู่ข้างซ้ายของจอ ถ้าอยากให้ slide show อยู่ตรงกลาง พอจะทำได้หรือเปล่าครับ

    ขอบคุณครับ

  1. พอจะมีวิธีที่จะทำให้ สไลด์โชว์ ไปอยู่ในหน้าบทความได้หรือเปล่าครับ

    เช่น บทความที่1 เป็นสไลด์โชว์เรื่องที่1 พอคลิ๊กไปหน้า2 ก็จะได้เป็นสไลด์โชว์เกี่ยวกับเรื่องที่2 ครับ

    ขอบคุณครับ

  1. ขอวิธี ติดตั้ง jdGaller และ lightbox ให้แสดงอยู่หน้าเดียวกันได้ด้วยคะ

    ( ลองทำแล้ว jdGaller ไม่ทำงาน )

  1. จากคำถามข้างบนนะคะเรื่องการ ติดตั้ง jdGaller และ lightbox

    ลองลบโค้ต ของ lightbox ออก
    script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/

    ปรากฎว่า jdGaller ทำงานคะ แต่ก็มีปัญหาใหม่คือ

    ต้องการให้ภาพสไลด์ (jdGaller) อยู่ ใต้ส่วนหัว และ (ก่อน Gadget) ต้องแก้ไขอย่างไรคะ
    ( 1.ส่วนหัว 2.jdGaller 3.Gadget )

    ขอบคุณคะ

  1. รูปที่ต้องการใส่ แทนที่ URLเดิมในตัวอย่างที่ทำสีแดงไว้ รูปน่าจะเท่ากรอบ 625x263 ทำไมอาจารย์แนะนำ 100x75 ด้วยในรูปเดียวกัน แต่ในตัวอย่าง อาจารย์ทำเหมือนกันเลยครับ

  1. ทำได้แล้วครับ แต่ slide show จะอยู่ข้างซ้ายของจอ ถ้าอยากให้ slide show อยู่ตรงกลาง พอจะทำได้หรือเปล่าครับ

    ขอบคุณครับ

  1. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

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

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

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