web-gelistirme-sc.com

Görünümler, Görüntülemeler-Slayt Gösterisi ve Sayfalama Drupal 7

Durum aşağıdaki gibidir: Slayt içerik türüm var ve bir slayt gösterisinde en yeni üç slaytı görüntülemek istiyorum. Slaytların dönmesi gerekir ve slaytların da bir çağrı cihazı tarafından kontrol edilebilir olması gerekir. Slayt gösterisinde belirli bir slayta atlayabilmek için çağrı cihazında üç madde işareti/bağlantı/resim bulunmalıdır. Çağrı cihazında, slayt gösterisindeki slaydı artırmak ve azaltmak için sol ve sağ oklar bulunmalıdır.

Bu teknik web'de her yerde kullanılır, ancak Views ve Views Slayt Gösterisini kullanarak bunu nasıl doğru şekilde ayarlayacağımı anlayamıyorum. Orada Drupalites deneyimli tüm işaretçiler dışarı bekliyoruz.

Şerefe, Les.

8
Lester Peabody

(1) Gerekli Modüller (Sürüm: Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2) Modülleri Takın

Drupal7'de yönetici bölümünden modüller yükleyebilirsiniz, ancak yine de bu yeni özelliğin bir anlamı olmadığını hissediyorum, çünkü Druapl sitesindeki modül bağlantısını aramamız ve ardından yapıştırmayı yönetici modülü kurulum alanına kopyalamamız gerekiyor. çılgın. Onlar wordpress küçük bir arama şöleni gibi bir şey yapmış olsaydı çok iyi olurdu. Her neyse, sadece eski şekilde indireceğim ve istall edeceğim (yine de bu eski yolu tavsiye ederim).

Tüm modülleri Drupal sitesinden indirin ve sitenizin/sitelerinizin/all/modüllerinizin dizinine kurun. http://www.yoursitename.com/node#overlay=admin adresine gidin./modules ve bu modülleri aşağıdaki gibi etkinleştirin;

(1) Görünümler (2) Görünümler Kullanıcı Arabirimi (3) Görünümler Slayt Gösterisi (4) Görünümler Slayt Gösterisi: Döngü (5) Kaos araçları (6) Bağlantı (7) Kütüphaneler (8) Belirteç (İsteğe bağlı) (3) Görüntü Önbelleği Oluştur

Drupal7'de imagecache çekirdek modülün bir parçasıdır ve Görüntü stilleri olarak adlandırılır. Şimdi buradan biri tam boyutlu kaydırıcı görüntüsü diğeri de küçük resim görüntüsü için iki görüntü önbelleği oluşturalım. Bu öğreticide tam boyutlu kaydırıcı görüntü için 935x293 (piksel) boyut ve küçük resim için 210x100 (piksel) boyut kullanıyorum. Not: csn ertelenecek bu yapılandırmalar ihtiyaçlarınıza bağlıdır.

  • Tam boyutlu Slider görüntü ayarları

http://www.yoursitename.com/node#overlay=admin/config/media/image-styles adresine gidin ve yeni stil ekle bağlantısını tıklayın (1) Görüntü stili adı verin ve tıklayın yeni stil oluştur düğmesi (2) Bir sonraki yapılandırma ekranında istediğiniz yeni stili seçin ve ardından ekle düğmesine tıklayın (Bu öğreticide yeniden boyutlandırma stili seçiyorum) (3) Bir sonraki ekranda genişliği ve yüksekliği ayarlayın ve ekleme efektine tıklayın buton. (Ayarlar seçtiğiniz stile bağlı olarak değişebilir). Genişliği 935 ve yüksekliği 293 piksel olarak ayarladım.

Aynı işlemi küçük resim için de yapın. (küçük resim boyutu için genişliği 210, yüksekliği 100 piksel olarak ayarlıyorum.) (4) Yeni İçerik Türü Oluştur

Yeni bir içerik türü oluşturalım, Gösterge tablosu menü çubuğundan Yapı'yı ve ardından içerik türlerini tıklayın, ardından yeni içerik türü ekle bağlantısını tıklayın.

