10/10/2018, 11:40
giờ giúp giải thuật html, css làm thumb slider giống flickr
chào các bác! em đang làm 1 cái thumb slider giống flickr , cụ thể các bác vào link này
http://www.flickr.com/photos/rongcon...in/photostream
nhìn vào cột bên phải ở giữa , các bác sẽ thấy 1 cái khung hiển 5 thumb nhỏ của hình hiện tại và 4 hình cận đó. khi click 1 trong 2 nút bên trái hoặc bên phải thì nó sẽ lấy hnhf kế tiếp và hình trước đó. cụ thể là 4 hình .
các hình này nằm chung 1 folder.
mình gặp khó khăn trong việc xây dựng slider bằng html và js (jquery).
mình có 1 div gọi là thumb-view với kích cỡ chỉ bằng 5 thumb nhỏ
div này sẽ chứa div container
div container sẽ chứa toàn bộ thumb của hình. mình dùng jquery animate để di chuyển , thay đổi thuộc tính css "left" của container thì thumb nó tự di chuyển.
khó khăn của mình là mình ko thể load toàn bộ thumb trong folder cùng lúc khởi đầu. mà chỉ tiến hành load 5 hình hiện tại + 4 hình trước + 4 hình sau.
khi click vào 1 trong 2 nút thì mình mới load thêm 4 hình tại hướng kế tiếp để hạn chế việc load hình chưa hoàn chỉnh mà bị kéo ra view rồi.
bởi vậy mà có lúc mình sẽ dùng ajax để lấy thêm thumb bỏ vào vị trị đầu hoặc vị trí cuối của container. khi bỏ vị trí cuối thì k có j xảy ra. nhưng khi bỏ vào vị trí đầu thì các element tự động dàn qua bên phải vì lúc này có thêm các element ở đầu. lúc này xử lý move rất phức tạp.
xem hình dễ hiểu : http://pmtricks.net/tumlum/aaa.PNG
nó phức tạp ở chỗ lúc này mình vừa phải tăng left để nó move qua bên phải. đồng thời việc thêm các element khiến các element bên trong move qua phải ngay lập tức! kết quả là tới 2 lần move.
mình có thể tính toán bao nhiêu px bị dịch sang phải để giảm left ngay lập túc. nhưng nó sẽ tạo ra 1 sự khựng khiến sự di chuyển ko mượt mà.
mong các bác giúp em giải quyết vấn đề này !!!
http://www.flickr.com/photos/rongcon...in/photostream
nhìn vào cột bên phải ở giữa , các bác sẽ thấy 1 cái khung hiển 5 thumb nhỏ của hình hiện tại và 4 hình cận đó. khi click 1 trong 2 nút bên trái hoặc bên phải thì nó sẽ lấy hnhf kế tiếp và hình trước đó. cụ thể là 4 hình .
các hình này nằm chung 1 folder.
mình gặp khó khăn trong việc xây dựng slider bằng html và js (jquery).
mình có 1 div gọi là thumb-view với kích cỡ chỉ bằng 5 thumb nhỏ
PHP Code:
#relative-still-view{
width:708px;
float:left;
position:relative;
height: 103px;
overflow:hidden;
}
PHP Code:
#relative-still-container{
position:absolute;
left:4px;
}
khó khăn của mình là mình ko thể load toàn bộ thumb trong folder cùng lúc khởi đầu. mà chỉ tiến hành load 5 hình hiện tại + 4 hình trước + 4 hình sau.
khi click vào 1 trong 2 nút thì mình mới load thêm 4 hình tại hướng kế tiếp để hạn chế việc load hình chưa hoàn chỉnh mà bị kéo ra view rồi.
bởi vậy mà có lúc mình sẽ dùng ajax để lấy thêm thumb bỏ vào vị trị đầu hoặc vị trí cuối của container. khi bỏ vị trí cuối thì k có j xảy ra. nhưng khi bỏ vào vị trí đầu thì các element tự động dàn qua bên phải vì lúc này có thêm các element ở đầu. lúc này xử lý move rất phức tạp.
xem hình dễ hiểu : http://pmtricks.net/tumlum/aaa.PNG
nó phức tạp ở chỗ lúc này mình vừa phải tăng left để nó move qua bên phải. đồng thời việc thêm các element khiến các element bên trong move qua phải ngay lập tức! kết quả là tới 2 lần move.
mình có thể tính toán bao nhiêu px bị dịch sang phải để giảm left ngay lập túc. nhưng nó sẽ tạo ra 1 sự khựng khiến sự di chuyển ko mượt mà.
mong các bác giúp em giải quyết vấn đề này !!!
Bài liên quan
cái thumb container chứa các thumb con có position:absolute.
lúc thêm thumb con vào container thì tính toán để đặt left cho thumb cho đúng. nó sẽ ko bị hiện tượng tự dàn qua phải khi thêm 1 số thumb vào bên trái của container!
khi muốn move cả container thì thay đổi left của container là xong
Đối với tôi thì những gì thuộc nền tảng cơ bản không được phép quên hay nhầm lẫn. Sẽ ko ai đủ tin tưởng giao việc cho bạn khi bạn cho họ thấy bạn "mất căn bản" như thế nào.
Thôi, ko đáng để chấp. Chúc anh vui vẽ