การใช้งาน ad gallery และ fancy box ร่วมกับ tt_news media

เมื่อเดือนที่แล้วเจอเคสที่น่าสนใจอยู่เคสนึง นักพัฒนา typo3 ท่านนึง ได้ใช้ feature ของ tt_news เข้ามาจัดการเรื่อง product เพื่อความสะดวกในการปรับปรุงข้อมูลสำหรับ editor และมีความต้องการใช้ของ media ที่จัดการเกี่ยวกับภาพเปลี่ยนมาเป็น Gallery ที่แสดงผลแบบ carousel เมื่อคลิ๊กที่ภาพใหญ่จะปรากฎเป็น lightbox ภาพใหญ่ โดยมีวิธีการทำดังนี้…

1) เริ่มจาก เราต้องเตรียม js ของ Gallery และ Lightbox ก่อน ดาวน์โหลดได้จาก http://adgallery.codeplex.com/ และ http://fancyapps.com/fancybox/
หรือ ดาวน์โหลด souce พร้อมใช้งาน [ ที่นี่ ]

2) ให้ อัพโหลด source js ต่าง ๆ ไว้ที่ fileadmin เพื่อความสะดวกในการแก้ไขต่อไป

3) สร้าง HTML template ในส่วนของ single view สำหรับ tt_news ให้มีโครงสร้างการทำงาน และ ชื่อคลาสในแบบที่ ad gallery ต้องการ ดังนี้

<!– ###TEMPLATE_SINGLE### begin   This subpart is used to display single news items –>
<div class=”news-single-item”>
  <div id=”single-item-title”><h1>###NEWS_TITLE###</h1></div>  
  <div id=”ad-gallery” class=”ad-gallery”>
    <div id=”gallery” class=”ad-image-wrapper”>
      <a href=”#” >      <div id=”gallery”> </div> </a>
    </div>
    <div class=”ad-controls”></div>
    <div class=”ad-nav”>
      <div class=”ad-thumbs”>
        <ul class=”ad-thumb-list”>
          ###NEWS_IMAGE###
        </ul>
      </div>
    </div>
  </div>  
  <div class=”detail-wrapper”>    
    <div id=”single-item-content”>###NEWS_CONTENT###</div>  
  </div>  
</div>
<!– ###TEMPLATE_SINGLE### end –>

4) กำหนดค่า TYPOSCRIPT ใหม่ สำหรับ tt_news ส่วนของ media ให้แสดงผลตามที่เรากำหนด (การเรียกใช้งานจะอยู่ที่ไฟล์ jquery.gallery-custom.js)

การเรียกใช้งานจาก original ไฟล์ใน media ของ typo3

temp.imageLinkWrap >
temp.imageLinkWrap = 1
temp.imageLinkWrap {
enable = 1
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
}
}

plugin.tt_news.displaySingle.image.imageLinkWrap >
plugin.tt_news.displaySingle.image.imageLinkWrap < temp.imageLinkWrap

plugin.tt_news.displaySingle.caption_stdWrap >
plugin.tt_news.displaySingle.imgAltTextField >
plugin.tt_news.displaySingle.imageWrapIfAny >
plugin.tt_news.displaySingle.imageMarkerOptionSplit >
plugin.tt_news.displaySingle.image.params = class=”p-thumb”
plugin.tt_news.displaySingle.image.wrap = <li class=”imageview”>|</li>

การใส่ javascript และ css ที่เกี่ยวข้องที่ header

page.headerData.1195 = TEXT
page.headerData.1195.value(
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script src=”fileadmin/gallery/ad-gallery/jquery.ad-gallery.min.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/gallery/ad-gallery/jquery.ad-gallery.css” media=”screen”>
<script src=”fileadmin/gallery/fancybox/jquery.fancybox.pack.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”fileadmin/gallery/fancybox/jquery.fancybox.css” media=”screen”>
<script src=”fileadmin/gallery/jquery.gallery-custom.js” type=”text/javascript”></script>
)

5) อย่าลืมกำหนดค่า html template สำหรับการใช้งาน single view ใน plugin ของ tt_news ในหน้าที่ต้องการใช้งานร่วมกับ gallery นะค่ะ จากนั้นก็ลองเรียกการใช้งานจาก list/latest เพื่อดูในส่วนของ single view ใน tt_news ก็จะเห็นเป็น Gallery ดังภาพข้างล่างค่ะ

 

 

Posted by:

Kickstarter
Administrator

4 Comments

  1. modv1 -  March 14, 2013 - 10:48 am

    ^ ^ ว่างจัดเลยแวะมาทัก อิอิ

    Reply
    • Kickstarter -  March 14, 2013 - 10:50 am

      จ้า เวอร์ชั่นใหม่เป็นไงบ้าง แวะไปที่ facebook ก็ได้ค่ะ ^^

      Reply
  2. modv1 -  March 14, 2013 - 11:00 am

    เพิ่งไปกด like FB มาเมื่อกี้เอง
    ยังใช้ 4.7.7 อยู่เลย เวอร์ชั่น 6 เลิกลองไปละ งงอย่างแรง ไว้มีเวลามากก่อน

    Reply
    • Kickstarter -  March 14, 2013 - 12:06 pm

      OK ค่อย ๆ เรียนรู้ไปจ้า เด๋วก็ชิน ฮ่าๆ

      Reply

Leave A Comment

Your email address will not be published. Required fields are marked (required):

Human answer! *

Related articles

Back to Top