Sử dụng Div thay vì ul trong jquery SlideviewerPro 1.5

Question

Tôi là người mới sử dụng mã hóa và đã sử dụng Dreamweaver trên cơ sở WYSIWYG. Gần đây tôi đã nhúng vào Jquery và đã quản lý để thực hiện các plugin JQuery SlideshowPro trên một trang. Vấn đề là các hình thu nhỏ được pixelated khi giảm tự động và không có nhiều phạm vi để di chuyển các hình thu nhỏ riêng lẻ như có trong một danh sách không có thứ tự.

Tôi tự hỏi có cách nào để phân bổ thủ công từng hình thu nhỏ riêng lẻ (để dễ sử dụng) và hình ảnh chính được cuộn/hoán đổi trong Div khác trong khi vẫn duy trì hiệu ứng trượt trên quá trình chuyển ảnh chính . Tôi không quan tâm đến việc có hình thu nhỏ cuộn vì không chắc tôi sẽ có đủ hình thu nhỏ trên mỗi trang để đảm bảo cuộn. Trong thực tế một trao đổi hình ảnh rời rạc với chuyển đổi trượt duy trì.

Mã ban đầu có thể được tìm thấy trên trang sau: gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html mặc dù tôi muốn tránh việc sử dụng danh sách nếu có thể.

Answer 1

Nếu tôi đã hiểu chính xác bạn, điều này khá dễ thực hiện với một sửa đổi đơn giản đối với plugin và một chút thay đổi đối với hình ảnh của li.

Trước tiên tôi muốn thêm một thuộc tính dữ liệu vào thẻ hình ảnh trong li xác định một url ngón tay cái riêng biệt, ví dụ:

<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li> 

Tôi đã thêm một html 5 dữ liệu thuộc tính được gọi là dữ liệu-thumb-src để chứa đường dẫn ngón tay cái.

Sau đó sửa đổi phần của plugin xây dựng phần hình ảnh ngón tay cái của trình chiếu. Tôi đã tải plugin, xung quanh dòng 99 có này:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
}); 

Swap này ra cho một cái gì đó như thế này:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
}); 

Vì vậy, các ngón tay src nay tương đương với các dữ liệu-thumb-src từ chính hình ảnh.

Nếu bạn đang cảm thấy thực sự mạo hiểm, bạn có thể thử một cái gì đó như thế này và sử dụng ngón tay cái bình thường theo mặc định và sau đó là ngón tay cái tùy chỉnh khi bạn cần nó trên một cơ sở ad-hoc:

jQuery(this).find("li").each(function(n) { 
    if(jQuery(this).find("img").attr('data-thumb-src')){ 
     var thumb_src = jQuery(this).find("img").attr('data-thumb-src'); 
    }else{ 
     var thumb_src = jQuery(this).find("img").attr("src"); 
    } 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
}); 

Vì vậy, nếu ngón tay cái src tồn tại sử dụng nó, khác sử dụng ngón tay cái bình thường.

Hy vọng điều này sẽ hữu ích.