Показує слайд-шоу з одного вузла

Я намагаюся досягти робочого слайд-шоу із зображень в одному вузлі. Зображення завантажуються з поля зображення. Це drupal 7. Я створив новий тип вмісту, і все, що я зараз створив, - слайд-шоу з декількох вузлів (з одним зображенням у кожному вузлі). Це добре працює, але це занадто проблематично, щоб додати новий вузол для кожного окремого зображення.

У налаштуваннях поля перегляду зображень у розділі Параметри кількох полів встановлено прапорець "Відображення всіх значень у тому ж рядку", який встановлено за замовчуванням. Якщо ви знімете цей прапорець, воно помістить кожне зображення в новий рядок, і воно буде працювати, як вам потрібно. Я знаю, що перегляди мали цю особливість принаймні у версії 2, але це можна назвати дещо іншим у старих версіях.

Мені подобається робити це таким чином для простих слайд-шоу, я можу переставити всі зображення на одному вузлі / сторінці редагування. Але для складніших слайд-шоу, наприклад, де кожне зображення десь посилається або має альтернативний текст, найкраще, все-таки, використовувати один вузол на рядок.

Модуль Field Slideshow - саме те, що вам потрібно. Усі зображення містяться в вузлі (відсутність роздуття вузла), і він використовує цикл jquery (те саме, що робить слайд-шоу перегляду) для створення динамічної галереї та слайд-шоу.

Нещодавно я створив сайт з простими галереями, і я взагалі не використовував додаткові модулі слайд-шоу. Все, що мені було потрібно - це цикл jQuery та трохи javascript, доданий до моєї спеціальної теми. Цей веб-сайт має тип вмісту "фото" та словник "альбом" для призначення фотографій різним альбомам. Перегляд створює список фотографій, відфільтрованих за альбомом. У моїй темі у мене є 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. ІМХО, не завжди краще мати один вузол на зображення. Це правда, що такий підхід забезпечує більшу гнучкість (наприклад, додавання одного зображення до декількох слайд-шоу), але для деяких кінцевих користувачів непотрібна гнучкість є просто безглуздою складністю.

Ви можете розглянути можливість використання модуля 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 Plugin , ви можете запустити це на повзунку дуже легко. Просто переконайтеся, що плагін завантажений на сторінку за допомогою повзунка, а потім запустіть його на новоствореному ul:

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

І вам слід добре піти.

Існує https://www.drupal.org/project/field_slideshow, який створений для створення слайд-шоу з одного вузла.

Особисто я думаю, що це було б чудово використання шаблону типу вузла, тоді кожен вузол цього типу буде форматований як слайд-шоу з високим ступенем контролю, наприклад, де представити решту полів для цього вузол ...