บทนำ: เพิ่มสไลด์โชว์ภาพแบบไดนามิก

นี้ เกี่ยวกับการสอน จะหารือถึงวิธีการสร้างภาพเคลื่อนไหว JavaScript สไลด์โชว์ภาพใน Drupal 8 ใช้ ชมภาพสไลด์ jCarousel, & FlexSlider โมดูล.


ปัญหา: วิธีใช้ เข้าชม เพื่อสร้าง JavaScript ภาพเคลื่อนไหวสไลด์โชว์จากไฟล์ภาพที่จัดเก็บใน Drupal 8 เว็บไซต์? ตัวเลือกอะไรสำหรับการจัดเรียงภาพความเร็วเฟรม, & ผลการเปลี่ยนแปลง?

สารละลาย: ติดตั้ง ชมภาพสไลด์ jCarousel, & FlexSlider โมดูลสำหรับ Drupal 8. โมดูลเหล่านี้จะทำให้ง่ายต่อการสร้างภาพสไลด์จาก เข้าชม & ใช้เป็น บล็อก ใน แผง.

มีวิธีการกรองที่แตกต่างกันด้วย ภาพ ประเภทเนื้อหาและ อนุกรมวิธาน ประเภท. Drupal 8 ผู้สร้างไซต์จะต้องสร้างระบบการเผยแพร่สำหรับ ภาพสไลด์โชว์.

ปล่อย’เริ่มต้น.

ขั้นตอนที่หนึ่ง: ติดตั้งโมดูล Drupal 8 & เพิ่มเนื้อหารูปภาพ

ราคาเริ่มต้น: ใช้วิธีการอัปโหลด, FTP, URL, Git, นักแต่งเพลงและอื่น ๆ ติดตั้งสามโมดูลที่จำเป็น ชมภาพสไลด์ jCarousel, & FlexSlider สำหรับ Drupal 8.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

mkdir -p libraries / jquery.cycle && cd _ $ && wget https://malsup.github.io/jquery.cycle.all.js
&& mkdir -p ../../l ไลบรารี/jquery.hoverIntent && cd _ $ && wget https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master/jquery.hoverIntent.js
&& mkdir -p ../../l ไลบรารี/json2 && cd _ $ && wget https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

บันทึก: หากคุณกำลังใช้ ตัวจัดการไฟล์ & cPanel, คุณอาจต้องเปลี่ยน / เว็บไซต์ / เริ่มต้น สิทธิ์ของโฟลเดอร์เป็น 755 เพื่อสร้าง ../ ห้องสมุด โฟลเดอร์สำหรับ JavaScript การอ้างอิง.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

ต่อไป: หลังจากติดตั้งแล้ว JavaScript ห้องสมุด & การอ้างอิงอื่น ๆ เตรียมที่จะสร้าง เข้าชม โดยการสร้างประเภทเนื้อหารูปภาพที่กำหนดเองและรายการที่เกี่ยวข้องของ อนุกรมวิธาน เงื่อนไข.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

การตั้งค่าสำหรับประเภทเนื้อหาใหม่: “ภาพสไลด์โชว์”

  • ไม่มีการโปรโมตหน้าแรกเหนียวที่ด้านบนสุดของรายการหรือการแก้ไข.
  • ไม่มีการแสดงชื่อผู้แต่ง & โพสต์ข้อมูล.
  • ไม่มีความคิดเห็น.

คำแนะนำ: สร้างประเภทเนื้อหาใหม่ที่ชื่อว่า ภาพสไลด์โชว์ และเพิ่มฟิลด์รูปภาพในจอแสดงผลเพื่อเก็บไฟล์ที่จะใช้ สไลด์โชว์. ทำให้แน่ใจว่าจะกำหนดค่า รูปขนาดย่อ ขนาด.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

โมดูลตัวเลือก – การครอบตัดรูปภาพ:

บันทึก: หากคุณต้องการครอบตัดภาพที่อัพโหลดเพื่อให้ตรงกับทุกขนาดของภาพเคลื่อนไหวสไลด์โชว์ให้ติดตั้ง ครอบตัดวิดเจ็ตรูปภาพ & ครอบตัด API. นอกจากนี้ยังอาจช่วยให้มีประเภทเนื้อหาภาพมากกว่าหนึ่งประเภท.

  • ครอบตัดวิดเจ็ตรูปภาพ:https://www.drupal.org/project/image_widget_crop
  • ครอบตัด API:https://www.drupal.org/project/crop
  • ห้องสมุดครอปเปอร์:https://github.com/fengyuanchen/cropper
    —> อัปโหลดไปยัง / ห้องสมุด / เก็บเกี่ยว / อ

