Slayt gösterisini tek düğümden görüntüler

Tek düğümde görüntülerden çalışma slayt gösterisi elde etmeye çalışıyorum. Görüntüler, görüntü alanından yüklenir. Yeni içerik türü yaptım ve şimdi yaptığım tek şey birden fazla düğümden (her düğümde bir görüntü ile) slayt gösterisi yapmak. Bu iyi çalışıyor ama her görüntü için yeni bir düğüm eklemek için çok sorunlu.

Görünüm görüntü alanı ayarlarında, Çoklu Alan Ayarları altında , varsayılan olarak işaretlenen "Aynı Satırdaki Tüm Değerleri Görüntüle" onay kutusu vardır . Bu kutunun işaretini kaldırırsanız, her görüntüyü yeni bir satıra yerleştirir ve istediğiniz gibi çalışır. En azından sürüm 2'den bu yana görünümlerin bu özelliği olduğunu biliyorum, ancak eski sürümlerde biraz farklı bir şey olarak adlandırılabilir.

Basit slayt gösterileri için bu şekilde yapmayı seviyorum, bir düğüm / düzenleme sayfasında tüm görüntüleri yeniden düzenleyebilirim. Ancak, her görüntünün bir yere bağlandığı veya alternatif metnin bulunduğu yerler gibi daha karmaşık slayt gösterileri için, en iyi bahsiniz muhtemelen satır başına bir düğüm kullanmaktır.

Saha Slayt modülü ardından tam ihtiyacımız olan şey. Tüm görüntüler düğümde (düğüm bloğu) bulunur ve dinamik bir galeri ve slayt gösterisi oluşturmak için jquery döngüsü (slayt gösterisi görünümleriyle aynıdır) kullanır.

Son zamanlarda basit galerilere sahip bir site oluşturdum ve ek slayt gösterisi modülleri kullanmadım. Tek ihtiyacım olan jQuery Cycle ve özel temama eklenen küçük bir javascript. Bu sitede bir 'fotoğraf' içerik türü ve farklı albümlere fotoğraf atamak için bir 'albüm' sözlüğü var. Görünüm, albüme göre filtrelenen fotoğrafların bir listesini oluşturur. Temamda şöyle bir js dosyası var:

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

Bir CSS dokunuşu bitirir:

.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, görüntü başına tek bir düğüme sahip olmak her zaman daha iyi değildir. Bu yaklaşımın daha fazla esneklik sağladığı doğrudur (örneğin, birden fazla slayt gösterisine bir görüntü eklemek), ancak bazı son kullanıcılar için gereksiz esneklik sadece anlamsız bir karmaşıklıktır.

Galleria modülünü kullanmayı düşünebilirsiniz . Tek bir düğüm kullanır ve ondan gelen görüntüleri slayt gösterisi olarak görüntüler.

Tek bir düğümde görüntü başına birden çok görüntü ve birden çok bağlantıya sahip olmanın iyi bir yolunu keşfettim:

Yapmak isteyeceğiniz şey, içerik türünde hem resim hem de bağlantı alanlarının sınırsız olarak ayarlandığından emin olmaktır. Görünümünüzü oluştururken "Tüm değerleri aynı satırda görüntüle" seçeneğinin işaretli olmadığından da emin olun. Resminiz ve bağlantınız için bir delta alanı ekleyin. Genel: PHP filtresi ekleyin ve filtre kodunu şu şekilde ayarlayın: return (! $ Row-> delta == $ row-> delta_1);

Bunu yapmalı. PHP'yi filtre olarak kullanmak için Views PHP modülünün kurulu olması gerekir.

Kaydırıcıda tek düğümün birden çok görüntüsünü göstermek için Dinamik ekran blok modülünü kullanın ve yapılandırma ayarını okuyun. Kaydırıcı bloğu göstermek için görünüm oluşturduğunuzda, daha önce işaretlenmişse lütfen "Birden çok alan ayarını göster" ile resim eklerken onay kutusunu işaretlemeyin, lütfen işaretini kaldırın.

Colorbox modülünü öneririm

Ayrıca, aşağıdaki video eğitimine bakın: Drupal 7 için Colorbox, bölüm 1: Kurulum ve görüntü alanı entegrasyonu

Drupal'daki hemen hemen her şey gibi, bunun için bir sürü farklı çözüm var, ama henüz hiçbir yerde karşılaşmadığım basit bir çözümü paylaşmak istiyorum.

Temel olarak, bir slayt gösterisinde, hepsi tek bir düğüme bağlı bir grup farklı alanı görüntülemenin bir yolunu arıyordum. Bu alanlar hem resim hem de metin alanlarını içermekteydi. Dolayısıyla, bir slayt gösterisinde tek bir düğüme eklenmiş tüm alanları görüntülemek için:

1. Slayt gösteriniz için bir görünüm oluşturun. "Biçimlendirilmemiş Liste" biçimini kullanın.
2. Görünümü yalnızca tek bir düğmeyle ilgilenecek şekilde yalnızca bir öğe görüntüleyecek şekilde ayarlayın (veya Bağlamsal Filtre: NID'yi kullanın)
3. Slayt gösterisinde görünmesini istediğiniz tüm alanları ekleyin. Tüm alanları ekrandan hariç tutun.
4. Özel bir alan ekleyin (bu alanın görüntülenmediği tüm alanlardan sonra oluşturulduğundan emin olun ). Bu, slayt gösteriniz için temel işaretlemeyi oluşturacağınız yerdir. Mevcut değiştirme modellerini kullanarak, mevcut her alanı aşağıdaki ligibi bir öğeye ayarlayın :

   
   <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. Sonra tercih ettiğiniz jQuery kaydırıcısını çalıştırabilirsiniz. JQuery Döngüsü Eklentisine zaten yüklediyseniz , kaydırıcıda gerçekten kolayca çalıştırabilirsiniz. Eklentinin sayfaya kaydırıcıyla yüklendiğinden emin olun ve ardından yeni oluşturduğunuzda çalıştırın ul:

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

Ve gitmek için iyi olmalısın.

Tek bir düğümden slayt gösterisi oluşturmak için yapılan bir moduel https://www.drupal.org/project/field_slideshow var.

Şahsen, bunun bir düğüm tipi şablonun büyük bir kullanımı olacağını düşünüyorum, o zaman bu türün her düğümü, bunun için alanların geri kalanını nereye sunacağı gibi yüksek derecede kontrol içeren bir slayt gösterisi olarak biçimlendirilir düğüm ...