SEARCH    
 
   - A   + A
พบกับทิป และทริก(Tips and trick) สำหรับการออกแบบเซ็บไซต์ ด้วย for เว้บไซต์สำเร็จรูป-ninenic.com
www.tips.ninenic.com
HOME เกี่ยวกับเรา ติดต่อเรา
 

การทำ Images slide show แบบคลิกดูภาพ ในหน้าเว็บเพจของคุณ

 แนะนำโดย : เว็บไซต์สำเร็จรูป-NineNIC

ตัวอย่าง slide แบบที่ 1



Loading image. Please wait
This is the caption of image number 1
This is the caption of image number 1
This is the caption of image number 2
This is the caption of image number 3
This is the caption of image number 4
 

การทำ Images slide show แบบคลิกดูภาพ ในหน้าเว็บเพจของคุณมีวิธีการตามขั้นตอนดังต่อไปนี้

ขั้นตอนที่ 1 ในหน้า Upload ไฟล์ข้อมูล สร้าง Folder ที่ webedit และอัพโหลด File "image-slideshow.js" ตามไฟล์แนบ โดยไม่ต้องแก้ไขชื่อไฟล์

**คุณสามารถ Download File ได้ที่  image-slideshow.js
 

 

ขั้นตอนที่ 2 จัดทำภาพ "ลูกศร" 4 รูป เป็นไฟล์ .gif โดยมีรูปลูกศรด้านซ้าย 2 สี และลูกศรด้านขวา 2 สี และอัพโหลด รูปทั้ง 4 รูปไปไว้ที่ Folder เดียวกันตามขั้นตอนที่1 (เมื่อนำเมาส์ชี้ที่ลูกศรจะเปลี่ยนสี)

ขั้นตอนที่3 อัพโหลดรูปภาพที่ต้องการจะทำ Slide ตามจำนวนที่ต้องการ โดย 1 รูปภาพจะมี 2 ไฟล์ แบ่งเป็น รูปใหญ่และรูปเล็ก ไว้ใน Folder เดียวกันตามขั้นตอนที่1 


 

ขั้นตอนที่ 4 นำ Code ด้านล่างนี้ ไปว่างไว้ใน Row ก่อนหน้า Row ที่จะแสดงผล เช่น Row 1
โดยคลิก Source ก่อน 1 ครั้ง เพื่อวาง Code และกด save
 
 
<style type="text/css">
 
    #dhtmlgoodies_slideshow{
        width:250px;    /* Total width of slideshow */
    }
    
    #previewPane{
        border:1px solid #CCCCCC;
        margin-bottom:10px;    
        text-align:center;
        vertical-align:middle;
        padding-top:10px;
 
        position:relative;
        
        /* CSS HACK */
        height: 250px;    /* IE 5.x */
        height/* */:/**/250px;    /* Other browsers */
        height: /**/250px;
                
    }
    #previewPane img{
        line-height:250px;
    }
    #previewPane #largeImageCaption{    /* CSS styling of image caption below large image */
        font-style:italic;
        text-align:center;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;    /* Font to use */
        font-size:0.9em;
    }
    #galleryContainer{
        
        height:102px;    /* Height of the images + 2 */
        border:1px solid #CCCCCC;
        position:relative;
        overflow:hidden;
        padding:1px;
        
        /* CSS HACK */
        height: 104px;    /* IE 5.x - Added 2 pixels for border left and right */
        height/* */:/**/104px;    /* Other browsers */
        height: /**/104px;
                
    }
    #arrow_left{
        position:absolute;
        left:0px;
        z-index:10;
        background-color: #FFF;
        padding:1px;
    }
    #arrow_right{
        position:absolute;
        right:0px;
        z-index:10;
        background-color: #FFF;
        padding:1px;        
    }
    #theImages{
        position:absolute;
        height:100px;
        left:40px;
        width:100000px;
        
    }
    #theImages #slideEnd{
        float:left;
    }
    #theImages img{
        float:left;
        padding:1px;
        filter: alpha(opacity=50);
        opacity: 0.5;
        cursor:pointer;
        border:0px;
    }
 
    #waitMessage{
        display:none;
        position:absolute;
        left:200px;
        top:150px;
        background-color:#FFF;
        border:3px double #000;
        padding:4px;
        color:#555;
        font-size:0.9em;
        font-family:arial;    
    }
    
    #theImages .imageCaption{
        display:none;
    }
