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

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

< p>vertical thumbnail

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

Vertical product thumbnails instead of horizontal?

  1. ต้องทำการแก้ไขไฟล์ product.js ใน theme ของเราจะอยู่ในโฟลเดอร์ js/ ให้แก้ไขดังนี้
    บรรทัด 470 [jquery]$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});[/jquery] เปลี่ยนจาก x เป็น y [jquery]$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});[/jquery]
  2. บรรทัด 499 [jquery]//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 }); [/jquery] เปลี่ยนจาก x เป็น y เช่นกัน [jquery]//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 }); [/jquery]
  3. บรรทัด 492 [jquery]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 ?[/jquery] เปลี่ยน width เป็น height [jquery]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 ?[/jquery]
  4. จากนั้นไปที่ product.css ในโฟลเดอร์ css/ เพื่อกำหนด width และ height ให้กับ #thumbs_list [css]#thumbs_list { float:left; overflow:hidden; width: 75px; height: 300px; text-align: center; }[/css]
  5. ในส่วนของการตกแต่งอื่นๆก็ปรับ css ตามต้องการครับ

thank : http://www.prestashop.com/forums/topic/87236-vertical-productitem-thumbnails-instead-of-horizontal

Add new comment