Hướng dẫn sử dụng plugin Unite Gallery – Prestashop Module

Plugin Unite Gallery – Prestashop Module là một plugin trả phí của themeforest, hiện nó có giá là $19. Với rất nhiều tính năng mạnh mẽ của mình nó giúp bạn tùy chỉnh các hình ảnh trong bộ sưu tập của mình. Khi bạn mua plugin này về thì bạn sẽ nhận được rất nhiều tính năng như:
+ Hơn 120 tùy chọn cho bộ sưu tập của bạn.
+ Các bộ sưu tập phù hợp với 4 loại video: youtube, vimeo, html5 video và wistia.
+ Được xây dựng cao cấp trong phương tiện truyền thông lightbox.
+ Bạn có thể kết hợp các mục hình ảnh và video trong mỗi chủ đề.
+ Các bộ sưu tập có tác dụng zoom độc đáo được áp dụng bằng các nút hoặc lăn chuột.

Cách cài đặt và sử dụng plugin Unite Gallery – Prestashop Module.
Sau khi bạn mua thành công plugin này thì bạn cần upload nó lên trang wordpress của mình, bạn vào Plugins -> Add new rồi chọn mục Upload Plugin để tải plugin lên, (bạn có thể tham khảo thêm cách cài đặt và kích hoạt plugin trả phí trong Wordpress để nắm rõ hơn nhé).
Tiếp theo bạn chèn đoạn code sau vào phần <head> trong trang của bạn

<head>

<!-- ... [OTHER INCLUDES] ... -->

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>		
 <script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>		 
  
 <link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
 <script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
 <link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />

</head>

Sau đó trong phần body thì bạn chèn đoạn code sau

 <div id="gallery" style="display:none;">
   
    <img alt="Image 1 Title" src="thumbs/image1.jpg"
       data-image="images/image1.jpg"
       data-description="Image 1 Description">

    <img alt="Image 2 Title" src="thumbs/image2.jpg"
       data-image="images/image02.jpg"
       data-description="Image 2 Description">
    
</div>

trong đó:
+ alt là thẻ tiêu đề của ảnh.
+ src là đường dẫn đến ảnh thumbnail của bài viết.
+ data-image: đường dẫn của các ảnh lớn.
+ data-description: mô tả ảnh.
Sau đó bạn thêm đoạn code javascript sau để bắt đầu bộ sưu tập nhé.

<script type="text/javascript"> 

    jQuery(document).ready(function(){ 
       jQuery("#gallery").unitegallery();
    }); 
</script>

Để cài đặt các tính năng video thì bạn chèn đoạn code sau:

<img alt="Youtube With Images"
   data-type="youtube"
   src="thumbs/youtube_thumb.jpg"
   data-image="images/youtube_image.jpg"
   data-videoid="A3PDXmYoF5U"
   data-description="Youtube video description">

<img alt="Youtube Without Images"
   data-type="youtube"
   data-videoid="A3PDXmYoF5U"
   data-description="Youtube video description">

<img alt="Vimeo Video"
   data-type="vimeo"
   src="thumbs/vimeo_thumb.jpg"
   data-image="images/vimeo_image.jpg"
   data-videoid="73234449"
   data-description="Vimeo Video Description">

<img alt="Html5 Video"
   src="thumbs/html5_video_thumb.png"\
   data-type="html5video"
   data-image="thumbs/html5_video_image.png"
   data-videoogv="http://video-js.zencoder.com/oceans-clip.ogv"
   data-videowebm="http://video-js.zencoder.com/oceans-clip.webm"
   data-videomp4="http://video-js.zencoder.com/oceans-clip.mp4"
   data-description="Html5 Video Description">

<img alt="Wistia Video"
   src="thumbs/wistia_thumb.jpg"
   data-image="images/wistia_image.jpg"
   data-videoid="9oedgxuciv"
   data-description="Wistia video description!">
   
<img alt="Sound Cloud Track" 
   src="thumbs/sound_cloud_thumb.jpg"
   data-type="soundcloud"
   data-image="images/sound_cloud_image.jpg"
   data-trackid="8390970"
   data-description="SoundCloud track description">

Như vậy là các bạn đã có thể sử dụng mọi tính năng của plugin Unite Gallery – Prestashop Module rồi nhé, vì đây là một plugin trả phí nên bạn có thể hoàn toàn yên tâm về chất lượng của nó.
Chúc các bạn thành công!

Leave a Reply

Your email address will not be published. Required fields are marked *