Xem slideshow từ nút đơn

Tôi đang cố gắng để đạt được trình chiếu làm việc từ hình ảnh trong một nút. Hình ảnh được tải lên từ trường hình ảnh. Đó là drupal 7. Tôi đã tạo loại nội dung mới và tất cả những gì tôi làm bây giờ là trình chiếu từ nhiều nút (với một hình ảnh trong mỗi nút). Điều này hoạt động tốt nhưng đó là quá khó khăn để thêm nút mới cho mỗi hình ảnh duy nhất.

Trong cài đặt trường hình ảnh chế độ xem, trong Cài đặt nhiều trường , có hộp kiểm cho "Hiển thị tất cả các giá trị trong cùng một hàng" được kiểm tra theo mặc định. Nếu bạn bỏ chọn hộp này, nó sẽ đặt mỗi hình ảnh vào một hàng mới và nó sẽ hoạt động như bạn yêu cầu. Tôi biết lượt xem đã có tính năng này kể từ ít nhất là phiên bản 2, nhưng nó có thể được gọi là một cái gì đó hơi khác trong các phiên bản cũ.

Tôi thích làm theo cách này cho các trình chiếu đơn giản, tôi có thể sắp xếp lại tất cả các hình ảnh trên một nút / trang chỉnh sửa. Nhưng đối với các trình chiếu phức tạp hơn, như nơi mỗi hình ảnh liên kết ở đâu đó hoặc có văn bản thay thế, đặt cược tốt nhất của bạn có lẽ vẫn là sử dụng một nút trên mỗi hàng.

Các Dòng Slideshow Module này là chính xác những gì bạn cần sau đó. Tất cả các hình ảnh được chứa trong nút (không phình nút) và nó sử dụng chu trình jquery (Giống như trình chiếu xem) để tạo ra một thư viện động và trình chiếu.

Gần đây tôi đã xây dựng một trang web với các phòng trưng bày đơn giản và cuối cùng tôi không sử dụng các mô-đun trình chiếu bổ sung. Tất cả những gì tôi cần là jQuery Chu kỳ và một ít javascript, được thêm vào chủ đề tùy chỉnh của tôi. Trang web này có loại nội dung 'ảnh' và từ vựng 'album' để gán ảnh cho các album khác nhau. Một khung nhìn tạo ra một danh sách các bức ảnh được lọc theo album. Trong chủ đề của tôi, tôi có một tệp js trông như thế này:

(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)

Một cú chạm CSS kết thúc nó:

.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;
}

Tái bút IMHO, không phải lúc nào cũng tốt hơn để có một nút cho mỗi hình ảnh. Đúng là cách tiếp cận này cung cấp tính linh hoạt cao hơn (ví dụ: thêm một hình ảnh vào nhiều trình chiếu), nhưng với một số người dùng cuối, tính linh hoạt không cần thiết chỉ là sự phức tạp vô nghĩa.

Bạn có thể cân nhắc sử dụng mô-đun Galleria . Nó sử dụng một nút duy nhất và hiển thị hình ảnh từ nó dưới dạng trình chiếu.

Tôi phát hiện ra một cách hay để có nhiều hình ảnh và nhiều liên kết cho mỗi hình ảnh trong một nút:

Điều bạn sẽ muốn làm là đảm bảo rằng cả trường hình ảnh và liên kết được đặt thành không giới hạn trong loại nội dung. Khi bạn tạo chế độ xem của mình cũng đảm bảo rằng "Hiển thị tất cả các giá trị trong cùng một hàng" KHÔNG được chọn. Thêm một trường delta cho hình ảnh của bạn và cho liên kết của bạn. Thêm bộ lọc Toàn cầu: PHP và đặt mã bộ lọc thành này: return (! $ Row-> delta == $ row-> delta_1);

Nên làm vậy. Bạn sẽ cần cài đặt mô-đun Views PHP để sử dụng PHP làm bộ lọc.

Để hiển thị nhiều hình ảnh của một nút trong thanh trượt, hãy sử dụng mô-đun khối hiển thị động và đọc cài đặt cấu hình. Trong trường hợp này khi bạn tạo chế độ xem để hiển thị khối thanh trượt, vui lòng không chọn hộp kiểm khi thêm hình ảnh với "Hiển thị nhiều cài đặt trường" nếu nó đã được chọn, vui lòng bỏ chọn nó.

Tôi khuyên dùng mô-đun Colorbox

Ngoài ra, hãy xem hướng dẫn bằng video sau: Colorbox cho Drupal 7, phần 1: Tích hợp và tích hợp trường hình ảnh

Giống như hầu hết mọi thứ trong Drupal, có một loạt các giải pháp khác nhau cho vấn đề này, nhưng tôi muốn chia sẻ một giải pháp đơn giản mà tôi chưa từng gặp ở bất cứ đâu.

Về cơ bản, tôi đã tìm kiếm một cách để hiển thị một loạt các trường khác nhau, tất cả được gắn vào một nút duy nhất trong một slideshow. Các trường này bao gồm cả trường hình ảnh và văn bản. Vì vậy, để hiển thị tất cả các trường được đính kèm vào một nút trong trình chiếu:

1. Tạo chế độ xem cho trình chiếu của bạn. Sử dụng định dạng "Danh sách chưa được định dạng".
2. Đặt chế độ xem chỉ hiển thị một mục, để bạn chỉ xử lý một nút duy nhất (hoặc sử dụng Bộ lọc theo ngữ cảnh: NID)
3. Thêm tất cả các trường mà bạn muốn xuất hiện trong trình chiếu. Loại trừ tất cả các lĩnh vực từ màn hình.
4. Thêm một trường tùy chỉnh (đảm bảo trường này được hiển thị sau tất cả các trường bạn đã loại trừ khỏi màn hình). Đây là nơi bạn sẽ xây dựng đánh dấu cơ bản cho trình chiếu của mình. Sử dụng các mẫu thay thế có sẵn, đặt từng trường có sẵn bên trong một limục như thế này:

   
   <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. Sau đó, bạn có thể chạy thanh trượt jQuery ưa thích của bạn. Nếu bạn đã cài đặt Trình cắm chu trình jQuery , bạn có thể chạy nó trên thanh trượt một cách dễ dàng. Chỉ cần đảm bảo plugin được tải trên trang bằng thanh trượt của bạn, rồi chạy nó trên ứng dụng mới tạo của bạn ul:

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

Và bạn nên tốt để đi.

Có một https://www.drupal.org/project/field_slemony moduel được tạo để tạo trình chiếu từ một nút duy nhất.

Cá nhân, tôi nghĩ rằng đây sẽ là một cách sử dụng tuyệt vời của mẫu kiểu nút, sau đó mỗi nút thuộc loại đó sẽ được định dạng dưới dạng trình chiếu với mức độ kiểm soát cao, chẳng hạn như nơi trình bày phần còn lại của các trường cho điều đó nút...