(1) İnsan tarafından okunabilir bir ad verin, Özellikli Kaydırıcı olarak adlandırdım (machiine adı, insan tarafından okunabilir ada göre otomatik olarak oluşturulacaktır) (2) Kısa ve ilgili bir açıklama verin (3) Gönderme formu ayarları, varsayılan ayarlar (4) Yayınlama seçenekleri, yalnızca yayınladım (diğer tüm ayarlar işaretlenmemiş) (5) Görüntü ayarları, Yazarın ve tarih bilgilerinin işaretini kaldırdım. (6) Yorum ayarları, Gizli (devre dışı) ayarladım (7) Menü ayarları, Varsayılan ayarlar olarak bırakıyorum. (8) Kaydet ve alan ekle düğmesini tıklayın (5) Yeni Alanlar Oluşturun

Burada bu örnekte sadece iki dosya oluşturuyorum ve bunlar görüntü alanı ve bağlantı alanı. Kaydırıcı görüntümüzü yüklemek için görüntü alanını ve kaydırıcımızın bağlanmasını istediğimiz özel bir bağlantı oluşturmak için bağlantı alanını kullanacağız.

Görüntü Alanı Ayarları

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.

Bu alanı gerektiği gibi ayarladım, bu görüntülerin diğer görüntülerden düzenli olarak düzenlenebilmesi için kaydırıcı resmi adı verilen bir dosya yöneticisi adı ekledim. Maksimum yükleme boyutunu ve çözünürlüğünü burada ayarlayabilirsiniz, alt ve başlık alanını etkinleştirdim ve son olarak Ayarları kaydet düğmesini tıklayın.

Aynı yöntemi kullanarak bağlantı alanını da oluşturun.

Bağlantı Alanı Ayarları (1) Etiket: Kaydırıcı Bağlantı (2) Alan: slider_link (3) Alan türü: bağlantı (4) Widget (form öğesi): bağlantı (5) Kaydet düğmesini tıklatın, Bağlantı alanı yapılandırmaları her şeyi varsayılan ayarlara bırakır . Alanı aşağıda gösterildiği gibi yeniden düzenledim; Başlık alanı Görüntü alanı Bağlantı alanı Gövde alanı (gerekli değilse bu alanı da kaldırabilirsiniz) Ekranı Yönet Ekranı yönet sekmesinde, alanın çıkışının nasıl görüntüleneceğini belirleyebilirsiniz. Bağlantı alanını gizli olarak ayarladım ve resim etiketini de gizli olarak ayarladım Drupal7: alanları yönet (6) Özellik Kaydırıcı İçeriği Oluştur

Bu eğitim için dört özellikli kaydırıcı içeriği oluşturdum.

(1) İçerik ekle bağlantısını tıklayın (2) Öne Çıkan Slider içeriği oluşturun (3) Uygun bir başlık adı verin (4) Slider resmi yükleyin (5) Alternatif ve başlık alanı adları verin (6) İstediğiniz yere bir bağlantı başlığı ve URL verin bağlanacak kaydırıcı (7) Eğer SEO dostu URL takma ad verebilir isterseniz yol alanı dışında tüm diğer ayarları varsayılan olarak bırakın. (8) İçeriği kaydedin.

Aynı şekilde daha fazla Öne Çıkan Slider içeriği oluştur (Dört içerik oluşturdum) (7) Yeni Görünüm Oluştur

Şimdi yeni Slayt Gösterisi görünümümüzü oluşturma zamanı. Gösterge Tablosu menüsünden Yapı'yı ve ardından Görünümler'i tıklayın.

(1) Yeni görünüm ekle bağlantısını tıklayın (2) Görünüm adı verin, Özellikli Kaydırıcı olarak adlandırdım (machiine adı otomatik olarak oluşturulacak) (3) Uygun bir görünüm açıklaması verin (4) Özellikli Kaydırıcı türünü (İçeriğiniz Göster tür adı). (5) Bir Sayfa Oluştur seçeneğinin işaretini kaldırın ve Blok oluştur'u işaretleyin (6) Blok başlığını yazın ve sayfa 5'teki "alanlar" öğelerinin "Slayt gösterisi" olarak görüntüleme biçimini seçin (görüntülemek istediğiniz öğe sayısını girebilirsiniz) (7 ) "Devam et ve düzenle" düğmesini tıklayın Alan Ayarları Önce Bağlantı alanını ekleyelim (her şeyin düzgün çalışması için bağlantı ilk alan olmalıdır), bu nedenle ekle simgesine tıklayın ve Gruplar'dan İçerik'i seçin İçerik Ekle: Bağlantı, Tıklayın Bir sonraki yapılandırma penceresindeki "Ekle ve yapılandır düğmesi" "Etiket oluştur" un işaretini kaldırın. "Kontrol et" Ekrandan çıkar. "Uygula düğmesini" tıklayın

