jQuery Cycle 2 Responsive w/Slide ở giữa

Question

Tôi đang cố gắng thiết lập một thư viện hình ảnh đáp ứng bằng cách sử dụng plugin jQuery 2 tuyệt vời. Thư viện sẽ có cả hình ảnh dọc và ngang.

Tôi đang sử dụng tùy chọn Slides làm trung tâm (Trung tâm Plugin Cycle2 của: http://jquery.malsup.com/cycle2/demo/center.php) và điều này dường như được gây ra vấn đề trong các trình duyệt Webkit (thử thay đổi kích thước cửa sổ trình duyệt của bạn nếu điều này là không rõ ràng lúc đầu!)

http://goo.gl/NFFZk

Nền màu xanh lá cây đại diện cho vùng chứa chu kỳ.

Nếu không có sự lựa chọn trung tâm gia tăng (data-chu-center-horz = true dữ liệu chu kỳ-trung tâm-vert = true) toàn bộ điều là làm việc tốt, xem:

http://goo.gl/p76wi

tôi có thể không hoạt động những gì đang gây ra sự cố với phiên bản lấy nét.

Các mã CSS trên hình ảnh là khá tối thiểu: CSS

.cycle-slideshow img { 
    max-height: 100%; 
    max-width: 100%; 
} 

Yếu tố chứa là đây

.cycle-slideshow { 
    background: green; 
    display: block; 
    position:absolute; 
    height:auto; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    margin:20px auto; 
    padding:0; 
    width:80%; 
    } 

Nhiều cảm ơn trước sự giúp đỡ nào!

Answer 1

Sau khi xem xét ví dụ của bạn không hợp tác, có vẻ như kiểu nội tuyến là những gì có thể khiến bạn bị nhức đầu. Dưới đây là HTML tham chiếu cho hình ảnh thứ hai (cá koy):

<img src="http://www.freeimageslive.com/galleries/nature/animals/pics/nishikigoi.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 99; display: block; margin-left: 205px; opacity: 1;" class="cycle-slide cycle-slide-active"> 

Những điều cần lưu ý ở đây sẽ là margin-left tài sản được thiết lập để 205px. Để hiển thị hình ảnh động hoặc phản hồi trung tâm, cần phải có một chút toán. Bạn sẽ cần phải sử dụng số bù trừ để thực hiện việc này. Đặt hình ảnh thành left: 50% sẽ căn chỉnh phía bên trái của hình ảnh ở giữa vùng chứa. Khi đã ở đó, bạn sẽ sử dụng số âm margin-left nửa chiều rộng để đưa hình ảnh vào đúng trung tâm. (Ví dụ, nếu chiều rộng của hình ảnh là 80px, sau đó bạn sẽ sử dụng CSS left: 50%; margin-left: -40px;

Answer 2

Lấy phiên bản nén của các plugin chu kỳ:. http://malsup.github.io/jquery.cycle2.center.js

Thay đổi dòng 17 (thêm tải vào danh sách các sự kiện kích hoạt thay đổi kích thước):

$(window).on('resize orientationchange load', resize); 

này sẽ khắc phục vấn đề định tâm ngẫu nhiên kỳ lạ trên các trình duyệt webkit

tôi op. ened an issue cho điều này trên github malsup. Hy vọng rằng điều này sẽ làm việc theo cách của mình vào phiên bản được xuất bản sớm.

Answer 3

Đây là một tùy chọn khác.

$('.cycle-slideshow').on('cycle-initialized', function(event, opts) {     
    $(window).trigger('resize'); 
});