Hướng dẫn Colorbox Pop-ups cho Drupal Images và Videos

Hướng dẫn Colorbox Pop-ups cho Drupal Images và Videos

Hàm kiểm tra nguyên tố nhận vào một số nguyên n và trả lại kết quả là true

Tính và in ra trung bình cộng của các số âm, số dương trong array Pascal

Hướng dẫn Colorbox Pop-ups cho Drupal Images và Videos

A lot of sites like to show media inside pop-ups. Using pop-ups can make it easier for visitors to quicky browse through multiple images or videos.

In this tutorial, we're going to show you how to use the Colorbox pop-up with Drupal.

We'll see how to display both image and video fields inside a pop-up window.

Installation

Install these two modules:

Now we need to get the actual Colorbox files:

  • Download the Colorbox plugin from https://github.com/jackmoore/colorbox/archive/1.x.zip
  • Unpack those files and rename the folder to "colorbox"
  • Upload those files to your "sites/all/libraries" directory. Make sure the path to the plugin file becomes: "sites/all/libraries/colorbox/jquery.colorbox-min.js"

Now configure Colorbox:

  • Check the box "enable colorbox load"
  • Go to Configuration > Colorbox

Colorbox with Image Fields

  • Go to Structure > Content types > Manage fields
  • Add an image field
  • Click the Manage Display tab
  • Set the format the image to Colorbox.

media_1390491220707.png

  • Click Save.
  • You'll now see some formatting options for the colorbox on this field:

media_1390491203540.png

  • Click the small cog icon and those images will show:

media_1390491243285.png

  • Go and create a content item using your new image field. In this example, I've uploaded 4 beach photos:

media_1390492110401.png

  • Click any image and you'll get the videos showing inside a colorbox. If this doesn't happen the first time for you, clear Drupal's cache.

media_1390492183128.png

Colorbox with Video Fields

Now we'll show you to display video inside a pop-up. We're going to use the Video Embed Field.

  • Install the Video Embed Field module.
  • Go to Structure > Content types > Manage fields
  • Add a Video Embed field
  • Click Manage Display
  • Set the Format to Thumbnail Preview w/Colorbox:

media_1390494073507.png

  • Go and create a content item using your new video field:

media_1390493566607.png

  • Drupal will automatically create a thumbnail for you from the video:

media_1390493598392.png

  • Click the thumbnail and you'll get the video inside a pop-up:

Hướng dẫn Colorbox Pop-ups cho Drupal Images và Videos

 

Tags: 
Drupal Tutorials
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
More about Tommy Tran

Bài cùng chuyên mục

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Nokia Lumia 900

Giá Lumia 900 ở Mỹ giảm xuống một nửa

Bắt đầu từ hôm qua (15/7), giá bán Lumia 900 của nhà mạng AT&T đã giảm xuống còn 49,99 USD kèm hợp đồng 2 năm, bằng một nửa so với mức 99,99 USD khi họ bán ra smartphone này vào tháng 4.

Lĩnh vực lọc nước dân dụng - Xuất khẩu trên 150 nước đến năm 2040

Lĩnh vực lọc nước dân dụng - Xuất khẩu trên 150 nước đến năm 2040

Với Karofi, trong năm qua, doanh nghiệp vẫn duy trì tăng trưởng hai con số nhờ ứng dụng những giải pháp công nghệ mới vào thiết bị, sản phẩm.

CMS WordPress

Nền tảng blog WordPress được tích hợp với Facebook

Facebook cho biết vừa cung cấp một plugin mới cho phép các chủ blog sử dụng nền tảng WordPress có thể dễ dàng tích hợp các tính năng của Facebook, chẳng hạn như đăng lên Timeline.

Công ty diệt chuột T&C

 

Diet con trung

Donate

Paypal donate