Şimdi resim alanı ekleyelim, bu yüzden ekle simgesini tıklayın ve Gruplar'dan içerik ekle filtresini seçin İçerik Ekle: resim alanı (Not: yalnızca bu kaydırıcı içerik türü için oluşturduğumuz görüntü alanını seçtiğinizden emin olun.) "Ekle ve yapılandır düğmesine dokunun. "Bir etiket oluştur" seçeneğinin işaretini kaldırın.

Biçimlendirici: Görüntü (Colorbox veya lightbox yüklediyseniz, bunları buradan seçebilirsiniz!) Görüntü Stili: Tam ekran (Yukarıdaki adımda oluşturduğunuz görüntü önbelleğini seçin) Görüntüyü bağla: Hiçbir şey Stil Ayarları: Varsayılan ayarları bırak Sonuç davranışı yok: Bırak varsayılan ayarlar Sonuçları Yeniden Yaz: Bu alanı bir bağlantı olarak gönder seçeneğini işaretleyin Bağlantı yolu: [view_node] (Not: Kaydırma çubuğunu biraz kaydırın ve Core Token modülü tarafından oluşturulan değiştirme modellerini görebilirsiniz (bağlantı alanını ilk olarak ayarlamadıysanız) bağlantı alanı seçeneğini burada göremezsiniz) yalnızca kopyala [view_node] sonra yukarı kaydırıp bağlantı yolu alanına yapıştırın.) "Uygula düğmesini" tıklayın

Son olarak, küçük resim için bir alana daha ihtiyacımız var, bu yüzden ekle simgesine tıklayalım ve filtrelerden Gruplar İçerik Ekle İçerik: görüntü alanını seçelim (Not: yalnızca bu kaydırıcı içerik türü için oluşturduğumuz görüntü alanını seçtiğinizden emin olun.) Bir sonraki yapılandırma penceresinde "Ekle ve yapılandır düğmesi" ni tıklayın "Etiket oluştur" un işaretini kaldırın ve EKRANDAN KAPSAYINIZI KONTROL EDİN Biçimlendirici: Görüntü (Colorbox veya ışık kutusu yüklediyseniz, bunları burada seçebilirsiniz!) Yukarıdaki adımda oluşturdunuz) Görüntüyü bağla: Hiçbir şey Stil Ayarları: Varsayılan ayarları bırak Sonuç davranışı yok: Varsayılan ayarları bırak Sonuçları yeniden yaz: Bu alanı bir bağlantı olarak çıkar Bağlantı yolu: [view_node] (Not: Kaydırma çubuğunu biraz kaydırın ve Core Token modülü tarafından oluşturulan değiştirme modellerini görebilirsiniz (eğer bağlantı alanını ilk olarak ayarlamadıysak, burada bağlantı alanı seçeneğini göremiyoruz) sadece kopyala [view_node] sonra yukarı kaydırın ve bağlantı yolu alanına yapıştırın. ) "Uygula düğmesini" tıklayın

Görünüm Filtreler Ayarları

Görünümlerde3, içerik türünü ve diğer ayarları seçerken filtreler başlangıçta oluşturulur! Ek dosyalamaya ihtiyacınız varsa buradan oluşturabilirsiniz!

Görünüm Stili Ayarları

Slayt Gösterisini Biçimlendir | yerleşimler ve aşağıdaki gibi ayarlanan bir sonraki yapılandırma penceresinde; (1) Liste türü: Sırasız liste (2) Sarıcı sınıfı: Varsayılan ayarları bırak (3) Stil> Cilt: deafult (4) Slaytlar> Slayt gösterisi türü: döngü (5) Çevrim seçenekleri jQuery döngüsü eklentisini indirmeniz ve jquery'yi kopyalamanız gerekir. cycle.all.min.js sitesine/all/library/jquery.cycle eklentisini http://malsup.com/jquery/cycle adresinde bulabilirsiniz.

