2011-11-10 8 views
5

Tôi đang tìm cách xây dựng thư viện javascript/jquery đáp ứng tiêu chí bên dưới và muốn biết liệu có bất kỳ mô-đun thư viện hiện có nào có tất cả/hầu hết các tính năng sau:Thư viện ảnh chụp ảnh đáp ứng với chức năng vuốt

1. Tường ảnh có chức năng phóng to (xem một lần). ví dụ. http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/

2. Responsive, do đó ngói hình ảnh tường ảnh đúng cách cho máy tính để bàn & thiết bị di động, và cải tổ nếu người dùng thay đổi kích thước trình duyệt của họ. ví dụ. http://isotope.metafizzy.co/

3. (tùy chọn nhưng mong muốn). Nếu người dùng sử dụng thiết bị di động, hãy cho phép họ vuốt qua các hình ảnh xem một lần.

Tóm lại. Một người dùng sẽ đi đến bức tường thu nhỏ, chọn một hình ảnh, và sau đó có thể vuốt qua các bức ảnh phóng to hơn hoặc quay lại tường.

Ảnh sẽ được lấy từ thư mục trên máy chủ. Người điều hành chỉ đơn giản là các cô gái máy ảnh, người sẽ tải hình ảnh từ máy ảnh kỹ thuật số của họ lên thư mục này qua ftp - Họ sẽ không thay đổi kích thước/tối ưu hóa hình ảnh, vì vậy sẽ rất tuyệt nếu điều này có thể xảy ra trong quá trình ở đâu đó.

Chúng tôi đang lưu trữ trên môi trường PHP/Linux.

Trả lời

2

Có một cái nhìn tại jQuery Mason: http://masonry.desandro.com/

Nó có thể được sử dụng như một bức tường đáp ứng.

Điều bạn yêu cầu không được gọi là 'thu phóng' (đó là một hiệu ứng khác), bạn dường như được gọi là hộp đèn. Có rất nhiều, đây là một so sánh, http://planetozh.com/projects/lightbox-clones/

Để tái kích thước hình ảnh, bạn sẽ phải viết một số php để sử dụng hình ảnh GD hoặc imagemagick, đây là hướng dẫn, http://net.tutsplus.com/tutorials/php/image-resizing-made-easy-with-php/ hoặc có thể là tập lệnh, http://shiftingpixel.com/2008/03/03/smart-image-resizer/ (hoặc timthumb.php).

Để phục vụ họ, bạn sẽ phải viết một số php với javascript của mình.

Không có tất cả trong một giải pháp cho những gì bạn yêu cầu, bạn sẽ phải viết hoặc thuê người làm như vậy.

1

Theo như tôi biết, bạn phải tạo một plugin hoặc viết bạn sở hữu chức năng jquery để nhận tất cả các tính năng cá nhân hoá. (Mà sẽ rất tốt trong ý thức về hiệu suất và bảo trì)

  1. cho phóng to chức năng bạn có thể sử dụng một số cửa sổ phương thức có cuộc gọi ajax hoặc bạn có thể tạo.
  2. để đạt được điều này, bạn phải viết css tốt để ảnh của bạn được căn chỉnh theo screen.reshuffle sẽ được xử lý nếu bạn viết css tốt.
  3. có bạn có thể đạt được điều này bằng cách phát hiện trình duyệt của trình duyệt và thay đổi css và javascript cho phù hợp.
  4. Đối với các hình ảnh xử lý trước (định lại kích thước, tạo ngón tay cái), bạn có thể chọn các giải pháp phụ trợ php.
  5. Và đừng lo lắng, bạn có thể xử lý hình ảnh từ thư mục qua Ajax và hiển thị chúng theo yêu cầu.