Colorbox is a light-weight, customizable lightbox plugin for jQuery. In this video, I will show you how to open events in a modal popup using the Colorbox module and library.
Install Colorbox Plugin
- Download the latest version of Colorbox plugin
- Unpack the file and rename it to "colorbox"
- Copy the file to "sites/all/libraries" directory (so that "sites/all/libraries/colorbox/jquery.colorbox-min.js" exists)
- Clear the cache
- Go to "Configuration => Development => Performance" (admin/config/development/performance)
- Clear cache
- (Clear all caches)
- Go to "Modules" (admin/modules) and enable:
- (Save configuration)
To confirm that the Colorbox plugin is installed correctly:
- Go to "Reports => Status report" (admin/reports/status)
- The row for "Colorbox plugin" should be green
Now that we have installed Colorbox, let's edit the view.
- "Go to structure => Views => Calendar" (admin/structure/views/view/calendar)
- Click "Settings"
- Click "Colorbox options"
- [x] Open events with Colorbox
- [x] Open events in iFrame
- Classname or ID selector: #content (This is the selector that you can target in your CSS.)
- Width: 80% (Sets the width of the colorbox.)
- Height: 80% (Sets the height of the colorbox.)
- (Apply(all displays))
- (Save) (Save the view)
Click the "view Page" button to view the calendar. Simply click on an event and it will load the event in a modal popup.
In the next video, we'll take a look at how to color code the events on our calendar.