İNGİLİZCE İNGİLİZCE Sitede/tüm dizininde "kütüphaneler" adlı bir klasör oluşturun ve bu dizinde "jquery.cycle" adlı başka bir klasör oluşturun ve son olarak yalnızca "jquery.cycle.all.min.js" dosyasını kopyalayıp yapıştırın. bu dizin.

(6) Transittion: Fade (7) Eylem: fareyle duraklatma (8) Internet Explorer Tweaks: varsayılan (9) Widget'lar: Üst ve Alt seçeneklerinden birini veya her ikisini de seçebilirsiniz (Burada alt kısmı seçiyorum ve aşağıdaki gibi ilerleme ayarları;) (10) Alt Widget'lar> Çağrı Cihazı> Çağrı cihazı tipi: Alanlar (11) Çağrı cihazı alanı: İçerik: Görüntü (Not: başparmak için eklediğimiz sonuncusu, her iki alanın da aynı şekilde adlandırılacağı için hata yapma.) (12) Slaytı Etkinleştir ve Çağrı Cihazı Üzerinde Duraklatma: işaretli, kontroller ve kaydırıcı sayacı işaretli değil. (13) Uygula düğmesine tıklayın.

Alan Ayarlarını Göster'i Biçimlendir

Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) Özel Bölge Oluşturma (isteğe bağlı adım)

(1) Tema klasörünüzde temanızın_adı.info dosyasını açın ve aşağıda gösterilen gibi yeni bir bölge ekleyin; areas [featured_slider] = Sunulan Slider ve .info dosyasını kaydedin. (2) Temalar page.tpl.php dosyanızı açın ve bu kodu slaydınızın aşağıda gösterildiği gibi gösterilmesini istediğiniz yere ekleyin;

Varsayılan page.tpl.php şablonunda herhangi bir değişiklik yapmanıza gerek kalmaması için page - front.tpl.php gibi özel bir ön sayfa şablonu bile oluşturabilirsiniz. [9] Bloğu etkinleştirin ve yapılandırın

Şimdi bu blok, bloklar devre dışı bırakılmış alanında görünür olacaktır, bu yüzden Gösterge Tablosu menüsünden Yapı> Engelle'ye gidin ve bloğu bir temalar varsayılan bölgesine veya oluşturduğumuz özel bölgeye (featured_slider) etkinleştirin. (Bölgeler, kullandığınız temaya göre değişir.)

Blok Yapılandırma Ayarları Bloğu etkinleştirdikten sonra bloğu yapılandırmak için bir bağlantı alırsınız, bu nedenle Yapılandır bağlantısını ve aşağıdaki gibi ayarlanan ayarları tıklayın;

(1) Blok başlığı (blobk başlığının görüntülenmesini istemiyorsanız sadece yazın) (2) Yine tüm temaya özel Bölge ayarlarını alırsınız. Görünürlük ayarlarında (3) Sayfalar> Bloğu belirli bir sayfada göster: Yalnızca listelenen sayfalar'ı seçin ve bu bloğun yalnızca ön sayfada görüntülenmesini sağlayın. CSS THUMBNAILS INLINE'I GÖRÜNTÜLEME İPUÇLARI

Küçük resimleri satır içinde görüntülemek için bu CSS kodlarını tema stil sayfanıza ekleyin. .views-slayt gösterisi-kontroller-alt .views-slayt gösterisi-çağrı cihazı-alan-madde {float: left; kenar boşluğu: 20px 6px; } Gerekli ayarlamaları yapın.

14
user842

Bu Hardal Tohumu Medya podcast'ine bir göz atın: Slayt Gösterisi Temasını Görüntüle .

Pod yayını sırasında Bob, Views Slayt Gösterisi ile ilgili bazı temel bilgilerin yanı sıra çıktının nasıl temalandırılacağını açıklar. Drupal 6, ama temel alır ve temel derslerin ve derslerin aynı olacağına inanıyorum. Sadece küçük bir CSS ile bir slayt gösterisi ton = daha iyi. Güzel görünümlü slayt gösterileri istiyorsanız bu podcast izlerken tavsiye ederim.

2
Laxman13

Görünümler slayt gösterisi hakkında daha fazla bilgi edinmek istiyorsanız (örneğin küçük resimlerle) bu iyi eğiticiyi görmelisiniz: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on- drupal7

1
gbwebservice