ต่อไป: สามารถใช้ชนิดเนื้อหารูปภาพเดียวกันสำหรับสไลด์โชว์หลายรายการโดยการเพิ่ม อนุกรมวิธาน เงื่อนไข คุณยังสามารถเชื่อมโยง อนุกรมวิธาน ด้วยภาพขนาดแตกต่างกันสำหรับ กระทู้ ภูมิภาค.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

เสร็จสิ้น: สร้าง อนุกรมวิธาน คำที่จะใช้ในการกรองภาพสไลด์โชว์เช่น Frontpage, Sidebar, Header, Footer ฯลฯ และเพิ่มไปยังประเภทโหนดผ่าน CCK ฟิลด์การปรับแต่งการแสดงผล.

ขั้นตอนที่สอง: สร้างบล็อกด้วยมุมมองสไลด์โชว์.

ราคาเริ่มต้น: เมื่อ อนุกรมวิธาน ถูกสร้างขึ้น & ภาพสไลด์โชว์ถูกอัพโหลดไปที่ เข้าชม และสร้างตัวกรองเนื้อหาใหม่สำหรับ ภาพสไลด์โชว์ ไฟล์ & เลือก ชมภาพสไลด์ ในฐานะที่เป็นจอแสดงผล.

คำแนะนำ: คุณสามารถเปลี่ยนการตั้งค่าในภาพเคลื่อนไหวรวมถึงความเร็วของเฟรมตัวกรอง & ผลการเปิดหน้า ฯลฯ ใน ชมภาพสไลด์ การตั้งค่าในขณะที่ใช้ เข้าชม สำหรับจำนวน & สุ่ม.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

การตั้งค่าที่แนะนำสำหรับการดูภาพสไลด์ (Drupal 8):

  • ผิวหนัง:ค่าเริ่มต้น
  • ประเภทสไลด์โชว์:วงจร
  • ผลกระทบ:เลือนหายไป
  • หนังบู๊: หยุดชั่วคราวเมื่อโฮเวอร์

Q

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

เสร็จสิ้น: เปรียบเทียบ ชมภาพสไลด์ เพื่อการแก้ปัญหาอื่น ๆ ที่จะใช้ที่แตกต่างกัน JavaScript ภาพเคลื่อนไหวใน ธีม Drupal 8 ภูมิภาคหรือสำหรับการแยกแคมเปญการจัดการโฆษณาการตกแต่งไอคอน ฯลฯ.

ขั้นตอนที่สาม: สร้างภาพเคลื่อนไหว jCarousel ในบล็อก

ราคาเริ่มต้น: ในบทช่วยสอนนี้เราจะใช้ ชมภาพสไลด์ jCarousel, & FlexSlider สลับกันได้ด้วยตัวกรองรูปภาพเดียวกันใน เข้าชม เพื่อสาธิตซอฟต์แวร์.

ต่อไป: โคลน ชมภาพสไลด์ บล็อกและบันทึกใหม่ บล็อกการดู กับ jCarousel เป็นจอแสดงผล ใช้การตั้งค่าที่กำหนดไว้เพื่อเปลี่ยนเอฟเฟ็กต์ภาพเคลื่อนไหว & ความเร็ว.

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

การตั้งค่าที่แนะนำสำหรับ jCarousel ใน Views (D8):

  • ตัดเนื้อหา:กลม
  • ผิวหนัง: ค่าเริ่มต้น
  • จำนวนรายการที่มองเห็นได้:รถยนต์
  • เลื่อน:รถยนต์

เสร็จสิ้น: บันทึก ดู และเปรียบเทียบความแตกต่างระหว่าง jCarousel & ชมภาพสไลด์ สำหรับความต้องการออกแบบเว็บไซต์ของคุณ สร้างภาพเคลื่อนไหวที่กำหนดเอง & สไลด์โชว์สำหรับแต่ละขนาดภาพ.

ขั้นตอนที่สี่: สร้างภาพเคลื่อนไหว FlexSlider ในบล็อก

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

การตั้งค่าที่แนะนำสำหรับ FlexSlider ใน Views (D8):

  • ชุดตัวเลือก:ม้าหมุนขั้นพื้นฐาน
  • ฟิลด์คำบรรยายภาพ:เนื้อหา: ชื่อเรื่อง

