giờ giúp giải thuật html, css làm thumb slider giống flickr

[ngoc_viet08]

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ỏ

#relative-still-view{
    width:708px;
    float:left;
    position:relative;
    height: 103px;
    overflow:hidden;
} 

div này sẽ chứa div container

#relative-still-container{
    position:absolute;
    left:4px;
} 

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 !!!

[ngoc_viet08]

ko ai cmt nhỉ. giải thuật tìm ra rồi. xem xét html của flickr 1 hồi thì hiểu

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

[jiSh@n]

HTML/CSS có phải ngôn ngữ lập trình đâu mà có giải với chả thuật

[Adam]

HTML/CSS có phải ngôn ngữ lập trình đâu mà có giải với chả thuật

Vậy gọi là "phẫu thuật" dc ko bác ợ

[chiase.net]

HTML/CSS có phải ngôn ngữ lập trình đâu mà có giải với chả thuật

=)) Mềnh thấy vấn đề bác ý đem ra rất hay. Vì mình cũng đang làm 1 site ảnh. Còn bác, hết thứ để cm ak?

[jiSh@n]

=)) Mềnh thấy vấn đề bác ý đem ra rất hay. Vì mình cũng đang làm 1 site ảnh. Còn bác, hết thứ để cm ak?

Thế chỉ ra xem tôi cm sai chỗ nào

[kenphan19]

chắc nó là ngôn ngữ để gõ bàn phím

[chiase.net]

Thế chỉ ra xem tôi cm sai chỗ nào

sai thì ko. nhưng nhạt thôi

[jiSh@n]

sai thì ko. nhưng nhạt thôi

mặn nhạt tùy người

Đố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.

[chiase.net]

Ak uh. Thế thì anh bắt lỗi cái từ "giờ" trên title bạn ấy luôn đi. Hay anh cũng quên cơ bản ạ.
Thôi, ko đáng để chấp. Chúc anh vui vẽ