(1) Wymagane moduły (wersja: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Zainstaluj moduły
W Drupal7 możesz instalować moduły z sekcji administratora, ale nadal uważam, że ta nowa funkcja nie ma żadnego znaczenia, ponieważ musimy wyszukać łącze do modułu w witrynie Druapl, a następnie skopiować wklej do obszaru instalacji modułu administratora, naprawdę zwariowany. Byłoby tak dobrze, gdyby zrobili z niego coś w rodzaju wordpress jako małą ucztę poszukiwawczą. W każdym razie po prostu pobiorę i zainstaluję go na stary sposób (nadal polecam ten stary sposób).
Pobierz wszystkie moduły ze strony Drupal i zainstaluj w katalogu twoja_nazwa / witryny / wszystkie / moduły. Wejdź na http://www.yoursitename.com/node#overlay=admin/modules i włącz te moduły jak poniżej;
(1) Widoki (2) Widoki Interfejs użytkownika (3) Widoki Pokaz slajdów (4) Widoki Pokaz slajdów: Cykl (5) Narzędzia chaosu (6) Link (7) Biblioteki (8) Token (Opcjonalnie) (3) Utwórz pamięć podręczną obrazu
W Drupal7 imagecache jest częścią podstawowego modułu i nazywa się go Stylami obrazów. Stwórzmy stąd dwa bufory obrazów, jeden dla suwaka w pełnym rozmiarze, a drugi dla miniatury. W tym samouczku używam wymiaru 935 x 293 (piksele) dla obrazu suwaka w pełnym rozmiarze i wymiaru 210 x 100 (piksele) dla obrazu miniatury. Uwaga: Te konfiguracje, które można odłożyć, zależą od potrzeb.
- Ustawienia obrazu suwaka w pełnym rozmiarze
Przejdź do http://www.yoursitename.com/node#overlay=admin/config/media/image-styles i kliknij link dodaj nowy styl (1) Podaj nazwę stylu obrazu i kliknij przycisk Utwórz nowy styl (2) ) Na następnym ekranie konfiguracji wybierz nowy styl, który chcesz, a następnie kliknij przycisk Dodaj (W tym samouczku wybieram styl zmiany rozmiaru) (3) Na następnym ekranie ustaw szerokość i wysokość i kliknij przycisk Dodaj efekt. (Ustawienia mogą się różnić w zależności od wybranego stylu). Ustawiłem szerokość na 935, a wysokość na 293 piksele.
Wykonaj tę samą procedurę dla obrazu miniatury. (dla wymiaru miniatury ustawiam szerokość na 210 i wysokość na 100 pikseli.) (4) Utwórz nowy typ zawartości
Utwórzmy nowy typ zawartości. Na pasku menu pulpitu nawigacyjnego kliknij Strukturę, a następnie typy zawartości, a następnie kliknij link dodaj nowy typ zawartości.
(1) Podaj nazwę czytelną dla człowieka, nazwałem ją Wyróżnionym suwakiem (nazwa machiine zostanie wygenerowana automatycznie na podstawie nazwy czytelnej dla człowieka) (2) Podaj krótki i odpowiedni opis (3) Ustawienia formularza zgłoszenia, pozostawiam jako ustawienia domyślne (4) Opcje publikowania, sprawdziłem tylko opublikowane (wszystkie pozostałe ustawienia niezaznaczone) (5) Ustawienia wyświetlania, odznaczyłem informacje o autorze i dacie. (6) Ustawienia komentarzy, ustawiam ukryte (wyłączone) (7) Ustawienia menu, pozostawiam jako ustawienia domyślne. (8) Kliknij Zapisz i dodaj pola Przycisk (5) Utwórz nowe pola
Tutaj w tym przykładzie tworzę tylko dwa pola, a są to pole obrazu i pole linku. Użyjemy pola obrazu do przesłania naszego obrazu suwaka i pola łącza do utworzenia niestandardowego łącza, w którym chcemy, aby nasz suwak został połączony.
Ustawienia pola obrazu
(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.
Ustawiłem to pole zgodnie z wymaganiami, dodałem nazwę dyrektora plików o nazwie suwak-obraz, aby obrazy te były rozmieszczone sferycznie względem innych obrazów. Tutaj możesz ustawić maksymalny rozmiar i rozdzielczość wysyłania, mam aktywne pole alt i tytuł, a na koniec kliknij przycisk Zapisz ustawienia.
Korzystając z tej samej metody, utwórz również pole linku.
Link Field Settings (1) Label: Slider Link (2) Field: slider_link (3) Typ pola: link (4) Widget (element formularza): link (5) Kliknij przycisk Zapisz, aby konfiguracje pól linków pozostawiły wszystko do ustawień domyślnych . Ponownie ułożyłem pole, jak pokazano poniżej; Pole tytułu Pole obrazu Pole łącza Pole ciała (możesz nawet usunąć to pole, jeśli nie jest to konieczne) Zarządzaj wyświetlaniem Na karcie zarządzania wyświetlaniem możesz skonfigurować sposób wyświetlania pola wyjściowego pola. Ustawiłem pole linku jako ukryte, a także ustawiłem etykietę obrazu jako ukrytą Drupal7: zarządzaj polami (6) Utwórz suwak funkcji
W tym samouczku utworzyłem cztery polecane suwaki.
(1) Kliknij link Dodaj treść (2) Utwórz polecaną zawartość suwaka (3) Podaj prawidłową nazwę tytułu (4) Prześlij obraz suwaka (5) Podaj nazwy pól alt i tytuł (6) Podaj tytuł linku i adres URL tam, gdzie chcesz suwak do połączenia (7) Pozostaw wszystkie inne ustawienia jako domyślne, z wyjątkiem pola ścieżki, jeśli chcesz, możesz podać alias adresu URL przyjazny SEO. (8) Zapisz treść.
W ten sam sposób utwórz więcej Wyróżnione treści Slidera (Stworzyłem cztery treści) (7) Utwórz nowy widok
Teraz nadszedł czas, aby utworzyć nasz nowy widok pokazu slajdów. Z menu Kokpitu kliknij Strukturę, a następnie kliknij Widoki.
(1) Kliknij dodaj nowy link do widoku (2) Podaj nazwę widoku, nazwałem ją jako Polecany suwak (nazwa maszyny zostanie wygenerowana automatycznie) (3) Podaj odpowiedni opis widoku (4) Wybierz Pokaż treść typu Polecany suwak (twoja treść Wpisz imię). (5) Odznacz Utwórz Pge i zaznacz Utwórz blok (6) Wpisz Tytuł bloku i wybierz format wyświetlania jako „Pokaz slajdów” z „pól” elementów na stronie 5 (możesz wprowadzić liczbę elementów, które chcesz wyświetlić) (7) ) Kliknij przycisk „Kontynuuj i edytuj” Widoki Ustawienia pola Najpierw dodajmy pole linku (link musi być pierwszym polem, aby wszystko działało poprawnie), więc kliknij ikonę dodawania iz filtru Grupy wybierz Treść Dodaj treść: Link, kliknij „Przycisk Dodaj i skonfiguruj” w następnym oknie konfiguracji odznacz „Utwórz etykietę”. "Czek" Wyklucz z wyświetlania. Kliknij przycisk „Zastosuj”
Następnie dodajmy pole obrazu, więc kliknij ikonę dodawania i z filtra Grupy wybierz zawartość Dodaj zawartość: pole obrazu (Uwaga: upewnij się, że wybierasz pole obrazu, które stworzyliśmy tylko dla tego typu zawartości suwaka.) Kliknij „Dodaj i skonfiguruj przycisk ”w kolejnym oknie konfiguracji odznacz„ Utwórz etykietę ”.
Formatter: Obraz (jeśli zainstalowałeś Colorbox lub lightbox, możesz je tutaj wybrać!) Styl obrazu: Pełny rozmiar (Wybierz pamięć obrazów utworzoną w powyższym kroku) Połącz obraz z: Nic Ustawienia stylu: Pozostaw ustawienia domyślne Brak zachowania wyników: Pozostaw ustawienia domyślne Przepisz wyniki: Sprawdź Wyjdź z tego pola jako linku Ścieżka linku: [view_node] (Uwaga: Przewiń nieco w dół i zobaczysz wzorce zastępcze utworzone przez moduł Core Token, (jeśli nie ustawiliśmy pola linku jako pierwszego, nie widzę tutaj opcji pola linku) kopiuj tylko [węzeł_widoku], a następnie przewiń w górę i wklej ją w polu ścieżki linku.) Kliknij przycisk „Zastosuj”
Wreszcie potrzebujemy jeszcze jednego pola dla miniatury, dlatego kliknijmy ikonę dodawania i z filtra Grupy wybierz Treść Dodaj zawartość: pole obrazu (Uwaga: upewnij się, że wybierasz pole obrazu, które stworzyliśmy tylko dla tego typu zawartości suwaka). Kliknij przycisk „Dodaj i skonfiguruj” w kolejnym oknie konfiguracji, odznacz „Utwórz etykietę” i SPRAWDŹ WYŁĄCZ Z WYŚWIETLACZA, Formatyzator: Obraz (jeśli zainstalowałeś Colorbox lub lightbox, możesz je tutaj wybrać!) Styl obrazu: Miniatura (Wybierz obraz utworzyłeś w powyższym kroku) Połącz obraz z: Nic Ustawienia stylu: Pozostaw domyślne ustawienia Brak zachowania wyników: Pozostaw domyślne ustawienia Przepisz wyniki: Sprawdź Wypisuj to pole jako link Ścieżka łącza: [view_node] (Uwaga: przewiń nieco w dół i możesz zobaczyć wzorce zastępcze utworzone przez moduł Core Token (jeśli niet ustaw pole linku jako pierwsze, nie widzimy tutaj opcji pola linku) kopiuj tylko [węzeł_widoku], a następnie przewiń w górę i wklej go w polu ścieżki linku.) Kliknij przycisk „Zastosuj”
Wyświetl ustawienia filtrów
W views3 filtry są tworzone na początku, podczas gdy my wybieramy typ zawartości i inne ustawienia! Jeśli potrzebujesz dodatkowego filtrowania, możesz go utworzyć tutaj!
Ustawienia stylu widoku
Kliknij Formatuj pokaz slajdów | ustawia i na następnym oknie konfiguracyjnym ustawia się jak poniżej; (1) Typ listy: Lista nieuporządkowana (2) Klasa opakowania: Pozostaw ustawienia domyślne (3) Styl> Skórka: niesłysząca (4) Slajdy> Typ pokazu slajdów: cykl (5) Opcje cyklu Musisz pobrać wtyczkę cyklu jQuery i skopiować jquery. cycle.all.min.js to sites / all / libraries / jquery.cycle Wtyczkę można znaleźć na stronie http://malsup.com/jquery/cycle .
IN SIMPLE ENGLISH Utwórz folder o nazwie „biblioteki” w katalogu site / all, a następnie utwórz inny folder o nazwie „jquery.cycle” w tym katalogu, a na koniec skopiuj i wklej tylko „jquery.cycle.all.min.js” do ten katalog.
(6) Transmition: Fade (7) Akcja: pauza po najechaniu kursorem (8) Poprawki w Internet Explorerze: domyślne (9) Widżety: Możesz wybrać jedno lub oba Góra i Dół (tutaj wybieram dół i ustawienia zaawansowane jak poniżej;) (10) Widżety dolne> Pager> Typ pager: Pola (11) Pole pager: Treść: Obraz (Uwaga: ostatni dodaliśmy do kciuka, nie pomyl się, ponieważ oba pola będą miały takie same nazwy). (12) Aktywuj slajd i Pauza na Pager Hove: zaznaczone, kontrolki i licznik suwaka pozostawiają niezaznaczone. (13) Kliknij przycisk Zastosuj.
Format Pokaż ustawienia pola
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) Utwórz region niestandardowy (krok opcjonalny)
(1) W swoim folderze tematycznym otwórz plik nazwa_thema_nazwa.info i dodaj nowy region, jak pokazano poniżej; regiony [featured_slider] = Wyróżniony suwak i zapisz plik .info. (2) Otwórz plik page.tpl.php motywów i dodaj kod w miejscu, w którym chcesz wyświetlać slajd, jak pokazano poniżej;
Możesz nawet utworzyć niestandardowy szablon strony głównej, taki jak page - front.tpl.php, aby nie trzeba było wprowadzać żadnych zmian w domyślnym szablonie page.tpl.php. [9] Włącz i skonfiguruj blok
Teraz ten blok będzie widoczny w obszarze wyłączonych bloków, więc z menu Pulpitu nawigacyjnego wybierz Struktura> Blok i włącz blok do domyślnego regionu motywów lub niestandardowego regionu, który utworzyliśmy (featured_slider). (Regiony różnią się w zależności od używanego motywu).
Ustawienia konfiguracji bloku Po włączeniu bloku otrzymasz link do konfiguracji bloku, więc kliknij link Konfiguruj i ustaw sekcję ustawień, jak poniżej;
(1) Zablokuj tytuł (jeśli nie chcesz, aby wyświetlany był tytuł BLOBK, po prostu wpisz) (2) Ponownie otrzymasz wszystkie włączone ustawienia regionu specyficzne dla motywu. W ustawieniach widoczności (3) Strony> Pokaż blok na określonej stronie: wybierz Tylko wymienione strony i wpisz tekst, aby ten blok był wyświetlany tylko na stronie głównej. WSKAZÓWKI CSS, ABY WYŚWIETLAĆ LINIE TRZEWIKOWE
Dodaj te kody CSS do arkusza stylów motywów, aby wyświetlać miniatury w linii. .views-slideshow-control-bottom .views-slideshow-pager-field-item {float: left; margines: 20px 6px; } Wprowadź niezbędne zmiany.
Zobacz ten podcast Mustardseed Media: Widoki Pokaz slajdów Theming .
Podczas podcastu Bob zapoznaje się z niektórymi podstawami Pokazu slajdów, a także z tematami wynikowymi. Opiera się na Drupalu 6, ale wierzę, że większość podstaw i lekcji będzie taka sama. Tylko trochę CSS, pokaz slajdów może wyglądać tonę lepiej. Gorąco polecam obejrzenie tego podcastu, jeśli chcesz ładnie wyglądających pokazów slajdów.
źródło
Jeśli chcesz dowiedzieć się więcej na temat pokazu slajdów (na przykład z miniaturami), musisz zobaczyć ten dobry samouczek: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7
źródło