สถานการณ์มีดังนี้: ฉันมีประเภทเนื้อหาสไลด์และฉันต้องการแสดงสไลด์ใหม่ล่าสุดสามสไลด์ในสไลด์โชว์ สไลด์ต้องวนรอบและสไลด์ก็ต้องสามารถควบคุมได้โดยเพจเจอร์ เพจเจอร์ควรมีสามสัญลักษณ์แสดงหัวข้อย่อย / ลิงค์ / ภาพเพื่อให้สามารถข้ามไปยังสไลด์เฉพาะในสไลด์โชว์ เพจเจอร์ควรมีลูกศรซ้ายและขวาเพื่อเพิ่มและลดสไลด์ในสไลด์โชว์
เทคนิคนี้ใช้กันอย่างแพร่หลายทั่วเว็บ แต่ฉันไม่สามารถหาวิธีตั้งค่าอย่างถูกต้องโดยใช้ Views และ Views Slideshow พอยน์เตอร์จากคุณทุกคนประสบกับ Drupalites ที่นั่นยินดีต้อนรับ
ไชโยเลส์
คำตอบ:
(1) โมดูลที่จำเป็น (เวอร์ชั่น: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) ติดตั้งโมดูล
ใน Drupal7 คุณสามารถติดตั้งโมดูลจากส่วนผู้ดูแลระบบ แต่ฉันยังรู้สึกว่าคุณสมบัติใหม่นี้ไม่มีความหมายใด ๆ เพราะเราต้องค้นหาลิงก์โมดูลในเว็บไซต์ Druapl แล้วคัดลอกวางลงในพื้นที่ติดตั้งโมดูลผู้ดูแลระบบจริงๆ บ้า. มันคงจะดีถ้าพวกเขาทำบางสิ่งเช่น wordpress เพื่อค้นหางานเลี้ยงเล็ก ๆ อย่างไรก็ตามฉันเพิ่งจะดาวน์โหลดและติดตั้งมันในแบบเก่า (ฉันยังคงแนะนำวิธีนี้แบบเก่า)
ดาวน์โหลดโมดูลทั้งหมดจากเว็บไซต์ Drupal และติดตั้งในไดเรกทอรี youritename / sites / all / modules ไปที่http://www.yoursitename.com/node#overlay=admin/modulesและเปิดใช้งานโมดูลเหล่านี้ดังนี้
(1) มุมมอง (2) มุมมอง UI (3) มุมมองสไลด์โชว์ (4) มุมมองสไลด์โชว์: รอบ (5) เครื่องมือความโกลาหล (6) ลิงก์ (7) ไลบรารี (8) โทเค็น (ไม่จำเป็น) (3) สร้างแคชรูปภาพ
ใน Drupal7 imagecache เป็นส่วนหนึ่งของโมดูลหลักและตั้งชื่อเป็นสไตล์ภาพ ลองสร้างแคชภาพสองอันจากที่นี่หนึ่งภาพสำหรับตัวเลื่อนขนาดเต็มและอีกตัวสำหรับรูปภาพขนาดย่อ ในบทช่วยสอนนี้ฉันใช้ขนาด 935x293 (พิกเซล) สำหรับภาพตัวเลื่อนขนาดเต็มและขนาด 210x100 (พิกเซล) สำหรับภาพขนาดย่อ หมายเหตุ: การกำหนดค่าเหล่านี้จะถูกเลื่อนขึ้นอยู่กับความต้องการของคุณ
ไปที่http://www.yoursitename.com/node#overlay=admin/config/media/image-stylesแล้วคลิกที่ลิงค์เพิ่มสไตล์ใหม่ (1) ให้ชื่อสไตล์รูปภาพและคลิกที่ปุ่มสร้างสไตล์ใหม่ (2) ) ในหน้าจอการกำหนดค่าถัดไปเลือกรูปแบบใหม่ที่คุณต้องการแล้วคลิกปุ่มเพิ่ม (ในบทช่วยสอนนี้ฉันเลือกสไตล์การปรับขนาด) (3) บนหน้าจอถัดไปกำหนดความกว้างและความสูงและคลิกที่ปุ่มเพิ่มเอฟเฟกต์ (การตั้งค่าอาจแตกต่างกันไปขึ้นอยู่กับสไตล์ที่คุณเลือก) ฉันตั้งค่าความกว้างเป็น 935 และความสูงเป็น 293 พิกเซล
ทำกระบวนการเดียวกันนี้สำหรับภาพขนาดย่อด้วย (สำหรับมิติภาพขนาดย่อฉันตั้งความกว้างเป็น 210 และความสูงเป็น 100 พิกเซล) (4) สร้างประเภทเนื้อหาใหม่
มาสร้างประเภทเนื้อหาใหม่จากแถบเมนูแดชบอร์ดคลิกที่โครงสร้างแล้วประเภทเนื้อหาจากนั้นคลิกที่ลิงค์เพิ่มประเภทเนื้อหาใหม่
(1) ให้ชื่อที่มนุษย์อ่านได้ฉันตั้งชื่อเป็น Slider เด่น (ชื่อเครื่องจะถูกสร้างขึ้นโดยอัตโนมัติตามชื่อที่มนุษย์อ่านได้) (2) ให้คำอธิบายสั้น ๆ และเกี่ยวข้อง (3) การตั้งค่าแบบฟอร์มการส่ง การตั้งค่าเริ่มต้น (4) ตัวเลือกการเผยแพร่ฉันเลือกเฉพาะการเผยแพร่เท่านั้น (ไม่ได้เลือกการตั้งค่าอื่น ๆ ทั้งหมด) (5) การตั้งค่าการแสดงผลฉันไม่ได้เลือกข้อมูลวันที่และเวลา (6) การตั้งค่าความคิดเห็นฉันตั้งซ่อน (ปิดการใช้งาน) (7) การตั้งค่าเมนูฉันจะออกจากการตั้งค่าเริ่มต้น (8) คลิกปุ่มบันทึกและเพิ่มฟิลด์ (5) สร้างฟิลด์ใหม่
ในตัวอย่างนี้ฉันสร้างเพียงสองไฟล์เท่านั้นและเป็นฟิลด์รูปภาพและฟิลด์ลิงก์ เราจะใช้ฟิลด์รูปภาพเพื่ออัปโหลดรูปภาพตัวเลื่อนและฟิลด์ลิงก์สำหรับสร้างลิงก์ที่กำหนดเองซึ่งเราต้องการให้แถบเลื่อนของเราเชื่อมโยง
การตั้งค่าฟิลด์รูปภาพ
(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
ฉันตั้งค่าฟิลด์นี้ตามต้องการฉันเพิ่มชื่อผู้กำกับไฟล์ที่เรียกว่าตัวเลื่อนภาพเพื่อให้ภาพนี้ถูกจัดเรียงเป็นระยะจากภาพอื่น ๆ คุณสามารถตั้งค่าขนาดการอัปโหลดและความละเอียดสูงสุดได้ที่นี่ฉันมีฟิลด์ alt และชื่อเรื่องที่เปิดใช้งานและในที่สุดก็คลิกปุ่มบันทึกการตั้งค่า
โดยใช้วิธีการเดียวกันสร้างฟิลด์ลิงค์ด้วย
ลิงค์การตั้งค่าฟิลด์ (1) เลเบล: สไลเดอร์ลิงก์ (2) ฟิลด์: slider_link (3) ประเภทฟิลด์: ลิงค์ (4) วิดเจ็ต (องค์ประกอบของฟอร์ม): ลิงค์ (5) คลิกปุ่มบันทึกสำหรับการกำหนดค่าฟิลด์ลิงก์ . ฉันได้จัดฟิลด์ใหม่ตามที่แสดงด้านล่าง; ฟิลด์ชื่อเรื่องฟิลด์ภาพฟิลด์ลิงก์ฟิลด์เนื้อหา (คุณสามารถลบฟิลด์นี้ได้หากไม่จำเป็น) จัดการการแสดงผลบนแท็บจัดการการแสดงผลคุณสามารถกำหนดวิธีการวางฟิลด์ในการทูต ฉันได้ตั้งค่าฟิลด์ลิงก์เป็นซ่อนอยู่และฉันได้ตั้งป้ายกำกับรูปภาพเป็นซ่อนไว้ Drupal7: จัดการฟิลด์ (6) สร้างเนื้อหาตัวเลื่อนคุณสมบัติ
ฉันสร้างเนื้อหาตัวเลื่อนสี่ตัวสำหรับบทช่วยสอนนี้
(1) คลิกที่ลิงค์เพิ่มเนื้อหา (2) สร้างเนื้อหาสไลเดอร์ที่แนะนำ (3) ให้ชื่อชื่อที่ถูกต้อง (4) อัปโหลดภาพเลื่อน (5) ให้ชื่อฟิลด์ alt และชื่อเรื่อง (6) กำหนดชื่อลิงค์และ URL ที่คุณต้องการ แถบเลื่อนที่จะเชื่อมโยง (7) ปล่อยให้การตั้งค่า othe ทั้งหมดเป็นค่าเริ่มต้นยกเว้นสำหรับฟิลด์พา ธ หากคุณต้องการให้คุณให้นามแฝง URL ที่เป็นมิตรกับ SEO (8) บันทึกเนื้อหา
เช่นเดียวกับการสร้างเนื้อหา Slider ที่แนะนำเพิ่มเติม (ฉันได้สร้างเนื้อหาสี่รายการ) (7) สร้างมุมมองใหม่
ตอนนี้ได้เวลาสร้างมุมมองสไลด์โชว์ใหม่ของเราแล้ว จากเมนูแดชบอร์ดคลิกที่โครงสร้างแล้วคลิกที่มุมมอง
(1) คลิกเพิ่มลิงค์มุมมองใหม่ (2) ให้ชื่อมุมมองฉันได้ตั้งชื่อเป็น Slider ที่แนะนำ (ชื่อเครื่องจะถูกสร้างขึ้นโดยอัตโนมัติ) (3) ให้คำอธิบายมุมมองที่เป็นประโยชน์ (4) เลือกแสดงเนื้อหาของประเภท Slider ที่แนะนำ ชื่อประเภท) (5) ยกเลิกการเลือกสร้าง Pge และทำเครื่องหมายสร้างบล็อก (6) พิมพ์ชื่อบล็อกแล้วเลือกรูปแบบการแสดงเป็นรายการ "สไลด์โชว์" ของ "ฟิลด์" ต่อหน้า 5 (คุณสามารถป้อนจำนวนรายการที่คุณต้องการแสดง) (7) ) คลิกปุ่ม "ดำเนินการต่อ & แก้ไข" การตั้งค่าฟิลด์มุมมองอันดับแรกให้เพิ่มฟิลด์ลิงก์ (ลิงก์ต้องเป็นฟิลด์แรกเพื่อให้ทำงานได้อย่างถูกต้อง) ดังนั้นคลิกที่ไอคอนเพิ่มและจากตัวกรองกลุ่มเลือกเนื้อหาเพิ่มเนื้อหา: ลิงก์คลิก "เพิ่มและกำหนดค่าปุ่ม" ในหน้าต่าง cofiguration ถัดไปยกเลิกการเลือก "สร้างป้ายกำกับ" "ตรวจสอบ" แยกออกจากการแสดงผล คลิกที่ปุ่ม "ใช้"
ต่อไปเราจะเพิ่มฟิลด์รูปภาพดังนั้นคลิกที่ไอคอนเพิ่มและจากตัวกรองกลุ่มเลือกเนื้อหาเพิ่มเนื้อหา: ฟิลด์รูปภาพ (หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณเลือกฟิลด์รูปภาพที่เราเกณฑ์สำหรับประเภทเนื้อหาของแถบเลื่อนนี้เท่านั้น) คลิก "เพิ่มและกำหนดค่า ปุ่ม "ในหน้าต่าง cofiguration ถัดไปให้ยกเลิกการเลือก" สร้างป้ายกำกับ "
ฟอร์แมตเตอร์: รูปภาพ (หากคุณติดตั้ง Colorbox หรือไลท์บ็อกซ์คุณสามารถเลือกได้ที่นี่!) รูปแบบภาพ: เต็มขนาด (เลือกภาพที่คุณสร้างขึ้นในขั้นตอนข้างต้น) ลิงก์ภาพไปยัง: ไม่มีการตั้งค่ารูปแบบ: ออกจากการตั้งค่าเริ่มต้น ค่าเริ่มต้นเขียนซ้ำผลลัพธ์: ตรวจสอบเอาต์พุตฟิลด์นี้เป็นลิงก์พา ธ ลิงก์: [view_node] (หมายเหตุ: เลื่อน dow a bit และคุณสามารถดูรูปแบบการแทนที่ที่สร้างโดยโมดูลโทเค็นหลัก (ถ้าเราไม่ได้ตั้งค่าฟิลด์ลิงก์เป็นอันดับแรก ไม่เห็นตัวเลือกลิงก์ฟิลด์ที่นี่) คัดลอกเท่านั้น [view_node] จากนั้นเลื่อนขึ้นและวางในฟิลด์ลิงก์พา ธ ) คลิก "ใช้ปุ่ม"
ในที่สุดเราจำเป็นต้องมีฟิลด์เพิ่มเติมสำหรับภาพขนาดย่อดังนั้นให้คลิกที่ไอคอนเพิ่มและจากตัวกรองกลุ่มเลือกเนื้อหาเพิ่มเนื้อหา: ฟิลด์ภาพ (หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณเลือกฟิลด์ภาพที่เราทำการเกณฑ์สำหรับประเภทเนื้อหาของแถบเลื่อนนี้เท่านั้น) คลิก "เพิ่มและกำหนดค่าปุ่ม" ในหน้าต่าง cofiguration ถัดไปยกเลิกการเลือก "สร้างป้ายกำกับ" และตรวจสอบจากการแสดงผลฟอร์แมต: ภาพ (ถ้าคุณติดตั้ง Colorbox หรือไลท์บ็อกซ์คุณสามารถเลือกได้ที่นี่!) รูปแบบภาพ: รูปขนาดย่อ คุณได้สร้างในขั้นตอนข้างต้น) เชื่อมโยงภาพไปที่: ไม่มีการตั้งค่ารูปแบบ: ออกจากการตั้งค่าเริ่มต้นไม่มีพฤติกรรมผลลัพธ์: ออกจากการตั้งค่าเริ่มต้นเขียนซ้ำผลลัพธ์: ตรวจสอบช่องนี้ออกเป็นช่องเชื่อมโยงเส้นทางลิงก์: [view_node] (หมายเหตุ: คุณสามารถดูรูปแบบการแทนที่ที่สร้างขึ้นโดยโมดูลโทเค็นหลัก (ถ้าเราไม่ได้ 'ไม่ตั้งค่าฟิลด์ลิงก์เป็นอันดับแรกเราไม่เห็นตัวเลือกลิงก์ฟิลด์ที่นี่) คัดลอกเฉพาะ [view_node] จากนั้นเลื่อนขึ้นและวางในฟิลด์ลิงก์พา ธ ) คลิก "ใช้ปุ่ม"
มุมมองการตั้งค่าตัวกรอง
ใน Views3 ตัวกรองจะถูกสร้างขึ้นในตอนแรกขณะที่เราเลือกประเภทเนื้อหาและการตั้งค่าอื่น ๆ ! หากคุณต้องการไฟล์เพิ่มเติมใด ๆ คุณสามารถสร้างมันได้ที่นี่!
มุมมองการตั้งค่าสไตล์
คลิกที่ Format Slideshow | ตั้งถิ่นฐานและในหน้าต่าง configuratioin ถัดไปตั้งค่าดังต่อไปนี้ (1) ประเภทรายการ: รายการไม่เรียงลำดับ (2) คลาส Wrapper: ออกจากการตั้งค่าเริ่มต้น (3) สไตล์> สกิน: deafult (4) สไลด์> ประเภทสไลด์โชว์: รอบ (5) ตัวเลือกวงจรคุณต้องดาวน์โหลดปลั๊กอินวงจร jQuery และคัดลอก jquery cycle.all.min.js ไปยังเว็บไซต์ / ทั้งหมด / ห้องสมุด / jquery.cycle คุณสามารถค้นหาปลั๊กอินที่http://malsup.com/jquery/cycle
อย่างง่ายภาษาอังกฤษสร้างโฟลเดอร์ชื่อ "libraries" ในไดเรกทอรีไซต์ / ทั้งหมดแล้วสร้างโฟลเดอร์อื่นชื่อ "jquery.cycle" ในไดเรกทอรีนั้นและสุดท้ายคัดลอกและวางเฉพาะ "jquery.cycle.all.min.js" ใน ไดเรกทอรีนี้
(6) การถ่ายโอน: จาง (7) การกระทำ: หยุดชั่วคราวเมื่อเลื่อน (8) Tweaks ของ Internet Explorer: เริ่มต้น (9) วิดเจ็ต: คุณสามารถเลือกได้ทั้งด้านบนและล่าง (ฉันเลือกด้านล่างและการตั้งค่าล่วงหน้าดังนี้) (10) วิดเจ็ตด้านล่าง> เพจเจอร์> ประเภทเพจเจอร์: ฟิลด์ (11) ฟิลด์เพจเจอร์: เนื้อหา: รูปภาพ (หมายเหตุ: อันสุดท้ายที่เราเพิ่มสำหรับนิ้วหัวแม่มือไม่ผิดเนื่องจากฟิลด์ทั้งสองจะมีชื่อเหมือนกัน) (12) เปิดใช้งานสไลด์ และหยุดชั่วคราวเมื่อ Pager Hove: ถูกเลือกตัวควบคุมและตัวเลื่อนตัวนับจะไม่ถูกตรวจสอบ (13) คลิกปุ่ม Apply
รูปแบบแสดงการตั้งค่าฟิลด์
Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)
(8) สร้างภูมิภาคที่กำหนดเอง (ขั้นตอนเพิ่มเติม)
(1) ในโฟลเดอร์ thems ของคุณเปิดไฟล์ your_theme_name.info และเพิ่มพื้นที่ใหม่ดังนี้: ขอบเขต [Featured_slider] = แถบเลื่อนเด่นและบันทึกไฟล์. info (2) เปิดไฟล์ page.tpl.php ของธีมและเพิ่มโค้ดเหล่านี้ที่คุณต้องการให้สไลด์ของคุณแสดงตามที่แสดงด้านล่าง;
คุณสามารถสร้างเทมเพลตหน้าแรกที่กำหนดเองเช่นหน้า - front.tpl.php เพื่อให้คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใด ๆ กับเทมเพลต page.tpl.php เริ่มต้น [9] เปิดใช้งานและกำหนดค่าบล็อก
ตอนนี้บล็อกนี้จะปรากฏในพื้นที่ปิดใช้งานบล็อกดังนั้นจากเมนูแดชบอร์ดไปที่โครงสร้าง> บล็อกและเปิดใช้งานการบล็อกเป็นพื้นที่เริ่มต้นของธีมหรือภูมิภาคที่กำหนดเองที่เราสร้างขึ้น (เด่น _slider) (ภูมิภาคแตกต่างกันไปขึ้นอยู่กับธีมที่คุณใช้)
การตั้งค่าการกำหนดค่าบล็อกหลังจากเปิดใช้งานบล็อกคุณจะได้รับลิงค์เพื่อกำหนดค่าบล็อกดังนั้นคลิกที่ลิงค์กำหนดค่าและในส่วนการตั้งค่าที่ตั้งไว้ด้านล่าง;
(1) บล็อกชื่อ (ถ้าคุณไม่ต้องการให้ชื่อเรื่องของ blobk แสดงเพียงพิมพ์) (2) อีกครั้งคุณจะได้รับการตั้งค่าภูมิภาคเฉพาะของธีมที่เปิดใช้งานทั้งหมด ในการตั้งค่าการมองเห็น (3) หน้า> แสดงบล็อคในหน้าเฉพาะ: เลือกเฉพาะหน้าที่ระบุไว้และประเภทเพื่อให้บล็อกนี้จะแสดงเฉพาะหน้าแรกเท่านั้น CSS เคล็ดลับเพื่อแสดง THUMBNAILS INLINE
เพิ่มโค้ด CSS เหล่านี้ลงในสไตล์ชีทของธีมของคุณเพื่อแสดงอินไลน์รูปย่อ .views-slideshow-controls-bottom .views-slideshow-pager-field-item {float: left; กำไร: 20px 6px; } ทำการปรับเปลี่ยนที่จำเป็น
ลองดูที่นี้พอดคาสต์ Mustardseed สื่อ: มุมมองสไลด์โชว์ชุดรูปแบบ
ในช่วงพอดคาสต์บ๊อบวิ่งผ่านพื้นฐานบางส่วนของ Views Slideshow เช่นเดียวกับวิธีกำหนดธีมของเอาต์พุต มันขึ้นอยู่กับ Drupal 6 แต่ฉันเชื่อว่าพื้นฐานและบทเรียนส่วนใหญ่จะเหมือนกัน มีเพียง CSS น้อยสไลด์โชว์สามารถดูตันดีกว่า ฉันขอแนะนำให้ดูพ็อดคาสท์นี้หากคุณต้องการดูสไลด์โชว์ที่สวยงาม
หากคุณต้องการทราบสไลด์โชว์มุมมองเพิ่มเติม (ตัวอย่างเช่นด้วยภาพขนาดย่อ) คุณต้องดูบทแนะนำที่ดีนี้: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7