(1) Các mô-đun cần thiết (Phiên bản: Drupal7.0)
Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token
(2) Cài đặt các Mô-đun
Trong Drupal7 bạn có thể cài đặt các mô-đun từ phần quản trị, nhưng tôi vẫn cảm thấy tính năng mới này không có ý nghĩa gì, vì chúng tôi phải tìm kiếm liên kết mô-đun trong trang web Druapl và sau đó sao chép dán vào khu vực cài đặt mô-đun quản trị viên, thực sự khùng. Sẽ thật tuyệt nếu họ biến nó thành một thứ giống như một bữa tiệc tìm kiếm nhỏ. Dù sao, tôi sẽ tải xuống và kết hợp nó theo cách cũ (tôi vẫn khuyên dùng cách cũ này).
Tải xuống tất cả các mô-đun từ trang web Drupal và cài đặt trong thư mục của bạn tên / trang web / tất cả / mô-đun. Truy cập http://www.yoursitename.com/node#overlay=admin/modules và kích hoạt các mô-đun này như dưới đây;
(1) Lượt xem (2) Giao diện người dùng (3) Lượt xem Trình chiếu (4) Lượt xem Trình chiếu: Chu kỳ (5) Công cụ hỗn loạn (6) Liên kết (7) Thư viện (8) Mã thông báo (Tùy chọn) (3) Tạo Bộ nhớ cache hình ảnh
Trong Drupal7 fantecache là một phần của mô-đun lõi và được đặt tên là Kiểu ảnh. Vì vậy, hãy tạo hai bộ đệm hình ảnh từ đây, một cho hình ảnh thanh trượt kích thước đầy đủ và một cho hình ảnh thu nhỏ. Trong hướng dẫn này, tôi sử dụng kích thước 935x293 (pixel) cho hình ảnh thanh trượt kích thước đầy đủ và kích thước 210x100 (pixel) cho hình ảnh thu nhỏ. Lưu ý: Những cấu hình csn được bảo vệ tùy thuộc vào nhu cầu của bạn.
- Cài đặt hình ảnh thanh trượt Fullsize
Truy cập http://www.yoursitename.com/node#overlay=admin/config/media/image-ststyle và nhấp vào liên kết thêm kiểu mới (1) Đặt tên kiểu ảnh và nhấp vào tạo nút kiểu mới (2 ) Trên màn hình cấu hình tiếp theo, chọn kiểu mới bạn muốn và sau đó nhấp vào nút thêm (Trong hướng dẫn này tôi chọn thay đổi kích thước kiểu) (3) Trên màn hình tiếp theo, đặt chiều rộng và chiều cao và nhấp vào nút thêm hiệu ứng. (Các cài đặt có thể thay đổi tùy thuộc vào kiểu bạn chọn). Tôi đặt chiều rộng là 935 và chiều cao là 293 pixel.
Thực hiện quá trình này cho hình ảnh thu nhỏ quá. (đối với kích thước hình ảnh thu nhỏ, tôi đặt chiều rộng là 210 và chiều cao là 100 pixel.) (4) Tạo Loại nội dung mới
Chúng ta hãy tạo một loại nội dung mới, Từ thanh menu bảng điều khiển cick trên Cấu trúc và sau đó các loại nội dung, sau đó nhấp vào liên kết thêm loại nội dung mới.
(1) Đặt tên dễ đọc cho con người, tôi đặt tên là Slider nổi bật (tên machiine sẽ được tạo tự động dựa trên tên người có thể đọc được) Cài đặt mặc định (4) Tùy chọn xuất bản, tôi chỉ kiểm tra đã xuất bản (tất cả các cài đặt khác không được chọn) (5) Cài đặt hiển thị, tôi đã bỏ chọn thông tin xác thực và ngày tháng. (6) Cài đặt nhận xét, tôi đặt ẩn (tắt) (7) Cài đặt menu, tôi để cài đặt mặc định. (8) Nhấp vào Lưu và thêm trường Nút (5) Tạo trường mới
Ở đây trong ví dụ này tôi chỉ tạo hai tệp và chúng là trường hình ảnh và trường liên kết. Chúng tôi sẽ sử dụng trường hình ảnh để tải lên hình ảnh thanh trượt và trường liên kết để tạo liên kết tùy chỉnh nơi chúng tôi muốn thanh trượt của mình được liên kết.
Cài đặt trường hình ảnh
(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.
Tôi đặt trường này theo yêu cầu, tôi đã thêm một tên giám đốc tập tin được gọi là hình ảnh trượt để hình ảnh này sẽ được sắp xếp một cách ngẫu nhiên từ các hình ảnh khác. Bạn có thể đặt kích thước và độ phân giải tải lên tối đa ở đây, tôi có trường alt và tiêu đề đã bật và cuối cùng nhấp vào nút Lưu cài đặt.
Bằng cách sử dụng cùng một phương pháp tạo trường liên kết quá.
Cài đặt trường liên kết (1) Nhãn: Liên kết thanh trượt (2) Trường: slide_link (3) Loại trường: liên kết (4) Tiện ích (phần tử biểu mẫu): liên kết (5) Nhấp vào nút Lưu, Đối với cấu hình trường liên kết, hãy để lại cài đặt mặc định . Tôi đã sắp xếp lại các lĩnh vực như hiển thị dưới đây; Trường tiêu đề Trường hình ảnh Trường liên kết Trường cơ thể (thậm chí bạn có thể loại bỏ trường này nếu không cần thiết) Quản lý hiển thị Trên tab hiển thị quản lý, bạn có thể định hình cách đưa ra trường được cấp bằng. Tôi đã đặt trường liên kết là ẩn và tôi cũng đã đặt nhãn hình ảnh là ẩn Drupal7: quản lý các trường (6) Tạo nội dung thanh trượt tính năng
Tôi đã tạo ra bốn nội dung thanh trượt đặc trưng cho hướng dẫn này.
(1) Nhấp vào thêm liên kết nội dung (2) Tạo nội dung Thanh trượt nổi bật (3) Đặt tên tiêu đề phù hợp (4) Tải lên hình ảnh thanh trượt (5) Đặt tên trường alt và tiêu đề (6) Đặt tiêu đề liên kết và url nơi bạn muốn thanh trượt được liên kết (7) Để tất cả các cài đặt mặc định ngoại trừ trường đường dẫn nếu bạn muốn bạn có thể đặt bí danh URL thân thiện với SEO. (8) Lưu nội dung.
Cùng một cách tạo thêm nội dung Thanh trượt nổi bật (Tôi đã tạo bốn nội dung) (7) Tạo Chế độ xem mới
Bây giờ là lúc để tạo chế độ xem Trình chiếu mới của chúng tôi. Từ menu Bảng điều khiển, nhấp vào Cấu trúc và sau đó nhấp vào Chế độ xem.
(1) Nhấp vào thêm liên kết chế độ xem mới (2) Đặt tên cho chế độ xem, tôi đã đặt tên là Thanh trượt nổi bật (tên máy tính sẽ được tạo tự động) (3) Cung cấp mô tả chế độ xem phù hợp (4) Chọn Hiển thị nội dung của loại Thanh trượt nổi bật (nội dung của bạn tên loại). (5) Bỏ chọn Tạo bảng và kiểm tra Tạo khối (6) Nhập tiêu đề Khối và chọn định dạng hiển thị là "Trình chiếu" của các mục "trường" trên trang 5 (bạn có thể nhập số lượng mục bạn muốn hiển thị) (7 ) Nhấp vào nút "Tiếp tục & chỉnh sửa" Cài đặt trường xem Trước tiên hãy thêm trường liên kết (liên kết phải là trường đầu tiên để hoạt động đúng mọi thứ), vì vậy hãy nhấp vào biểu tượng thêm và từ bộ lọc Nhóm chọn Nội dung Thêm nội dung: Liên kết, Nhấp vào "Thêm & cấu hình nút" trong cửa sổ đồng sáng kế tiếp, bỏ chọn "Tạo nhãn". "Kiểm tra" Loại trừ khỏi màn hình. Nhấp vào "Nút áp dụng"
Tiếp theo, hãy thêm trường hình ảnh, vì vậy hãy nhấp vào biểu tượng thêm và từ bộ lọc Nhóm chọn nội dung Thêm nội dung: trường hình ảnh (Lưu ý: đảm bảo bạn chọn trường hình ảnh mà chúng tôi chỉ dành cho loại nội dung thanh trượt này.) Nhấp vào "Thêm & định cấu hình nút "trong cửa sổ đồng sáng kế tiếp bỏ chọn" Tạo nhãn ".
Trình định dạng: Hình ảnh (nếu bạn đã cài đặt Hộp màu hoặc hộp đèn, bạn có thể chọn chúng ở đây!) Kiểu ảnh: Fullsize (Chọn hình ảnh bạn đã tạo ở bước trên) Liên kết hình ảnh với: Không có Cài đặt kiểu: Không cài đặt mặc định Không có hành vi kết quả: Để lại cài đặt mặc định Viết lại kết quả: Kiểm tra đầu ra trường này dưới dạng liên kết Đường dẫn liên kết: [view_node] (Lưu ý: Cuộn xuống một chút và bạn có thể thấy các mẫu thay thế được tạo bởi mô-đun Core Token, (nếu chúng tôi không đặt trường liên kết như trước tiên, chúng tôi không thể thấy tùy chọn trường liên kết tại đây) chỉ sao chép [view_node] sau đó cuộn lên và dán vào trường đường dẫn liên kết.) Nhấp vào "Áp dụng nút"
Cuối cùng, chúng tôi cần thêm một trường cho hình thu nhỏ, vì vậy, hãy nhấp vào biểu tượng thêm và từ bộ lọc Nhóm chọn Nội dung Thêm nội dung: trường hình ảnh (Lưu ý: đảm bảo bạn chọn trường hình ảnh mà chúng tôi chỉ dành cho loại nội dung thanh trượt này.) Nhấp vào "Thêm & cấu hình nút" trong cửa sổ đồng sáng kế tiếp, bỏ chọn "Tạo nhãn" và KIỂM TRA LOẠI TỪ HIỂN THỊ, Trình định dạng: Hình ảnh (nếu bạn đã cài đặt Hộp màu hoặc hộp đèn, bạn có thể chọn chúng ở đây!) Kiểu hình ảnh: Hình thu nhỏ (Chọn hình ảnh bạn đã tạo ở bước trên) Liên kết hình ảnh đến: Cài đặt kiểu không có gì: Để lại cài đặt mặc định Không có hành vi kết quả: Để lại cài đặt mặc định Viết lại kết quả: Kiểm tra Kết quả trường này dưới dạng liên kết Đường dẫn liên kết: [view_node] (Lưu ý: Cuộn xuống một chút và bạn có thể thấy các mẫu thay thế được tạo bởi mô-đun Core Token, (nếu chúng tôi không 'Không đặt trường liên kết làm đầu tiên, chúng tôi không thể thấy tùy chọn trường liên kết tại đây) chỉ sao chép [view_node] sau đó cuộn lên và dán vào trường đường dẫn liên kết.) Nhấp vào "Áp dụng nút"
Lượt xem Cài đặt bộ lọc
Trong view3, các bộ lọc được tạo ngay từ đầu trong khi chúng tôi chọn loại nội dung và các cài đặt khác! Nếu bạn cần bất kỳ filetering bổ sung, bạn có thể tạo nó ở đây!
Cài đặt kiểu xem
Nhấp vào Định dạng Trình chiếu | giải quyết và trên cửa sổ cấu hình tiếp theo được thiết lập như dưới đây; (1) Loại danh sách: Danh sách không có thứ tự (2) Lớp trình bao bọc: Để cài đặt mặc định (3) Kiểu> Da: điếc (4) Trang chiếu> Kiểu trình chiếu: chu kỳ (5) Tùy chọn chu trình Bạn cần tải xuống plugin chu trình jQuery và sao chép jquery. cycl.all.min.js đến các trang web / all / library / jquery. Motorcycle Bạn có thể tìm thấy plugin tại http://malsup.com/jquery/ Motorcycle .
IN SIMPLE ENGLISH Tạo một thư mục có tên "library" trong thư mục site / all và sau đó tạo một thư mục khác có tên "jquery. Motorcycle" trong thư mục đó và cuối cùng chỉ sao chép và dán "jquery. Motorcycle.all.min.js" vào thư mục này.
(6) Chuyển tuyến: Làm mờ (7) Hành động: tạm dừng khi di chuột (8) Internet Explorer Tweaks: default (9) Widgets: Bạn có thể chọn một trong hai hoặc cả trên cùng và dưới cùng (Tôi chọn dưới cùng ở đây và cài đặt trước như bên dưới;) (10) Tiện ích dưới cùng> Máy nhắn tin> Loại máy nhắn tin: Trường (11) Trường máy nhắn tin: Nội dung: Hình ảnh (Lưu ý: lần cuối chúng tôi đã thêm cho ngón tay cái, đừng nhầm vì cả hai trường sẽ được đặt tên giống nhau.) (12) Kích hoạt Slide và Tạm dừng trên Pager Hove: đã chọn, các điều khiển và bộ đếm thanh trượt không được chọn. (13) Nhấp vào nút Áp dụng.
Định dạng Hiển thị cài đặt trường
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) Tạo Vùng tùy chỉnh (bước tùy chọn)
(1) Trên thư mục thems của bạn, mở tệp your_theme_name.info và thêm một khu vực mới như thế này được hiển thị bên dưới; khu vực [Feature_slider] = Thanh trượt nổi bật và lưu tệp .info. (2) Mở tệp theme.tpl.php của bạn và thêm các mã này vào nơi bạn muốn slide của mình được hiển thị như bên dưới;
Bạn thậm chí có thể tạo mẫu trang trước tùy chỉnh như trang - front.tpl.php để bạn không cần thực hiện bất kỳ thay đổi nào đối với mẫu page.tpl.php mặc định. [9] Kích hoạt và định cấu hình Chặn
Bây giờ khối này sẽ hiển thị trong khu vực bị vô hiệu hóa khối, do đó, từ menu Bảng điều khiển đi đến Cấu trúc> Khối và bật khối sang vùng mặc định của chủ đề hoặc vùng tùy chỉnh mà chúng tôi đã tạo (đặc trưng_slider). (Các khu vực khác nhau tùy thuộc vào chủ đề bạn đang sử dụng.)
Cài đặt cấu hình khối Sau khi bật khối, bạn nhận được một liên kết để định cấu hình khối, vì vậy hãy nhấp vào liên kết Cấu hình và trên phần cài đặt được đặt như bên dưới;
(1) Tiêu đề chặn (nếu bạn không muốn tiêu đề blobk chỉ được hiển thị) (2) Một lần nữa, bạn nhận được tất cả các cài đặt Vùng cụ thể của chủ đề được bật. Trên cài đặt hiển thị (3) Trang> Hiển thị khối trên trang cụ thể: chọn Chỉ các trang được liệt kê và nhập để khối này sẽ chỉ được hiển thị trên trang trước. LỜI KHUYÊN CSS ĐỂ HIỂN THỊ THUMBNAILS TRỰC TUYẾN
Thêm các mã CSS này vào biểu định kiểu chủ đề của bạn để hiển thị hình thu nhỏ bên trong. .view-slideshow-controls-bottom .view-slideshow-pager-field-item {float: left; lề: 20px 6px; } Thực hiện các điều chỉnh cần thiết.