*/
var Lightbox = {
- overlayOpacity : 0.6, // Controls transparency of shadow overlay.
+ overlayOpacity : 0.8, // Controls transparency of shadow overlay.
+ overlayColor : '000', // Controls colour of shadow overlay.
+ // Controls the order of the lightbox resizing animation sequence.
+ resizeSequence: 0, // 0: simultaneous, 1: width then height, 2: height then width.
resizeSpeed: 'normal', // Controls the speed of the lightbox resizing animation.
fadeInSpeed: 'normal', // Controls the speed of the image and overlay appearance.
slideDownSpeed: 'slow', // Controls the speed of the image details appearance.
imageNum : null,
activeImage : null,
inprogress : false,
+ disableResize : false,
disableZoom : false,
isZoomedIn : false,
rtl : false,
var settings = Drupal.settings.lightbox2;
Lightbox.overlayOpacity = settings.overlay_opacity;
+ Lightbox.overlayColor = settings.overlay_color;
+ Lightbox.resizeSequence = settings.resize_sequence;
+ Lightbox.resizeSpeed = settings.resize_speed;
+ Lightbox.fadeInSpeed = settings.fade_in_speed;
+ Lightbox.slideDownSpeed = settings.slide_down_speed;
Lightbox.rtl = settings.rtl;
+ Lightbox.disableResize = settings.disable_resize;
Lightbox.disableZoom = settings.disable_zoom;
Lightbox.slideInterval = settings.slideshow_interval;
Lightbox.showPlayPause = settings.show_play_pause;
width: '100%',
zIndex: '10090',
height: arrayPageSize[1] + 'px',
+ backgroundColor : '#' + Lightbox.overlayColor,
opacity : Lightbox.overlayOpacity
}).fadeIn(Lightbox.fadeInSpeed);
Lightbox.activeImage = imageNum;
var settings = Drupal.settings.lightbox2;
- if (Lightbox.disableZoom && !Lightbox.isSlideshow) {
+ if (Lightbox.disableResize && !Lightbox.isSlideshow) {
zoomIn = true;
}
Lightbox.isZoomedIn = zoomIn;
$('#bottomNavZoomOut, #bottomNavZoom').hide();
if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) {
ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;
- if (!Lightbox.isSlideshow) {
+ if (!Lightbox.disableZoom && !Lightbox.isSlideshow) {
$('#bottomNavZoom').css({zIndex: '10500'}).show();
}
}
if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) {
// Only display zoom out button if not a slideshow and if the
// buttons aren't disabled.
- if (!Lightbox.disableZoom && Lightbox.isSlideshow === false) {
+ if (!Lightbox.disableResize && Lightbox.isSlideshow === false && !Lightbox.disableZoom) {
$('#bottomNavZoomOut').css({zIndex: '10500'}).show();
}
}
wDiff = this.widthCurrent - widthNew;
hDiff = this.heightCurrent - heightNew;
- $('#outerImageContainer').animate({width: widthNew, height: heightNew}, Lightbox.resizeSpeed, 'linear', function() {
- Lightbox.showImage();
- });
+ // Detect animation sequence.
+ if (Lightbox.resizeSequence) {
+ var animate1 = {width: widthNew};
+ var animate2 = {height: heightNew};
+ if (Lightbox.resizeSequence == 2) {
+ animate1 = {height: heightNew};
+ animate2 = {width: widthNew};
+ }
+ $('#outerImageContainer').animate(animate1, Lightbox.resizeSpeed).animate(animate2, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showImage(); });
+ }
+ // Simultaneous.
+ else {
+ $('#outerImageContainer').animate({width: widthNew, height: heightNew}, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showImage(); });
+ }
// If new and old image are same size and no scaling transition is
// necessary. Do a quick pause to prevent image flicker.
}
}
// Zoom in.
- else if (key == 'z' && !Lightbox.disableZoom && !Lightbox.isSlideshow && !Lightbox.isLightframe) {
+ else if (key == 'z' && !Lightbox.disableResize && !Lightbox.disableZoom && !Lightbox.isSlideshow && !Lightbox.isLightframe) {
if (Lightbox.isZoomedIn) {
Lightbox.changeImage(Lightbox.activeImage, false);
}
}
}
+function zoom_handler(event) {
+ if ($("input[@name=lightbox2_disable_resize]:checked").val() == 1) {
+ $("input[@name=lightbox2_disable_zoom]").attr("disabled", "disabled");
+ }
+ else {
+ $("input[@name=lightbox2_disable_zoom]").removeAttr("disabled");
+ }
+}
+
function lightbox2_lite_general_handler(event) {
// Enable / disable the non-lightbox2-lite options.
if ($("input[@name=lightbox2_lite]:checked").val() == 1) {
$("input[@name=lightbox2_use_alt_layout]").attr("disabled", "disabled");
$("input[@name=lightbox2_force_show_nav]").attr("disabled", "disabled");
+ $("input[@name=lightbox2_disable_resize]").attr("disabled", "disabled");
$("input[@name=lightbox2_disable_zoom]").attr("disabled", "disabled");
$("input[@name=lightbox2_enable_video]").attr("disabled", "disabled");
$("input[@name=lightbox2_image_count_str]").attr("disabled", "disabled");
$("input[@name=lightbox2_page_count_str]").attr("disabled", "disabled");
$("select[@name=lightbox2_display_image_size]").attr("disabled", "disabled");
$("select[@name='lightbox2_trigger_image_size[]']").attr("disabled", "disabled");
- $("select[@name=lightbox2_overlay_opacity]").attr("disabled", "disabled");
$("select[@name=lightbox2_image_ncck_group_node_id]").attr("disabled", "disabled");
$("select[@name=lightbox2_imagefield_group_node_id]").attr("disabled", "disabled");
$("input[@name=lightbox2_imagefield_use_node_title]").attr("disabled", "disabled");
+ $("select[@name=lightbox2_resize_sequence]").attr("disabled", "disabled");
+ $("input[@name=lightbox2_resize_speed]").attr("disabled", "disabled");
+ $("input[@name=lightbox2_fadein_speed]").attr("disabled", "disabled");
+ $("input[@name=lightbox2_slidedown_speed]").attr("disabled", "disabled");
}
else {
$("input[@name=lightbox2_use_alt_layout]").removeAttr("disabled");
$("input[@name=lightbox2_force_show_nav]").removeAttr("disabled");
+ $("input[@name=lightbox2_disable_resize]").removeAttr("disabled");
$("input[@name=lightbox2_disable_zoom]").removeAttr("disabled");
$("input[@name=lightbox2_enable_video]").removeAttr("disabled");
$("input[@name=lightbox2_image_count_str]").removeAttr("disabled");
$("input[@name=lightbox2_page_count_str]").removeAttr("disabled");
$("select[@name=lightbox2_display_image_size]").removeAttr("disabled");
$("select[@name='lightbox2_trigger_image_size[]']").removeAttr("disabled");
- $("select[@name=lightbox2_overlay_opacity]").removeAttr("disabled");
$("select[@name=lightbox2_image_ncck_group_node_id]").removeAttr("disabled");
$("select[@name=lightbox2_imagefield_group_node_id]").removeAttr("disabled");
$("input[@name=lightbox2_imagefield_use_node_title]").removeAttr("disabled");
+ $("select[@name=lightbox2_resize_sequence]").removeAttr("disabled");
+ $("input[@name=lightbox2_resize_speed]").removeAttr("disabled");
+ $("input[@name=lightbox2_fadein_speed]").removeAttr("disabled");
+ $("input[@name=lightbox2_slidedown_speed]").removeAttr("disabled");
alt_layout_handler();
+ zoom_handler();
}
}
image_node_handler();
$("input[@name=lightbox2_lite]").bind("click", lightbox2_lite_general_handler);
$("input[@name=lightbox2_use_alt_layout]").bind("click", alt_layout_handler);
+ $("input[@name=lightbox2_disable_resize]").bind("click", zoom_handler);
$("select[@name=lightbox2_image_node]").bind("click", image_node_handler);
$("select[@name=lightbox2_flickr]").bind("click", image_node_handler);
$("select[@name=lightbox2_gallery2_blocks]").bind("click", image_node_handler);
// Enable translation of default strings for potx.
$default_strings = array(t('View Image Details'), t('Image !current of !total'), t('Page !current of !total'));
+ // Define Lightbox2 layout fieldset.
+ /* --------------------------------- */
+ $form['layout_fieldset'] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Layout Settings'),
+ '#collapsible' => TRUE,
+ '#collapsed' => FALSE,
+ );
+
// Define Lightbox2 Lite fieldset.
/* ------------------------------- */
$use_lite = variable_get('lightbox2_lite', FALSE);
- $form['lightbox2_lite_options'] = array(
+ $form['layout_fieldset']['lightbox2_lite_options'] = array(
'#type' => 'fieldset',
'#title' => t('Lightbox2 Lite'),
'#collapsible' => TRUE,
);
// Add checkbox for Lightbox2 Lite.
- $form['lightbox2_lite_options']['lightbox2_lite'] = array(
+ $form['layout_fieldset']['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 URL re-formatting features. It also disables all grouping features.'),
// Add checkbox for alternative layout.
- $form['lightbox2_use_alt_layout'] = array(
+ $form['layout_fieldset']['lightbox2_use_alt_layout'] = array(
'#type' => 'checkbox',
'#title' => t('Use Alternative Layout'),
'#description' => t('Enabling this option alters the layout of the lightbox elements. In the alternative layout the navigational links appear under the image with the caption text, instead of being overlayed on the image itself. This doesn\'t apply when using Lightbox Lite.'),
);
// Add checkbox for force navigation display.
- $form['lightbox2_force_show_nav'] = array(
+ $form['layout_fieldset']['lightbox2_force_show_nav'] = array(
'#type' => 'checkbox',
'#title' => t('Force visibility of navigation links'),
'#description' => t('When viewing grouped images using the default layout, 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.'),
);
// Add text box for image count for grouping.
- $form['lightbox2_image_count_str'] = array(
+ $form['layout_fieldset']['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".'),
);
// Add text box for page count for grouping.
- $form['lightbox2_page_count_str'] = array(
+ $form['layout_fieldset']['lightbox2_page_count_str'] = array(
'#type' => 'textfield',
'#title' => t('Page Count Text'),
'#description' => t('This text is used to display the page count underneath HTML content displayed in the lightbox when using groups. Use !current as a placeholder for the number of the current page and !total for the total number of pages in the group. For example, "Page !current of !total".'),
'#default_value' => variable_get('lightbox2_page_count_str', 'Page !current of !total'),
);
- // Add checkbox for zoom image.
- $form['lightbox2_disable_zoom'] = array(
+
+ // Define Lightbox2 zoom fieldset.
+ /* -------------------------------- */
+ $form['zoom_fieldset'] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Image Resize Settings'),
+ '#collapsible' => TRUE,
+ '#collapsed' => TRUE,
+ );
+
+ // Add checkbox for resize image.
+ $form['zoom_fieldset']['lightbox2_disable_resize'] = 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_resize', FALSE),
+ );
+
+ // Add checkbox for zoom image.
+ $form['zoom_fieldset']['lightbox2_disable_zoom'] = array(
+ '#type' => 'checkbox',
+ '#title' => t('Disable Zoom In / Out Feature'),
+ '#description' => t('When the image being displayed in the lightbox is resized to fit in the browser window, a "zoom in" button is shown. This allows the user to zoom in to see the original full size image. They will then see a "zoom out" button which will allow them to see the smaller resized version. Checking this box will prevent these buttons from appearing.'),
'#default_value' => variable_get('lightbox2_disable_zoom', FALSE),
);
+
+ // Define Lightbox2 video fieldset.
+ /* -------------------------------- */
+ $form['video_fieldset'] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Video Settings'),
+ '#collapsible' => TRUE,
+ '#collapsed' => TRUE,
+ );
+
// Add checkbox for video support.
- $form['lightbox2_enable_video'] = array(
+ $form['video_fieldset']['lightbox2_enable_video'] = array(
'#type' => 'checkbox',
'#title' => t('Enable Video Support'),
'#description' => t('By default, video support is disabled in order to reduce the amount of javascript needed. Checking this box will enable it.'),
'#type' => 'fieldset',
'#title' => t('Page Specific Lightbox2 Settings'),
'#collapsible' => TRUE,
- '#collapsed' => FALSE,
+ '#collapsed' => TRUE,
);
// Add radio buttons for the actions to take for the listed pages, i.e.
// disable or enable the lightbox functionality.
// Define cck settings fieldset.
/* ---------------------------------- */
if ((module_exists('emfield') && module_exists('image_ncck')) || (module_exists('imagefield') && module_exists('imagecache'))) {
- $form['lightbox2_cck_options'] = array(
+ $form['cck_options'] = array(
'#type' => 'fieldset',
'#title' => t('CCK Display Settings'),
'#collapsible' => TRUE,
// Add checkbox for emfield image_ncck grouping.
if (module_exists('emfield') && module_exists('image_ncck')) {
- $form['lightbox2_cck_options']['lightbox2_image_ncck_group_node_id'] = array(
+ $form['cck_options']['lightbox2_image_ncck_group_node_id'] = array(
'#type' => 'select',
'#title' => t('Select Emfield Image Grouping in Views'),
'#description' => t('By default, emfield images in views are grouped by the field name they appear in the view in. You can override that grouping here.'),
// Add checkbox for imagefield grouping.
if (module_exists('imagefield') && module_exists('imagecache')) {
- $form['lightbox2_cck_options']['lightbox2_imagefield_group_node_id'] = array(
+ $form['cck_options']['lightbox2_imagefield_group_node_id'] = array(
'#type' => 'select',
'#title' => t('Select Imagefield Grouping in Views'),
'#description' => t('By default, imagefields in views are grouped by the field name they appear in the view in. You can override that grouping here.'),
'#options' => $cck_options,
'#default_value' => variable_get('lightbox2_imagefield_group_node_id', 1),
);
- $form['lightbox2_cck_options']['lightbox2_imagefield_use_node_title'] = array(
+ $form['cck_options']['lightbox2_imagefield_use_node_title'] = array(
'#type' => 'checkbox',
'#title' => t('Use Node Title as Caption'),
'#description' => t('By default, the caption for imagefields is the image title text configured. If no title is configured, then the alt text will be used. This option allows you to override that and always display the node title as the image caption.'),
// Define advanced settings fieldset.
/* ---------------------------------- */
- $form['lightbox2_advanced_options'] = array(
+ $form['advanced_options'] = array(
'#type' => 'fieldset',
'#title' => t('Advanced settings'),
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
+ // 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['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'),
+ );
+
+
+ // Define overlay settings fieldset.
+ /* ---------------------------------- */
+ $form['advanced_options']['overlay_settings'] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Overlay 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(
+ $form['advanced_options']['overlay_settings']['lightbox2_overlay_opacity'] = array(
'#type' => 'select',
'#title' => t('Overlay Opacity'),
'#options' => $opacity_options,
'#description' => t('The overlay opacity setting determines how visible 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'),
+ '#default_value' => variable_get('lightbox2_overlay_opacity', 0.8),
+ );
+ $form['advanced_options']['overlay_settings']['lightbox2_overlay_color'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Overlay Color'),
+ '#field_prefix' => '#',
+ '#size' => 6,
+ '#maxlength' => 6,
+ '#description' => t('Enter a hexadecimal color value for the overlay. For example <code>000</code> or <code>000000</code> for black).'),
+ '#default_value' => variable_get('lightbox2_overlay_color', '000'),
);
- // 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(
+ // Define animation settings fieldset.
+ /* ----------------------------------- */
+ $form['advanced_options']['animation_settings'] = array(
+ '#type' => 'fieldset',
+ '#title' => t('Animation settings'),
+ '#collapsible' => TRUE,
+ '#collapsed' => TRUE,
+ );
+ // Set animation help text.
+ $form['advanced_options']['animation_settings']['animation_options_help'] = array(
+ '#value' => '<p>'. t("These options aren't available when using Lightbox2 Lite.") .'</p>',
+ );
+ $resize_sequence_options = array(
+ t('Simultaneous'),
+ t('Width then height'),
+ t('Height then width'),
+ );
+ $form['advanced_options']['animation_settings']['lightbox2_resize_sequence'] = 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'),
+ '#title' => t('Resize Sequence'),
+ '#options' => $resize_sequence_options,
+ '#description' => t('The sequence to use for the resizing animation.'),
+ '#default_value' => variable_get('lightbox2_resize_sequence', 0),
+ );
+ $form['advanced_options']['animation_settings']['lightbox2_resize_speed'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Resize Duration'),
+ '#size' => 5,
+ '#maxlength' => 5,
+ '#description' => t('The duration (in seconds) of the resizing animation. Enter a value between 0 and 10.'),
+ '#default_value' => variable_get('lightbox2_resize_speed', 0.4),
+ );
+ $form['advanced_options']['animation_settings']['lightbox2_fadein_speed'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Appearance Duration'),
+ '#size' => 5,
+ '#maxlength' => 5,
+ '#description' => t('The duration (in seconds) of the lightbox appearance animation. Enter a value between 0 and 10.'),
+ '#default_value' => variable_get('lightbox2_fadein_speed', 0.4),
+ );
+
+ $form['advanced_options']['animation_settings']['lightbox2_slidedown_speed'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Caption Slide Down Duration'),
+ '#size' => 5,
+ '#maxlength' => 5,
+ '#description' => t('The duration (in seconds) of the caption sliding-down animation. Enter a value between 0 and 10.'),
+ '#default_value' => variable_get('lightbox2_slidedown_speed', 0.6),
);
}
/**
+ * Validation function for the general configuration form.
+ *
+ * Ensure that the hex color value submitted is valid and that the speeds are
+ * numeric.
+ */
+function lightbox2_general_settings_form_validate($form_id, $form_values) {
+ $hex_colour = $form_values['lightbox2_overlay_color'];
+ $resize_speed = $form_values['lightbox2_resize_speed'];
+ $fadein_speed = $form_values['lightbox2_fadein_speed'];
+ $slide_down_speed = $form_values['lightbox2_slidedown_speed'];
+
+ if (!_lightbox2_validate_hex_color($hex_colour)) {
+ form_set_error('lightbox2_overlay_color', t('You must enter a properly formed hex value.'));
+ }
+
+ if (!is_numeric($resize_speed) || $resize_speed < 0 || $resize_speed > 10) {
+ form_set_error('lightbox2_resize_speed', t('You must enter a duration between 0 and 10 seconds.'));
+ }
+
+ if (!is_numeric($fadein_speed) || $fadein_speed < 0 || $fadein_speed > 10) {
+ form_set_error('lightbox2_fadein_speed', t('You must enter a duration between 0 and 10 seconds.'));
+ }
+
+ if (!is_numeric($slide_down_speed) || $slide_down_speed < 0 || $slide_down_speed > 10) {
+ form_set_error('lightbox2_slidedown_speed', t('You must enter a duration between 0 and 10 seconds.'));
+ }
+}
+
+/**
* Validation function for the slideshow configuration form.
*
* Ensure that the slideshow interval submitted is numeric.
}
}
+
+
/**
* Configuration form for controlling the iframe behaviour.
*/
'file_path' => base_path() .'(\w\w/)'. file_directory_path(),
'base_path' => base_path(),
'default_image' => base_path() . $path .'/images/brokenimage.jpg',
- 'overlay_opacity' => variable_get('lightbox2_overlay_opacity', '0.6'),
+ 'overlay_opacity' => variable_get('lightbox2_overlay_opacity', 0.8),
+ 'overlay_color' => variable_get('lightbox2_overlay_color', '000'),
+ 'resize_sequence' => variable_get('lightbox2_resize_sequence', 0),
+ 'resize_speed' => 1000 * variable_get('lightbox2_resize_speed', 0.4),
+ 'fade_in_speed' => 1000 * variable_get('lightbox2_fadein_speed', 0.4),
+ 'slide_down_speed' => 1000 * variable_get('lightbox2_slidedown_speed', 0.6),
'use_alt_layout' => variable_get('lightbox2_use_alt_layout', FALSE),
+ 'disable_resize' => variable_get('lightbox2_disable_resize', FALSE),
'disable_zoom' => variable_get('lightbox2_disable_zoom', FALSE),
'force_show_nav' => variable_get('lightbox2_force_show_nav', FALSE),
'node_link_text' => check_plain(variable_get('lightbox2_node_link_text', 'View Image Details')),
return false;
}
+
+/**
+ * Validate a hex color value.
+ *
+ * @param $hex
+ * The hex color string to validate.
+ * @return
+ * TRUE if $hex is a valid hex color value.
+ */
+function _lightbox2_validate_hex_color($hex) {
+ return preg_match('!^[a-f0-9]{3}([a-f0-9]{3})?$!i', $hex);
+}
+
projects / project/lightbox2.git / commitdiff