เปลี่ยนสไลด์รูปของสินค้าให้เป็นแนวตั้งใน prestashop 1.5

otherSaturday, July 6, 2013 - 21:18

พอดีช่วงนี้ได้รับงานทำเว็บขายของโดยให้ใช้ prestashop 1.5 มาทำ เลยห่างหายไปจาก drupal พอสมควรและก็ไม่ค่อยได้มาอัพเดทบล็อกตัวเองซะเท่าไร วันนี้ฤกษ์ดีเลยมาจดวิธีทำรูปสไลด์เล็กๆ (thumbnail) ในหน้าสินค้าจากปกติตัว theme มันจะให้มาเป็นแนวนอนแต่ผมอยากให้มันเป็นแนวตั้งจะทำไงมาดูกัน 

vertical thumbnail

จากตัวอย่างด้านบนจะเห็นไอ้รูปสินค้าเล็กๆปกติมันจะเป็นสไลด์แนวนอน แต่ผมอยากให้มันสไลด์แนวตั้งทำไงมาดูกันครับ (รูปสินค้าด้านบนไม่เหมือนกันข้ามๆมันไปนะครับ :P พอดีไม่ได้เซพรูปก่อนแก้ไว้)

Vertical product thumbnails instead of horizontal?

  1. ต้องทำการแก้ไขไฟล์ product.js ใน theme ของเราจะอยู่ในโฟลเดอร์ js/ ให้แก้ไขดังนี้

    บรรทัด 470
    $('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});
    เปลี่ยนจาก x เป็น y
    $('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});
  2. บรรทัด 499
    //init the serialScroll for thumbs
            $('#thumbs_list').serialScroll({
                    items:'li:visible',
                    prev:'#view_scroll_left',
                    next:'#view_scroll_right',
                    axis:'x',
                    offset:0,
                    start:0,
                    stop:true,
                    onBefore:serialScrollFixLock,
                    duration:700,
                    step: 2,
                    lazy: true,
                    lock: false,
                    force:false,
                    cycle:false
            });

    เปลี่ยนจาก x เป็น y เช่นกัน

    //init the serialScroll for thumbs
            $('#thumbs_list').serialScroll({
                    items:'li:visible',
                    prev:'#view_scroll_left',
                    next:'#view_scroll_right',
                    axis:'y',
                    offset:0,
                    start:0,
                    stop:true,
                    onBefore:serialScrollFixLock,
                    duration:700,
                    step: 2,
                    lazy: true,
                    lock: false,
                    force:false,
                    cycle:false
            });
  3. บรรทัด 492
    var thumb_width = $('#thumbs_list_frame >li').width() + parseInt($('#thumbs_list_frame >li').css('marginRight'));
            $('#thumbs_list_frame').width((parseInt((thumb_width) * $('#thumbs_list_frame >li').length)) + 'px');
            $('#thumbs_list').trigger('goto', 0);
            serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?

    เปลี่ยน width เป็น height

    var thumb_height = $('#thumbs_list_frame >li').height() + parseInt($('#thumbs_list_frame >li').css('marginRight'));
            $('#thumbs_list_frame').height((parseInt((thumb_height) * $('#thumbs_list_frame >li').length)) + 'px');
            $('#thumbs_list').trigger('goto', 0);
            serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?
  4. จากนั้นไปที่ product.css ในโฟลเดอร์ css/ เพื่อกำหนด width และ height ให้กับ #thumbs_list
    #thumbs_list {
            float:left;
            overflow:hidden;
            width: 75px;
            height: 300px;
            text-align: center;
    }
  5. ในส่วนของการตกแต่งอื่นๆก็ปรับ css ตามต้องการครับ

thank : http://www.prestashop.com/forums/topic/87236-vertical-productitem-thumbn...

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