Overview
Lightbox JS V2 is a simple, unobtrusive script used to overlay images on the current page. It\'s a snap to setup and works on all modern browsers. The module comes with a Lightbox2 Lite option which does not use the JQuery libraries; it is therefore less likely to conflict with anything else.
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths. Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity (and no fun!).
Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Optional: Use the title attribute if you want to show a caption.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg"
rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image
#2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image
#3</a>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
'); break; } } /** * Implementation of hook_perm(). */ function lightbox2_perm() { return array('administer lightbox2'); } /** * Implementation of hook_access(). */ function lightbox2_access($op, $node, $account) { return user_access('administer lightbox2'); } /** * Implementation of hook_menu(). */ function lightbox2_menu() { $items = array(); $items['admin/settings/lightbox2'] = array( 'title' => 'Lightbox2', 'description' => 'Allows the user to configure the lightbox2 settings', 'page callback' => 'lightbox2_settings_page', 'access callback' => 'user_access', 'access arguments' => array('administer lightbox2'), ); $items['admin/settings/lightbox2/general'] = array( 'title' => 'General', 'description' => 'Allows the user to configure the lightbox2 settings', 'page callback' => 'drupal_get_form', 'page arguments' => array('lightbox2_general_settings_form'), 'access callback' => 'user_access', 'access arguments' => array('administer lightbox2'), 'type' => MENU_DEFAULT_LOCAL_TASK, 'weight' => 0, ); $items['admin/settings/lightbox2/automatic'] = array( 'title' => 'Automatic image handling', 'description' => 'Allows the user to configure the lightbox2 automatic image handling settings', 'page callback' => 'drupal_get_form', 'page arguments' => array('lightbox2_auto_image_handling_settings_form'), 'access callback' => 'user_access', 'access arguments' => array('administer lightbox2'), 'type' => MENU_LOCAL_TASK, 'weight' => 1, ); return $items; } /** * Implementation of hook_init(). */ function lightbox2_init() { if (lightbox2_exclude_these_paths() != 1) { lightbox2_add_files(); } } /* * The default lightbox2 settings page. */ function lightbox2_settings_page($op = NULL) { $output = drupal_get_form('lightbox2_general_settings_form'); return $output; } /** * Implementation of hook_settings(). */ function lightbox2_general_settings_form() { // Add the javascript which disables / enables form elements. drupal_add_js(drupal_get_path('module', 'lightbox2') .'/js/lightbox2.js', 'module'); // Enable translation of default strings for potx. $default_strings = array(t('View Image Details'), t('Image !current of !total')); // Define Lightbox2 Lite fieldset. /* ------------------------------- */ $use_lite = variable_get('lightbox2_lite', false); $form['lightbox2_lite_options'] = array( '#type' => 'fieldset', '#title' => t('Lightbox2 Lite'), '#collapsible' => TRUE, '#collapsed' => !$use_lite, ); // Add Checkbox for Lightbox2 Lite. $form['lightbox2_lite_options']['lightbox2_lite'] = array( '#type' => 'checkbox', '#title' => t('Use Lightbox2 Lite'), '#description' => t('Checking this box will enable Lightbox2 Lite and will disable all of the automatic image node URL re-formatting features. It also disables all grouping features.'), '#default_value' => $use_lite, ); // Add Checkbox for Alternative Layout. $form['lightbox2_use_alt_layout'] = array( '#type' => 'checkbox', '#title' => t('Use Alternative Layout'), '#description' => t('Enabling this option alters the layout of the lightbox elements. This doesn\'t apply when using Lightbox Lite.'), '#default_value' => variable_get('lightbox2_use_alt_layout', false), ); // Add Checkbox for Force Navigation display. $form['lightbox2_force_show_nav'] = array( '#type' => 'checkbox', '#title' => t('Force visibility of navigation links'), '#description' => t('When viewing grouped images, the navigational links to the next and previous images are only displayed when you hover over the image. Checking this box forces these links to be displayed all the time.'), '#default_value' => variable_get('lightbox2_force_show_nav', false), ); // Add text box for image count for grouping. $form['lightbox2_image_count_str'] = array( '#type' => 'textfield', '#title' => t('Image Count Text'), '#description' => t('This text is used to display the image count underneath the image in the lightbox when image grouping is enabled. Use !current as a placeholder for the number of the current image and !total for the total number of images in the group. For example, "Image !current of !total".'), '#default_value' => variable_get('lightbox2_image_count_str', 'Image !current of !total'), ); // Add Checkbox for Zoom image. $form['lightbox2_disable_zoom'] = array( '#type' => 'checkbox', '#title' => t('Disable Zoom Feature'), '#description' => t('By default, when the image being displayed in the lightbox is larger than the browser window, it is resized to fit within the window and a zoom button is provided for users who wish to view the image in its original size. Checking this box will disable this feature and all images will be displayed without any resizing.'), '#default_value' => variable_get('lightbox2_disable_zoom', false), ); // Add Textarea for urls without lightbox. $form['lightbox2_disable_these_urls'] = array( '#type' => 'textarea', '#title' => t('Disable LightBox for these urls'), '#description' => t('List the urls where the lightbox should be disabled, e.g. \"node/add/page\". Use <front> to match the front page. Put each url on a separate line. You can use the % character as a wildcard.'), '#default_value' => variable_get('lightbox2_disable_these_urls', ''), ); // Define Advanced settings fieldset. /* ---------------------------------- */ $form['lightbox2_advanced_options'] = array( '#type' => 'fieldset', '#title' => t('Advanced settings'), '#collapsible' => TRUE, '#collapsed' => TRUE, ); // Add checkbox for overlay opacity. for ($i = 0; $i < 10; $i++) { $opacity_options["0.$i"] = "0.$i"; } $opacity_options["1.0"] = "1.0"; $form['lightbox2_advanced_options']['lightbox2_overlay_opacity'] = array( '#type' => 'select', '#title' => t('Overlay Opacity'), '#options' => $opacity_options, '#description' => t('The overlay opacity setting determines how visible or transparent the background page is behind the lightbox. The opacity value can range from 0.0 to 1.0 where 0.0 is 100% transparent and 1.0 is 100% opaque.'), '#default_value' => variable_get('lightbox2_overlay_opacity', '0.6'), ); // Allow users to decide where javascript should be loaded - header or footer. // Header is recommended so user can click on images before page has finished // loading, but footer is needed for sites in IE which use SWFObject. $form['lightbox2_advanced_options']['lightbox2_js_location'] = array( '#type' => 'select', '#title' => t('Location of Javscript'), '#options' => array('header' => t('Header'), 'footer' => t('Footer')), '#description' => t('By default, the lightbox javascript files are loaded in the HTML header. However, for sites using SWFObject to load their Flash content, the footer setting is recommended to prevent "Operation Aborted" errors in IE. If using the footer setting, please note that not all themes correctly implement the footer region and may require a small change.'), '#default_value' => variable_get('lightbox2_js_location', 'header'), ); return system_settings_form($form); } /** * Implementation of hook_settings(). */ function lightbox2_auto_image_handling_settings_form() { // Add the javascript which disables / enables form elements. drupal_add_js(drupal_get_path('module', 'lightbox2') .'/js/lightbox2.js', 'module'); // Set up a hidden variable. $form['lightbox2_lite'] = array( '#type' => 'hidden', '#value' => variable_get('lightbox2_lite', false), ); // Set Image Node Options help text. $form['image_node_options'] = array( '#value' => t('These options allow automatic URL re-formatting of Image Nodes. This removes the need for you to add \'rel="lightbox"\' to each image node link throughout your site. You can select which image sizes will trigger the lightbox and configure a list of image CSS classes which should also have their URLs automatically re-formatted. This feature is not available when using Lightbox2 Lite.'), ); // Define Image Nodes settings fieldset. /* ---------------------------------- */ $form['lightbox2_image_node_options'] = array( '#type' => 'fieldset', '#title' => t('Image node settings'), '#collapsible' => TRUE, '#collapsed' => FALSE, ); // Add Checkbox for Image Node. $form['lightbox2_image_node_options']['lightbox2_image_node'] = array( '#type' => 'checkbox', '#title' => t('Enable for Image Nodes'), '#description' => t('Checking this box will enable automatic URL formatting for Image Nodes.'), '#default_value' => variable_get('lightbox2_image_node', true), ); // Add DropDown for list of available image sizes. if (module_exists('image')) { $sizes = _image_get_sizes(); foreach ($sizes as $size_key => $size) { if ($size_key == 'original' or $size_key == '_original') { $size_key = ''; } $size_options[$size_key] = $size['label']; } $form['lightbox2_image_node_options']['lightbox2_display_image_size'] = array( '#type' => 'select', '#title' => t('Lightbox image display size'), '#options' => $size_options, '#default_value' => variable_get('lightbox2_display_image_size', ''), '#description' => t('Select which image size will be loaded in the lightbox. This only applies to images uploaded with the Image module.'), ); $form['lightbox2_image_node_options']['lightbox2_trigger_image_size'] = array( '#type' => 'select', '#multiple' => TRUE, '#title' => t('Image trigger size'), '#options' => $size_options, '#default_value' => variable_get('lightbox2_trigger_image_size', array('thumbnail' => t('Thumbnail'))), '#description' => t('Select which image size, when clicked on, will automatically trigger the lightbox. This only applies to images uploaded with the Image module.'), ); } // Add Checkbox for disabling lightbox for gallery lists. $form['lightbox2_image_node_options']['lightbox2_disable_nested_galleries'] = array( '#type' => 'checkbox', '#title' => t('Disable Lightbox for Gallery Lists'), '#description' => t('Checking this box will disable the lightbox for images in gallery lists. This means it is possible to open a gallery by clicking on the teaser image, but the lightbox will still appear when viewing images within the gallery. This only applies to image galleries created with the "image gallery" module.'), '#default_value' => variable_get('lightbox2_disable_nested_galleries', true), ); // Add Checkbox for Flickr Image support. $form['lightbox2_flickr'] = array( '#type' => 'checkbox', '#title' => t('Enable for Flickr images'), '#description' => t('Checking this box will enable automatic URL formatting for Flickr images.'), '#default_value' => variable_get('lightbox2_flickr', true), ); // Add Checkbox for Inline Image support. $form['lightbox2_inline'] = array( '#type' => 'checkbox', '#title' => t('Enable for Inline images'), '#description' => t('Checking this box will enable automatic URL formatting for images displayed by the Inline module.'), '#default_value' => variable_get('lightbox2_inline', true), ); // Add Checkbox for Image Assist custom size images. $form['lightbox2_image_assist_custom'] = array( '#type' => 'checkbox', '#title' => t('Enable for Image Assist custom size images'), '#description' => t('Checking this box will enable automatic URL formatting for custom size images displayed by the Image Assist module.'), '#default_value' => variable_get('lightbox2_image_assist_custom', true), ); // Add text box for custom trigger classes. $form['lightbox2_custom_trigger_classes'] = array( '#type' => 'textarea', '#title' => t('Custom image trigger classes'), '#description' => t('List the image classes which should trigger the lightbox when clicked on. Put each class on a separate line.'), '#default_value' => variable_get('lightbox2_custom_trigger_classes', ''), ); // Add text box for link text to node. $form['lightbox2_node_link_text'] = array( '#type' => 'textfield', '#title' => t('Text for Image Page Link'), '#description' => t('This is the text that will appear as the link to the image page underneath the image in the lightbox'), '#default_value' => variable_get('lightbox2_node_link_text', 'View Image Details'), ); // Add checkbox for node link target. $form['lightbox2_node_link_target'] = array( '#type' => 'checkbox', '#title' => t('Open Image Page in New Window'), '#description' => t('This controls whether the link to the image page underneath the image is opened in a new window or the current window.'), '#default_value' => variable_get('lightbox2_node_link_target', false), '#return_value' => '_blank', ); // Add Checkbox for Image Node Grouping. $form['lightbox2_image_group'] = array( '#type' => 'checkbox', '#title' => t('Enable Grouping'), '#description' => t('Checking this box will enable automatic grouping of images on a page. Useful for image galleries.'), '#default_value' => variable_get('lightbox2_image_group', true), ); // Add Checkbox for disabling lightbox for acidfree gallery lists. if (module_exists("acidfree")) { $form['lightbox2_disable_nested_acidfree_galleries'] = array( '#type' => 'checkbox', '#title' => t('Disable Lightbox for Acidfree Gallery Lists'), '#description' => t('Checking this box will disable the lightbox for images in gallery lists. This means it is possible to open a gallery by clicking on the teaser image, but the lightbox will still appear when viewing images within the gallery. This only applies to image galleries created with the "acidfree" module.'), '#default_value' => variable_get('lightbox2_disable_nested_acidfree_galleries', true), ); } // Define Imagefield settings fieldset. /* ---------------------------------- */ if (module_exists('imagefield') && module_exists('imagecache')) { $form['lightbox2_imagefield_options'] = array( '#type' => 'fieldset', '#title' => t('Imagefield settings'), '#collapsible' => TRUE, '#collapsed' => TRUE, ); // Add checkbox for imagefield grouping. $form['lightbox2_imagefield_options']['lightbox2_imagefield_group_node_id'] = array( '#type' => 'checkbox', '#title' => t('Group Imagefields by Node Id'), '#description' => t('By default, imagefields in views are grouped by the field name they appear in the view in. Enabling this option allows them to be grouped by field name and node id (where available).'), '#default_value' => variable_get('lightbox2_imagefield_group_node_id', FALSE), ); } return system_settings_form($form); } /** * Implementation of hook_filter_tips(). */ function lightbox2_filter_tips($delta, $format, $long = false) { if ($delta == 0) { if (!$long) { return t('Image links with \'rel="lightbox"\' in the <a> tag will appear in a Lightbox when clicked on.'); } else { $output = ''. t('To add a lightbox to your images, add rel="lightbox" attribute to any link tag to activate the lightbox. For example:') .'
'; $output .= ''. t('<a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>
') .'
'. t('The title attribute in the link tag is optional. The addition of this attribute enables the display of a caption with the image displayed in the lightbox.') .'
'; $output .= ''. t('If you have a set of related images that you would like to group, then you will need to include a group name between square brackets in the rel attribute. For example:') .'
'; $output .= ''. t('<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
') .'
<a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
'. t('There are no limits to the number of image sets per page or how many images are allowed in each set.') .'
'; $output .= ''. t('If you wish to turn the caption into a link, format your caption in the following way:') .'
'; $output .= ''. t('<a href="image-1.jpg" rel="lightbox" title=\'<a href="http://www.yourlink.com">View Image Details</a>\'>image #1</a>
') .'