</style> <script type="text/javascript" src="/download/domainname_com/foldername/image-slideshow.js"></script>
 
คำอธิบาย
1. width:250px;  ปรับขนาดความกว้างของกรอบ
2. /* CSS HACK */  ปรับขนาดความสูงของกรอบ
3. /download/domainname_com/foldername/image-slideshow.js
      - domainname_com ใส่ชื่อ โดเมน โดยเปลี่ยนจากเครื่องหมาย . (dot) เป็น _ (under scroll)
      - foldername ใส่ชื่อโฟลเดอร์ที่มี File image-slideshow.js อยู่ 
เช่น  /download/tips_ninenic_com/slide1/image-slideshow.js
 


 

ขั้นตอนที่ 5  นำ Codeที่ 2 ไปว่างไว้ใน Row ถัดไป เช่น Row 2
โดยคลิก Source ก่อน 1 ครั้ง เพื่อวาง Code และกด save

<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="/download/domainname_com/foldername/imagename.jpg" alt="" />        
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>

<div id="galleryContainer">
<div id="arrow_left">
<img src="/download/domainname_com/foldername/imagearrowleftname.gif" alt="" /></div>
<div id="arrow_right"><img src="/download/domainname_com/foldername/imagearrowrightname.gif" alt="" /></div>
<div id="theImages">
<!—Thumbnails –>    

<a href="#" onclick="showPreview(&#8217;/download/domainname_com/foldername/imagename1.jpg&#8217;,&#8217;1&#8217;);return false"><img src="/download/domainname_com/foldername/imagesmallname1.jpg" alt="" /></a>   
 
<a href="#" onclick="showPreview(&#8217;/download/domainname_com/foldername/imagename2.jpg&#8217;,&#8217;2&#8217;);return false"><img src="/download/domainname_com/foldername/imagesmallname2.jpg" alt="" /></a>
<!-- End thumbnails –>                                  

 <!-- Image captions -->

<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<!-- End image captions -->
<div id="slideEnd">&nbsp;</div>
</div>
</div>
</div>

 

คำอธิบาย
1. เพื่อความสวยงามความสูงและความกว้างของภาพควรมีขนาดเท่ากัน
2. แก้ไข Code โดยมีรายละเอียดดังนี้
/download/domainname_com/foldername/imagename.jpg
      - domainname_com ใส่ชื่อ โดเมน โดยเปลี่ยนจากเครื่องหมาย . (dot) เป็น _ (under scroll)
      - foldername ใส่ชื่อโฟลเดอร์ที่มีรูปภาพสำหรับทำภาพสไลด์
      - image ชื่อรูปภาพ
            - imagename.jpg ใส่ชื่อรูปภาพขนาดใหญ่
            - imagesmallname.jpg  ชื่อรูปภาพ ขนาดเล็ก
            - imagearrowleftname.gif   ใส่ชื่อรูปลูกศรด้านซ้าย
            - imagearrowrightname.gif ใส่ชื่อรูปลูกศรด้านขวา
3. Loading image. Please wait เป็นข้อความระหว่างรอเปลี่ยนรูปภาพ สามารถแก้ไขข้อความได้
4. This is the caption of image number 1 เป็นข้อความอยู่ใต้รูปภาพ สามารถแก้ไขข้อความได้


 


www.tips.ninenic.com
HOME เกี่ยวกับเรา ติดต่อเรา
Web hosting | website builder |เว็บไซต์สำเร็จรูป by ninenic ©Copyright 2002-2024 All rights reserved.
บริษัท อีคอมสยาม ดอทคอม จำกัด
82/8 หมู่ 6 ถ.ประชาราษฎร์
ต.ตลาดขวัญ อ.เมือง จ.นนทบุรี 11000
Tel : 029682665 Fax: 029683400
Email : info@ecomsiam.com