Breaking news:

U

Forum topic

Tạo một phòng trưng bày ảnh với drupal 7

Forums: 

Tạo một  phòng trưng bày ảnh với drupal 7

 

 

 

để tạo một phòng trưng bày ảnh hay album ảnh không khó, bạn có thể có nhiều module để làm việc này như gallery, colorbox.... nhưng chúng thường có  nhiều hơn những thứ bạn cần và khó để tinh chỉnh cho tốt. ở đây bài viết này sẽ hướng dẫn bạn tạo ra một trang trung bày ảnh có thể dễ dàng modify và cấu hình

Tổng quan

Qua những hướng dẫn bài viết sẽ hướng dẫn bạn làm thế nào để tạo một trang làm phòng trưng bày ảnh trên Bartik theme (theme cơ bản của drupal). Đương nhiên bạn có thể áp dũng ở bất kỳ theme nào của bạn tùy thích

Xem hướng dẫn demo

 

Yêu cầu

 

Để thực hiện được thì yêu cầu bạn cài  Drupal 7 và  views module.

 

Step 1: tạo 1 loại thông tin mới (content type)có tên là gallery

 

vào Structure -> Content Types (/admin/structure/types) và thêm một content mới có tên là Gallery (chú ý nhớ phần machine name cho  step 5). đơn giản quá phải không?.

 

Create custom content type

 

Step 2: tạo kiểu ảnh

 

Vào công cụ của admin đi đến Configuration -> Image Styles (your_site/admin/config/media/image-styles), và thêm 1 kiểu hình mới tên là "gallery-thumb" (kiểu ảnh này dùng để thể hiện ảnh nhỏ trong phòng trưng bày ở trang đầu.)chọn  "Create new style" và thêm "Scale and Crop" , với độ rộng  150 và chiều cao150(đây là độ rộng và chiều cao của ảnh nhỏ hiện ra ở phòng trưng bày).

 

Create image style

 

Step 3: điều chỉnh field của kiểu nội dung gallery

 

Sau khi tạo  content type có thêm gallery, chuyển đến Structure -> Content Types và nhấp chuột vào "manager fields" để đến phần nội dung của gallery

 

Manage fields

 

vì phần hình ảnh không cần nội dung chú thích nên ta xóa trường body (nếu muốn chú thích cho từng bộ ảnh thì có thể để lại cũng được)  đồng thời tạo thêm "Image Gallery" field. ở phần field settings, cuộn đến phần  "Number of value" và chọn "Unlimited".(việc chọn unlimited này để số ảnh upload lên là không giới hạn nếu bạn muốn giới hạn 1 số lượng nào đấy thì điền số vào)

 

tiếp theo vào "manage display" của Gallery content type

 

manage display

 

sau bước này bạn cần thêm 1 số ảnh ví dụ để demo (go to your_site/node/add/gallery).

 

add demo content

 

Step 4: Tạo 1 view cho gallery trên

 

vào phần tạo view ,  Structure -> Views và thêm 1 view mới:

 

create views gallery

 

Step 5: Chỉnh vào template

 

đã xong phần nội dung bây giờ vào phần thể hiện phòng trung bày ra

vào thư mục chứa theme(chú ý là mỗi theme sẽ có thưc mục khác nhau) (themes/bartik/templates/), tìm node.tpl.php, sao chép và đổi tên mới là node--gallery.tpl.php (gallery là từ chính xác của phần tạo kiểu nội dung ở bước 1,đọc thêm ở đây). mở file node-gallery.tpl.php và thay bằng code sau:

 

<div id="node-<?php print $node->nid; ?>" class="node-gallery">
    <?php
        $imgcount = count($node->field_img['und']);
        for ($i = 0; $i < $imgcount; $i++) {
        $image_uri = $node->field_img['und'][$i]['uri'];
            // url
            $masthead_raw = image_style_url('gallery-thumb', $image_uri);
    ?>
      <a href="<?php print file_create_url($node->field_img['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox">
        <img class="image<?php print ($i + 1);?>" src="http://files.megadrupal.com/blog/<?php print $masthead_raw; ?>" />
      </a>
    <?php } ?>
</div>

 

xóa cach (configuation-->) và refresh lại .

 

Step 6: Thêm những hiệu ứng

 

Adding effects

 Bây giờ thì phòng trung bày đã gồm những ảnh nhỏ có thể click vào để xem ảnh lớn.  Bài viết tiếp tục hướng dẫn thêm một số hiệu ứng như(inspire from Google+). vảo thư múc chứa css của theme (themes/bartik/css/) mở style.css, và thêm vào bên dưới:

.node-gallery {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
    margin: 0 60px 50px 0;
}
 
.node-gallery img {
    position: absolute;
    bottom:0px;
}
 
.node-gallery .image1 {left: 0px;
  z-index: 3;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}
 
.node-gallery .image2 {left: 7px;
  height: 148px;
  z-index: 2;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}
 
.node-gallery .image3 {left: 14px;
  height: 145px;
  z-index: 1;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}
 
.image1, .image2, .image3{
  border: 5px solid #F3F3F3;
  box-shadow: 1px 1px 2px #666;
  -webkit-shadow:1px 1px 2px #666;
  -webkit-transform:rotate(0deg) translate(0px);
}
 
.node-gallery:hover .image1{
   z-index: 6;
  -ms-transform: rotate(-5deg) translate(-40px, -2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-5deg) translate(-40px, 2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-5deg) translate(-40px, -2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-5deg) translate(-40px, -2px);
  -o-transform-origin:center bottom;
}
 
.node-gallery:hover .image2{
   z-index: 5;
  -ms-transform: rotate(-2deg) translate(0px, 2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-2deg) translate(0px, -2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-2deg) translate(0px, 2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-2deg) translate(0px, 2px);
  -o-transform-origin:center bottom;
}
 
.node-gallery:hover .image3{
   z-index: 4;
  -ms-transform: rotate(5deg) translate(40px,-2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(5deg) translate(40px,2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(5deg) translate(40px,-2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(5deg) translate(40px,-2px);
  -o-transform-origin:center bottom;
}

 

Step 7: thêm fancybox

 Sau bước 6 thì bạn có thể thấy hiệu ứng khi rê chuột trên ảnh. Nhưng khi click vào ảnh thì nó đến một trang ảnh . đừng lo lắng, bước tiếp theo sẽ giúp bạn tạo một fancy box để trình bày ảnh. 

đầu tiên bạn cần  download fancybox  . vào themes/bartik/ và tạo thư mục có tên là  "js", giải nén jquery.mousewheel-3.0.6.pack.js vào đây. đổi tên source thành fancybox

 tiếp theo, bạn cần thêm fancybox vào theme Bartik theme. bằng cách mở  template.php tìm hàm function bartik_process_page(&$variables) { và thêm vào:

 

drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});";
drupal_add_js($fancybox, 'inline');

 

Xong rồi đấy thử lại nhé
 
hoaiphan.com lượt dịch từ megadrupal.com

Liên hệ  

Office:
Information System faculty of  Economics and Law University- The National university of Ho Chi Minh city
Address: Quarter 3, Linh Xuan Ward, Thu Duc District, Ho Chi Minh city.
Tel: (84.8) 37244 555. Fax: (84.8) 37244 500
email: hoaiphan@uel.edu.vn
website: www.uel.edu.vn

Home:
Address: 10, 215 street, Tan Phu ward, district 9, Hồ Chí Minh City, VietNam.
Tel: +(84)905.78.3689
Email: contact@hoaiphan.com
Website: www.hoaiphan.com