คำแนะนำ: ทดสอบภาพสไลด์โชว์ของคุณด้วย ชมภาพสไลด์ jCarousel, & FlexSlider เป็นเครื่องมือแสดงผลเพื่อดูว่าอันไหนที่ตรงกับคุณ กระทู้, บล็อก ภูมิภาคหรือ แถบด้านข้าง ภาพเคลื่อนไหว.

เสร็จสิ้น: อัปโหลดรูปภาพใหม่สำหรับแต่ละขนาดสไลด์โชว์ (ส่วนหัวส่วนท้ายแถบด้านข้าง ฯลฯ ) หรือแคมเปญโฆษณา สร้างภาพเคลื่อนไหวสไลด์โชว์ใหม่พร้อม แผง & บล็อก.

ขั้นตอนที่ห้า: ฝังบล็อกสไลด์โชว์บนหน้า Drupal

วิธีสร้างสไลด์โชว์แบบเคลื่อนไหวใน Drupal 8

คำแนะนำ: สร้างภาพสไลด์ขนาดต่าง ๆ สำหรับหัวกระดาษท้ายกระดาษ, & ขอบเขตของแถบด้านข้างในชุดรูปแบบ แสดงสไลด์โชว์ที่แตกต่างกันสำหรับส่วนเว็บไซต์แคมเปญโฆษณาหรือการนำทาง GUI.

เสร็จสิ้น: ใช้ แผง & บล็อก ภูมิภาคใน Drupal 8 ไปยังตำแหน่ง JavaScript สไลด์โชว์ภาพโดยใช้ ชมภาพสไลด์ jCarousel, & FlexSlider ทุกที่ที่จำเป็นสำหรับการออกแบบเว็บไซต์.

สรุป: Drupal 8 & สไลด์โชว์รูปภาพ JavaScript

สรุป: ที่ JavaScript โซลูชันแอนิเมชั่นที่คุณเลือก Drupal 8 ขึ้นอยู่กับ ธีม, ออกแบบกราฟิก, & คุณภาพของภาพ. ตัวเลื่อนแต่ละตัวมีคุณสมบัติสำหรับองค์ประกอบ GUI.

ชมภาพสไลด์ jCarousel, & FlexSlider ล้วนเป็นโอเพ่นซอร์ส & ใช้งานฟรีอนุญาตให้ศิลปิน & นักพัฒนาเพื่อทดลองกับตัวแปรสำหรับเอฟเฟกต์ภาพเคลื่อนไหวที่กำหนดเองที่หลากหลาย.

ลองดูบริการโฮสติ้ง 3 อันดับแรกของ Drupal:

ChemiCloud

ราคาเริ่มต้น:
$ 2.76


ความเชื่อถือได้
10


การตั้งราคา
9.9


เป็นมิตรกับผู้ใช้
9.9


สนับสนุน
10


คุณสมบัติ
9.9

อ่านความคิดเห็น

เยี่ยมชม ChemiCloud

Hostinger

ราคาเริ่มต้น:
$ 0.99


ความเชื่อถือได้
9.3


การตั้งราคา
9.3


เป็นมิตรกับผู้ใช้
9.4


สนับสนุน
9.4


คุณสมบัติ
9.2

อ่านความคิดเห็น

เยี่ยมชม Hostinger

A2 โฮสติ้ง

ราคาเริ่มต้น:
$ 3.92


ความเชื่อถือได้
9.3


การตั้งราคา
9.0


เป็นมิตรกับผู้ใช้
9.3


สนับสนุน
9.3


คุณสมบัติ
9.3

อ่านความคิดเห็น

เยี่ยมชม A2 Hosting

บทความเชิงปฏิบัติที่เกี่ยวข้อง

  • วิธีสร้างหน้า Landing Page สำหรับ Drupal 8 โดยใช้ Display Suite
    มือใหม่
  • วิธีเพิ่มการครอบตัดไปยังการอัพโหลดรูปภาพใน Drupal 8
    มือใหม่
  • วิธีสร้างหน้า Landing Page สำหรับ Drupal 8 โดยใช้ขอบเขตของธีม
    มือใหม่
  • วิธีการสร้างหน้า Landing Page สำหรับ Drupal โดยใช้พาเนล?
    สื่อกลาง
  • วิธีตั้งค่าฟอรัมผู้ใช้ใน Drupal 8?
    มือใหม่
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me