Làm cho trình chiếu xem phản hồi - loại bỏ các kiểu nội tuyến

6

Làm thế nào để loại bỏ các kiểu mã hóa chiều cao và chiều rộng được mã hóa cứng khỏi trình chiếu xem? Tôi đang cố gắng để làm cho slideshow slideshow phản ứng.

Tôi đang cố gắng để trình chiếu của mình phản hồi nhanh (hiện tại tôi không quan tâm đến flexslider hoặc mô-đun trình chiếu khác).

theming  views 
— chrisjlee
nguồn
Có một luồng rất dài liên quan đến điều đó. drupal.org/node/1317510 Thành thật mà nói, nó giống như lắp một cái chốt vuông vào một cái lỗ tròn. Flexslider thực sự là giải pháp tốt nhất và có thể làm mọi thứ mà Views slideshow có thể làm. Tôi thực sự đã có được một Trình chiếu Lượt xem thông thường để phản hồi bằng cách sử dụng các đề xuất trong chuỗi ở trên nhưng đó là rất nhiều công việc và hack CSS.
— Daniel Englander
Thêm một cho thanh trượt flex. Bạn có biết rằng thanh trượt flex đi kèm với một trình chiếu slideshow xem không? Bạn chỉ cần chọn thanh trượt flex thay vì chu kỳ. Tôi đã chuyển từ sử dụng chu kỳ v1 sang chu kỳ v2 và sau đó đến thanh trượt flex và chỉ phải thay đổi một lượng css rất nhỏ để thực hiện chuyển đổi.
— rooby

Câu trả lời:

9

Mô-đun flexslider được đề cập ở trên có vẻ tuyệt vời với hỗ trợ vuốt di động, nhưng chỉ có hình ảnh được hỗ trợ và tôi cần trình chiếu video, với hỗ trợ lớp phủ. Vì vậy, tôi đã thêm các dòng sau vào tệp CSS của chủ đề của mình và nó đã hoạt động:

.views_slideshow_cycle_main { width: 100%; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .field-content { max-width: 100%; width: 100%; }
.views_slideshow_cycle_main .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0; }

Với SCSS, nó có thể dễ dàng được viết là: 

.views_slideshow_cycle_main {                                                      
  width: 100%;                                                                     
 .views-slideshow-cycle-main-frame {width: 100% !important; height: auto;}         
 .views-slideshow-cycle-main-frame-row {width: 100% !important; height: auto;}     
 .field-content { max-width: 100%; width: 100%;}                                   
 .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding:0;} 
}

Các lớp phủ đã được thêm bởi Views_slIDIA_xtra_overlay.

Chuyển thể từ cuộc thảo luận này

— Druvision
nguồn
Tôi đang sử dụng mô-đun drupal flex slide v1 và tôi có nội dung rất phức tạp trong trình chiếu của mình. Nó chắc chắn không giới hạn hình ảnh. - Hay bạn có nghĩa là vuốt chỉ hỗ trợ hình ảnh?
— rooby
@Druvision chiều cao ".view_slIDIA_ Motorcycle_main .view-slideshow-cycling-main-frame" dường như không đáp ứng với chế độ xem slieshow của tôi khi tôi thay đổi kích thước trình duyệt. Có cách nào để sửa lỗi này?
— CocoSkin
7

Tùy chọn tốt hơn là sử dụng 'Tùy chọn nâng cao' của chính mô-đun trình chiếu.

Bạn cần làm như sau

  1. Tạo thư mục có tên json2 trong các trang web / all / library và tải xuống https://raw.github.com/douglascrockford/JSON-js/master/json2.js và đổi tên thư mục json2.

  2. Trong cài đặt trình chiếu FORMAT trong chế độ xem, cuộn "Tùy chọn tùy chỉnh chu kỳ jQuery" và bên dưới tùy chọn nâng cao được đặt,

    height: auto
width: auto
containerResize: 0
slideResize: 0
fit: 1

  3. Làm cho chiều cao cửa sổ trượt vừa với slide lớn nhất: bỏ chọn

  4. Cập nhật quan điểm và thì đấy! Trình chiếu sẽ được phản hồi ngay cả khi kéo cửa sổ trình duyệt.

Tham chiếu: ở đây và ở đây

— Kevin Siji
nguồn
Bạn vẫn có thể gặp phải một số vấn đề tùy thuộc vào những gì bạn có trong trình chiếu. Theo kinh nghiệm của tôi, tôi chưa tìm thấy phương pháp đáng tin cậy 100% với phiên bản jquery 1. - Tôi thậm chí đã sử dụng các cài đặt này với việc thêm một số javascript tùy chỉnh và vẫn không có được giải pháp hoàn hảo 100%.
— rooby
yeah, flexslider html cũng ngắn và ngọt ngào. +1 cho flexslider.
— Kevin Siji
Xin chào. Tôi không hiểu làm thế nào tôi có thể làm bước này: Làm cho chiều cao cửa sổ trượt vừa với slide lớn nhất: không được chọn. Ở đâu?
— Cabita
@cabita Có một hộp kiểm trong cài đặt trình chiếu dạng xem có nhãn Make the slide window height fit the largest slide. Để nó không được kiểm tra.
— Kevin Siji
@KevinSiji Có thể kiểm tra Làm cho chiều cao cửa sổ trượt vừa với slide lớn nhất và làm cho trình chiếu xem phản hồi.
— Jetson John
3

Chủ đề này có một giải pháp rất hay: https://drupal.org/node/1510526

Các css được đề xuất giúp bạn có một trình chiếu rất đẹp và có một số javascript để có thêm một chút nữa. Vấn đề duy nhất tôi gặp phải là nếu bạn trượt trình duyệt hẹp hơn và rộng hơn, chiều cao của trình chiếu gây ra các vấn đề xung quanh nó theo hướng dọc. Bạn có thể giảm thiểu điều này bằng các giá trị css chiều cao tối đa khác nhau cho các tệp css truy vấn phương tiện khác nhau của bạn.

— jackrabbithanna
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.