Wyświetla pokaz slajdów z jednego węzła

Próbuję osiągnąć działający pokaz slajdów z obrazów w jednym węźle. Obrazy są przesyłane z pola obrazu. Drupal 7. Stworzyłem nowy typ zawartości i wszystko, co teraz stworzyłem, to pokaz slajdów z wielu węzłów (z jednym obrazem w każdym węźle). Działa to dobrze, ale jest to zbyt problematyczne, aby dodać nowy węzeł dla każdego obrazu.

W ustawieniach pola obrazu widoków, w Ustawieniach wielu pól , znajduje się pole wyboru „Wyświetl wszystkie wartości w tym samym wierszu”, które jest domyślnie zaznaczone. Jeśli odznaczysz to pole, umieści każdy obraz w nowym wierszu i będzie działał zgodnie z Twoimi wymaganiami. Wiem, że widoki mają tę funkcję od co najmniej wersji 2, ale w starszych wersjach można ją nazwać nieco inną.

Lubię robić to w ten sposób dla prostych pokazów slajdów, mogę przestawić wszystkie obrazy na jednym węźle / stronie edycji. Ale w przypadku bardziej skomplikowanych pokazów slajdów, takich jak gdzieś każde zdjęcie łączy się lub ma alternatywny tekst, prawdopodobnie najlepszym rozwiązaniem jest użycie jednego węzła na wiersz.

Moduł Field Slideshow jest dokładnie tym, czego potrzebujesz. Wszystkie obrazy są zawarte w węźle (bez wzdęć węzła) i wykorzystuje cykl jquery (tak samo jak robi pokaz slajdów), aby stworzyć dynamiczną galerię i pokaz slajdów.

Niedawno zbudowałem witrynę z prostymi galeriami i ostatecznie nie korzystałem z żadnych dodatkowych modułów pokazu slajdów. Wszystko czego potrzebowałem to jQuery Cycle i trochę javascript, dodane do mojego niestandardowego motywu. Ta strona ma typ zawartości „zdjęcie” i słownictwo „album”, aby przypisać zdjęcia do różnych albumów. Widok tworzy listę zdjęć odfiltrowanych według albumu. W moim motywie mam plik js, który wygląda następująco:

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

Dotyk CSS kończy to:

.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, nie zawsze lepiej jest mieć jeden węzeł na obraz. To prawda, że ​​takie podejście zapewnia większą elastyczność (na przykład dodawanie jednego obrazu do wielu pokazów slajdów), ale dla niektórych użytkowników końcowych niepotrzebna elastyczność jest po prostu bezcelową złożonością.

Możesz rozważyć użycie modułu Galleria . Wykorzystuje pojedynczy węzeł i wyświetla obrazy z niego jako pokaz slajdów.

Odkryłem dobry sposób na posiadanie wielu obrazów i wielu linków na obraz w jednym węźle:

Musisz upewnić się, że zarówno pole obrazu, jak i pola linku są ustawione na nieograniczony typ zawartości. Podczas tworzenia widoku upewnij się również, że pole „Wyświetl wszystkie wartości w tym samym wierszu” NIE jest zaznaczone. Dodaj pole delta dla swojego obrazu i linku. Dodaj filtr Global: PHP i ustaw kod filtru na następujący: return (! $ Row-> delta == $ row-> delta_1);

Że należy to zrobić. Musisz mieć zainstalowany moduł Views PHP, aby używać PHP jako filtra.

Aby wyświetlić w suwaku wiele obrazów pojedynczego węzła, użyj modułu Dynamiczny blok wyświetlania i przeczytaj ustawienia konfiguracji. W tym miejscu podczas tworzenia widoku pokazującego blok suwaka nie zaznaczaj pola wyboru przy dodawaniu obrazu z opcją „Pokaż ustawienia wielu pól”, jeśli jest już zaznaczone, usuń zaznaczenie.

Polecam moduł Colorbox

Zobacz także samouczek wideo: Colorbox dla Drupal 7, część 1: Instalacja i integracja pola obrazu

Jak prawie wszystko w Drupal, istnieje wiele różnych rozwiązań tego problemu, ale chcę podzielić się prostym, z którym jeszcze się nie spotkałem.

Zasadniczo szukałem sposobu wyświetlenia szeregu różnych pól - wszystkie dołączone do jednego węzła - w pokazie slajdów. Te pola obejmowały zarówno pola graficzne, jak i tekstowe. Aby wyświetlić wszystkie pola dołączone do pojedynczego węzła w pokazie slajdów:

1. Utwórz widok pokazu slajdów. Użyj formatu „Niesformatowana lista”.
2. Ustaw widok tak, aby wyświetlał tylko jeden element, dzięki czemu masz do czynienia tylko z jednym węzłem (lub użyj filtra kontekstowego: NID)
3. Dodaj wszystkie pola, które mają się pojawiać w pokazie slajdów. Wyklucz wszystkie pola z wyświetlania.
4. Dodaj niestandardowe pole (upewnij się, że to pole jest renderowane po wszystkich polach, które zostały wykluczone z wyświetlania). Tutaj zbudujesz podstawowy znacznik pokazu slajdów. Korzystając z dostępnych wzorów zastępczych, ustaw każde dostępne pole w lielemencie w następujący sposób:

   
   <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. Następnie możesz uruchomić preferowany suwak jQuery. Jeśli masz już zainstalowaną wtyczkę jQuery Cycle , możesz bardzo łatwo uruchomić ją na suwaku. Upewnij się, że wtyczka została załadowana na stronie za pomocą suwaka, a następnie uruchom ją na nowo utworzonym ul:

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

I powinieneś być dobry.

Istnieje model https://www.drupal.org/project/field_slideshow, który służy do tworzenia pokazu slajdów z jednego węzła.

Osobiście uważam, że byłoby to świetne wykorzystanie szablonu typu węzła, a następnie każdy węzeł tego typu byłby sformatowany jako pokaz slajdów z wysokim stopniem kontroli, na przykład gdzie można przedstawić resztę pól dla tego węzeł...