ดูสไลด์โชว์จากโหนดเดียว

ฉันพยายามที่จะบรรลุสไลด์โชว์การทำงานจากภาพในโหนดเดียว ภาพจะถูกอัพโหลดจากช่องภาพ มันคือ drupal 7 ฉันสร้างเนื้อหาใหม่แล้วตอนนี้ทั้งหมดคือสไลด์โชว์จากหลาย ๆ โหนด (มีภาพเดียวในทุก ๆ โหนด) มันใช้งานได้ดี แต่มันก็มีปัญหาเกินไปที่จะเพิ่มโหนดใหม่สำหรับทุกอิมเมจ

ในมุมมองการตั้งค่าฟิลด์ภาพภายใต้การตั้งค่าหลายฟิลด์จะมีช่องทำเครื่องหมาย"แสดงค่าทั้งหมดในแถวเดียวกัน"ซึ่งจะถูกตรวจสอบโดยค่าเริ่มต้น หากคุณยกเลิกการเลือกช่องนี้ภาพนั้นจะวางแต่ละภาพในแถวใหม่และจะทำงานตามที่คุณต้องการ ฉันรู้ว่าการดูมีคุณสมบัตินี้ตั้งแต่รุ่นที่ 2 อย่างน้อย แต่มันอาจจะเรียกว่าบางสิ่งบางอย่างแตกต่างกันเล็กน้อยในรุ่นที่เก่ากว่า

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

สนามสไลด์โชว์โมดูลคือสิ่งที่คุณต้องการแล้ว รูปภาพทั้งหมดมีอยู่ในโหนด (ไม่มีโหนดปม) และใช้วงจร jquery (เช่นเดียวกับการดูสไลด์โชว์) เพื่อสร้างแกลเลอรี่แบบไดนามิกและสไลด์โชว์

ฉันเพิ่งสร้างเว็บไซต์ที่มีแกลเลอรี่ง่าย ๆ และฉันก็ไม่ได้ใช้โมดูลสไลด์โชว์เพิ่มเติมเลย สิ่งที่ฉันต้องการคือjQuery Cycleและจาวาสคริปต์เล็ก ๆ น้อย ๆ เพิ่มในธีมที่กำหนดเองของฉัน ไซต์นี้มีประเภทเนื้อหา 'รูปถ่าย' และคำศัพท์ 'อัลบั้ม' เพื่อกำหนดรูปถ่ายให้กับอัลบั้มต่างๆ มุมมองจะสร้างรายการภาพถ่ายที่กรองโดยอัลบั้ม ในชุดรูปแบบของฉันฉันมีไฟล์ js ที่มีลักษณะดังนี้:

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

CSS ที่เสร็จสมบูรณ์แล้ว:

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

PS IMHO มันไม่ได้ดีกว่าเสมอไปที่จะมีโหนดเดียวต่อภาพ เป็นความจริงที่วิธีการนี้ให้ความยืดหยุ่นมากกว่า (ตัวอย่างเช่นการเพิ่มภาพหนึ่งภาพลงในสไลด์โชว์หลายภาพ) แต่สำหรับผู้ใช้บางคนความยืดหยุ่นที่ไม่จำเป็นเป็นเพียงความซับซ้อนที่ไม่มีจุดหมาย

คุณอาจพิจารณาใช้โมดูลGalleria มันใช้โหนดเดียวและแสดงภาพจากมันเป็นสไลด์โชว์

ฉันค้นพบวิธีที่ดีในการมีหลายภาพและลิงค์หลายรายการต่อภาพในโหนดเดียว:

สิ่งที่คุณต้องการทำคือตรวจสอบให้แน่ใจว่าฟิลด์รูปภาพและลิงค์ตั้งค่าไม่ จำกัด ในประเภทเนื้อหา เมื่อคุณสร้างมุมมองของคุณตรวจสอบให้แน่ใจว่าไม่ได้เลือก "แสดงค่าทั้งหมดในแถวเดียวกัน" เพิ่มเขตข้อมูลสำหรับรูปภาพของคุณและสำหรับลิงค์ของคุณ เพิ่ม Global: ตัวกรอง PHP และตั้งรหัสตัวกรองเป็น: return (! $ row-> delta == $ row-> delta_1);

ที่ควรทำ คุณจะต้องมีโมดูล Views PHP ติดตั้งเพื่อใช้ PHP เป็นตัวกรอง

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

ฉันแนะนำโมดูลColorbox

ลองดูที่บทช่วยสอนวิดีโอต่อไปนี้: Colorbox สำหรับ Drupal 7 ตอนที่ 1: การรวมและการติดตั้งฟิลด์รูปภาพ

เช่นเดียวกับเกือบทุกอย่างใน Drupal มีวิธีแก้ไขปัญหาที่แตกต่างกันมากมาย แต่ฉันต้องการแบ่งปันเรื่องง่าย ๆ ที่ฉันยังไม่เคยเจอที่ไหนมาก่อน

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

1. สร้างมุมมองสำหรับสไลด์โชว์ของคุณ ใช้รูปแบบ "รายการที่ไม่จัดรูปแบบ"
2. ตั้งค่ามุมมองเพื่อแสดงรายการเดียวเท่านั้นเพื่อให้คุณจัดการกับโหนดเดียวเท่านั้น (หรือใช้ตัวกรองบริบท: NID)
3. เพิ่มเขตข้อมูลทั้งหมดที่คุณต้องการให้ปรากฏในสไลด์โชว์ ยกเว้นฟิลด์ทั้งหมดจากการแสดงผล
4. เพิ่มฟิลด์ที่กำหนดเอง (ตรวจสอบให้แน่ใจว่ามีการสร้างฟิลด์นี้หลังจากฟิลด์ทั้งหมดที่คุณยกเว้นจากการแสดงผล) ที่นี่คุณจะสร้างมาร์กอัปพื้นฐานสำหรับสไลด์โชว์ของคุณ การใช้รูปแบบการเปลี่ยนที่มีอยู่ให้ตั้งค่าแต่ละฟิลด์ที่มีอยู่ภายในliรายการดังนี้:

   
   <ul id="slider">
   <li>[text_field_1]</li>
   <li>[image_field_1]</li>
   <li>[text_field_2]</li>
   <li>[image_field_2]</li>
   </ul>
   
   

5. จากนั้นคุณสามารถเรียกใช้ตัวเลื่อน jQuery ที่คุณต้องการ หากคุณติดตั้งปลั๊กอิน jQuery Cycleแล้วคุณสามารถเรียกใช้งานบนแถบเลื่อนได้อย่างง่ายดาย เพียงตรวจสอบให้แน่ใจว่าปลั๊กอินนั้นได้รับการโหลดบนหน้าเว็บด้วยตัวเลื่อนของคุณแล้วเรียกใช้งานบนที่สร้างขึ้นใหม่ul:

   
   (function ($, Drupal, window, document, undefined) {
   
       $(document).ready(function() {
           $('#slider').cycle({
           // choose your options
       });
       });
   
   })(jQuery, Drupal, this, this.document);
   
   

และคุณควรจะไปดี

มี moduel https://www.drupal.org/project/field_slideshowซึ่งสร้างขึ้นเพื่อสร้างสไลด์โชว์จากโหนดเดียว

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