Joomla – Thiết kế web động dễ như chơi (Phần 35)

Thảo luận trong 'Joomla' bắt đầu bởi hoangtrieumanhn, 2/1/15.

Lượt xem: 13,824

Bạn đang xem:

Joomla – Thiết kế web động dễ như chơi (Phần 35)

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Trong bài này, chúng ta sẽ tìm hiểu cách sử dụng một component mang tên Ozio Gallery để tạo các hiệu ứng cho thư viện ảnh trong trang web Joomla.

    [​IMG]


    Hãy tải phần nguồn cài đặt về từ địa chỉ http://www.mediafire.com/?brkm3qre2t67d7z , rồi giải nén thành thư mục Extensions11.

    Cài đặt component Ozio Gallery

    Đầu tiên, bạn mở trình duyệt và truy cập vào địa chỉ:http://localhost/mobile/administrator, bạn đăng nhập bằng tên tài khoản (username) là admin, còn mục mật khẩu (password), bạn nhập vào mật khẩu mà bạn đã thiết lập trong quá trình cài đặt Joomla. Sau khi đăng nhập thành công, bạn vào menu Extensions, chọn Install/Uninstall. Ở mụcPackage File, bạn nhấn Browse, trỏ đường dẫn đến tập tincom_oziogallery.zip, và nhấn tiếp vào mục Upload File & Install để bắt đầu.


    [​IMG]


    Khi bạn nhận được thông báo Install Component Success nghĩa là quá trình cài đặt component đã thành công.

    Tạo tài khoản và tải hình lên trang Flickr

    Ưu điểm của chương trình Ozio Gallery là bạn có thể lấy thông tin các ảnh từ tải khoản Flickr mà không cần phải chép các ảnh vào máy chủ Web của bạn. Điều này sẽ giúp bạn tiết kiệm được dung lượng cho máy chủ Web. Flickr là chương trình lưu ảnh của Yahoo hiện có số lượng người dùng đông đảo với tốc độ tải nhanh, dễ quản lý, hỗ trợ danh sách bạn bè…Để tạo tài khoản trên trang Flickr, bạn hãy truy cập vào trang web http://www.flickr.com/, sau đó bạn nhấn vào nút Create Your Account.


    [​IMG]


    Vì đây là chương trình của Yahoo, nên Flickr tích hợp với tài khoản của Yahoo. Bạn có thể nhập vào tên đăng nhập của bạn ở mục Yahoo!ID và mật khẩu ở mục Password. Sau đó nhấn Sign in. Ngoài ra, nếu bạn có tài khoản trên Facebook hoặc Gmail, bạn cũng có thể đăng nhập bằng các dịch vụ này.


    [​IMG]


    Sau khi bạn đăng nhập thành công, nếu bạn bạn sử dụng Gmail hoặc Facebook, Yahoo sẽ yêu cầu bạn cho phép nó thu thập một số thông tin cá nhân như địa chỉ email, quốc gia, ngôn ngữ… Bạn nhấn nút Allow để đồng ý.


    [​IMG]


    Bước kế tiếp bạn phải điền thông tin về ngày tháng năm sinh của bạn, sau đó nhấn Continue.


    [​IMG]


    Cuối cùng, bạn nhập vào tên tài khoản ở mục Choose your new Flickr screen name, và nhấn nút Create My Account để tạo tài khoản.


    [​IMG]


    Giờ thì bạn đã có thể tải ảnh lên trang Flickr bằng cách nhấn vào mụcUpload Photos & Video.


    [​IMG]


    Trong trang Upload to Flickr, ở mục Step 1, bạn nhấn vào liên kết Choose photos and videos


    [​IMG]


    Trong trang Select File(s), bạn trỏ đường dẫn đến các hình mà bạn sẽ tải lênFlickr. Bạn có thể nhấn giữ phím Ctrl để có thể chọn nhiều hình. Sau khi chọn xong, bạn nhấn nút Open.


    [​IMG]


    Flickr sẽ tự động thống kê các tập tin hình mà bạn tải lên. Ngoài ra bạn còn có thể thấy kích thước của từng tập tin. Tối đa bạn có thể sử dụng 300MB dung lượng hình cho mỗi tháng. Nếu bạn muốn xóa hình nào, thì ở cộtRemove, bạn nhấn vào biểu tượng thùng rác để làm điều đó.

    Ở bên dưới là mục Set privacy dùng để phân quyền cho các bức hình. Nếu bạn muốn chỉ có bạn bè hoặc gia đình bạn có thể xem những bức hình này, bạn hãy chọn ô Private, sau đó chọn bạn bè (Friend) hoặc gia đình (Family). Còn nếu bạn muốn ai cũng có thể xem hình, thì bạn hãy chọn vào ôPublic. Sau khi chọn xong, bạn nhấn vào nút Upload Photos and Videos.


    [​IMG]


    Để xem những bức ảnh bạn đã tải lên, bạn vào menu You, chọn Your Photostream.


    [​IMG]



    Cấu hình component Ozio Gallery

    Bây giờ quay lại trang quản trị Joomla, bạn vào menu Components, chọnOzio Gallery.


    [​IMG]


    Bạn nhấn vào nút Settings trên thanh công cụ


    [​IMG]


    Đầu tiên là thẻ General, ở mục Skin, Ozio Gallery cung cấp cho bạn 10 giao diện, tương ứng với mỗi giao diện sẽ có một thẻ để cấu hình dành riêng.Flickr chỉ tương thích với một số giao diện như Titl 3D, Flickr Slideshow, Flickr Photos, Image Rotator và Flickr Slideoo. Để có thể lấy hình ảnh từFlickr, ở mục Use images from Flickr, bạn đánh dấu chọn vào hộp chọn bên trái nó.


    [​IMG]


    Còn trong mục Flickr User ID, bạn phải nhập vào mã người dùng trên trangFlickr. Để có được mã Flickr User ID này, bạn truy cập vào tranghttp://www.flickr.com/services/api/explore/?method=flickr.people.findByUsername. Sau đó ở khung Value, bạn nhập vào tên truy cập của bạn và nhấn vào nút Call Method…Sau đó bạn nhìn ở khung XML xuất hiện bên dưới sẽ thấy mục User id, bạn chép mã số này vào dán khung Flickr User ID.


    [​IMG]


    Sau đó bạn nhấn Save để lưu lại, rồi di chuyển qua thẻ tương ứng với tên kiểu giao diện (Skin) mà bạn đã chọn, ví dụ như Flickr Slideoo. Ở mục Flash width, bạn có thể chỉnh độ rộng của hiệu ứng, mặc định là 100%. Kế tiếp là mục Image’s Size dùng để hiển thị kích thước hình ảnh, có ba dạng chính: hình ảnh thu nhỏ (Thumbnail – 80 pixel), hình ảnh trung bình (Medium – 179 pixel) và hình ảnh lớn (Big – 320 pixel).

    Mục Max number of images cho phép bạn thiết lập số hình ảnh tối đa được thể hiện, mặc định ở đây là 25. Và cuối cùng là mục Randomize, nếu bạn đánh dấu chọn vào ô vuông thì các hình ảnh sẽ được xuất hiện ngẫu nhiên. Sau khi đã cấu hình xong, bạn nhấn nút Save để lưu lại.


    [​IMG]



    Tạo menu Ozio Gallery

    Tiếp theo bạn vào thực đơn Menus, và chọn Main Menu, sau đó nhấn Newđể tạo mới một mục chọn mới. Ở mục Select Menu Item Type, bạn chọnOzio Gallery.


    [​IMG]


    Ở mục Joomla Ozio Gallery Component for Joomla 1.5, bạn nhập vào tên menu, ví dụ như Gallery hay Thư viện ảnh. Mục Active a link on images, bạn giữ nguyên đường dẫn như mặc định. Kế tiếp là mục Display in cho bạn chọn lựa mục chọn này thuộc menu nào. Ở mục Published, bạn nhớ chọn Yesđể kích hoạt menu. Cuối cùng thì đừng quên nhấn Save để lưu lại.


    [​IMG]


    Quay lại trang Joomla Mobile, bạn nhấn vào menu chúng ta vừa tạo để xem kết quả.


    [​IMG]


    Bên cạnh việc tải ảnh từ trang web Flickr của Yahoo, nếu máy chủ Web của bạn có dung lượng lớn, bạn cũng có thể chép tất cả các hình ảnh của mình vào máy chủ đó và sử dụng các giao diện còn lại của Ozio Gallery.

    Đầu tiên, bạn cần chép tất cả các hình ảnh vào thư mụcC:\AppServ\www\mobile\images\oziogallerytrên máy. Sau đó quay lại trang quản trị Joomla, bạn vào menu Components, chọn mục Ozio Gallery. Hãy nhấn vào nút Settings để bắt đầu hiệu chỉnh các thiết lập.

    Ở thẻ General, mục Use images from Flickr, bạn hãy bỏ dấu trong hộp chọn. Tiếp theo ở mục Skin, bạn có thể chọn bất kỳ giao diện nào, ví dụ Tilt 3D. Sau đó bạn qua thẻ Tilt 3D để cấu hình cho giao diện này.


    [​IMG]


    Đầu tiên là mục Images folder, bạn nhập vào đường dẫn lưu các tập tin hình ảnh đã chép, mặc định sẽ là images/oziogallery. Mục Flashwidth và Flash height dùng để thiết lập chiều rộng và chiều cao của hiệu ứng, đơn vị được tính là điểm ảnh (pixel).

    Tiếp theo là mục Align dùng để canh chỉnh vị trí cho hình ảnh. Giao diện Ozio Gallery cung cấp cho bạn ba tùy chọn: canh trái (Left), canh giữa (Center) và canh phải (Right).

    Trong trường hợp bạn có nhiều hình ảnh, thì việc hiển thị toàn bộ hình ảnh lên trang web sẽ gây khó chịu cho người dùng. Khi đó chúng ta sẽ chia các hình ảnh ra nhiều trang khác nhau. Mục Columns cho phép bạn thiết lập số cột hiển thị các hình ảnh, còn mục Rows cho phép bạn thiết lập số hàng. MụcFrame Color dùng để tô đường viền cho các hình ảnh và bạn có thể nhấn nút để chọn màu cho đường viền.

    Ở mục Background Gradient center, bạn chọn màu nền cho ví trí ở giữa màn hình. Còn mục Background Gradient edge cho phép bạn chọn màu nền cho khung bên ngoài. Hai mục này màu sắc phải tương phản với nhau thì khung hình của bạn mới bắt mắt.

    Mục Back Color dùng để chọn màu sắc cho mặt thứ hai của tấm hình. Vì giao diện bạn chọn là giao diện 3D nên bức hình của bạn sẽ có hai mặt, mặt trước là hình ảnh, còn mặt sau là thông tin mô tả về hình.

    Ngoài ra, bạn còn có thể cho phép người dùng tải hình về máy. Đánh dấu chọn mục Enable download/link mode, bạn cần nén hình ở dạng *.zip và chép vào thư mục C:\AppServ\www\mobile\images\oziogallery\file. Lưu ý tên tập tin hình và tên tập tin Zip phải trùng tên nhé. Sau khi cấu hình xong, bạn nhấn nút Save để lưu lại.


    [​IMG]


    Quay lại trang Joomla Mobile, bạn nhấn vào menu Gallery sẽ thấy một thư viện ảnh với giao diện Tilt 3D như đã chọn.


    [​IMG]


    Mỗi khi bạn rê chuột về hướng nào thì tất cả các tấm hình cũng di chuyển theo. Khi bạn nhấn vào một tấm hình thì hình ảnh sẽ được tự động phóng lớn


    [​IMG]


    NHÓM MỤC ĐỒNG
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Joomla – Thiết kế web động dễ như chơi (Phần 35)

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, Toyota camry 2017, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, fpt ho chi minh, @@
=