Colorbox Pop-ups with Drupal Images and 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:
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"
- Go to Configuration > Colorbox
- Check the box "enable colorbox load"
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.
- Click Save.
- You'll now see some formatting options for the colorbox on this field:
- Click the small cog icon and those images will show:
- Go and create a content item using your new image field. In this example, I've uploaded 4 beach photos:
- 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.
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:
- Go and create a content item using your new video field:
- Drupal will automatically create a thumbnail for you from the video:
- Click the thumbnail and you'll get the video inside a pop-up:
No comments:
Post a Comment