From: kroimon Date: Sat, 11 Jun 2011 00:47:45 +0200 Subject: Restructured the options form and added a bunch of new options. --- galleria.module | 71 +++++++-- includes/galleria.admin.inc | 364 ++++++++++++++++++++++++++++++++++--------- 2 files changed, 347 insertions(+), 88 deletions(-) diff --git a/galleria.module b/galleria.module index 8b2ac45..597040f 100644 --- a/galleria.module +++ b/galleria.module @@ -400,26 +400,56 @@ function galleria_includes($theme) { */ function galleria_add_settings(&$js, $path) { // set javascript gallereria options - $thumbnails = variable_get('galleria_thumbnails', 'on'); - $imagecrop = variable_get('galleria_imagecrop', 'on'); - $autoplay = variable_get('galleria_autoplay', 0); + $autoplay = variable_get('galleria_autoplay', 0); + $carouselSteps = variable_get('galleria_carouselSteps', 0); + $initialTransition = variable_get('galleria_initialTransition', 'none'); $js_settings = array( 'galleria' => array( 'opt' => array( - 'transition' => variable_get('galleria_transition', 'fade'), - 'overlay_opacity' => variable_get('galleria_overlay_opacity', 0.85), - 'show_imagenav' => (boolean) variable_get('galleria_show_imagenav', TRUE), - 'clicknext' => (boolean) variable_get('galleria_clicknext', TRUE), - 'queue' => (boolean) variable_get('galleria_queue', TRUE), - 'preload' => variable_get('galleria_preload', 3), - 'show_counter' => (boolean) variable_get('galleria_show_counter', TRUE), - 'autoplay' => (0!=$autoplay) ? $autoplay : NULL, - 'max_scale_ratio' => variable_get('galleria_max_scale_ratio', 1), - 'min_scale_ratio' => variable_get('galleria_min_scale_ratio', 1), - 'show_info' => (boolean) variable_get('galleria_show_info', TRUE), - 'thumbnails' => ('on'==$thumbnails) ? TRUE : (('off'==$thumbnails) ? FALSE : $thumbnails), - 'imageCrop' => ('on'==$imagecrop) ? TRUE : (('off'==$imagecrop) ? FALSE : $imagecrop), + 'autoplay' => (0!=$autoplay) ? $autoplay : NULL, + 'carousel' => (boolean) variable_get('galleria_carousel', TRUE), + 'carouselFollow' => (boolean) variable_get('galleria_carouselFollow', TRUE), + 'carouselSpeed' => variable_get('galleria_carouselSpeed', 200), + 'carouselSteps' => (0!=$carouselSteps) ? $carouselSteps : 'auto', + 'clicknext' => (boolean) variable_get('galleria_clicknext', TRUE), + //'easing' + //'fullscreenDoubleTap' + //'height' + //'idleMode' + //'idleTime' + //'idleSpeed' + 'imageCrop' => _galleria_boolstring(variable_get('galleria_imagecrop', 'on')), + 'imageMargin' => variable_get('galleria_imageMargin', 0), + 'imagePan' => variable_get('galleria_imagePan', FALSE), + 'imagePanSmoothness' => variable_get('galleria_imagePanSmoothness', 12), + 'imagePosition' => variable_get('galleria_imagePosition', 'center'), + 'initialTransition' => ('none'!=$initialTransition) ? $initialTransition : NULL, + //'keepSource' + 'lightbox' => (boolean) variable_get('galleria_lightbox'), + 'lightboxFadeSpeed' => variable_get('galleria_lightboxFadeSpeed', 200), + 'lightboxTransitionSpeed' => variable_get('galleria_lightboxTransitionSpeed', 300), + 'maxScaleRatio' => variable_get('galleria_max_scale_ratio', 1), + 'minScaleRatio' => variable_get('galleria_min_scale_ratio', 1), + 'overlayOpacity' => variable_get('galleria_overlay_opacity', 0.85), + //'overlayBackground' + 'pauseOnInteraction' => variable_get('galleria_pauseOnInteraction', TRUE), + //'popupLinks' + 'preload' => variable_get('galleria_preload', 3), + 'queue' => (boolean) variable_get('galleria_queue', TRUE), + //'show' + 'showInfo' => (boolean) variable_get('galleria_show_info', TRUE), + 'showCounter' => (boolean) variable_get('galleria_show_counter', TRUE), + 'showImagenav' => (boolean) variable_get('galleria_show_imagenav', TRUE), + //'swipe' + 'thumbCrop' => _galleria_boolstring(variable_get('galleria_thumbCrop', 'on')), + 'thumbFit' => (boolean) variable_get('galleria_thumbFit', TRUE), + 'thumbMargin' => variable_get('galleria_thumbMargin', 0), + 'thumbQuality' => _galleria_boolstring(variable_get('galleria_thumbQuality', 'on')), + 'thumbnails' => _galleria_boolstring(variable_get('galleria_thumbnails', 'on')), + 'transition' => variable_get('galleria_transition', 'fade'), + 'transitionSpeed' => variable_get('galleria_transitionSpeed', 400), + //'width' ), 'themepath' => $path, ), @@ -427,3 +457,12 @@ function galleria_add_settings(&$js, $path) { // add the JS settings, load the values from the config page $js[] = array('data' => $js_settings, 'type' => 'setting'); } + +function _galleria_boolstring($value) { + if ('on' == $value) + return TRUE; + else if ('off' == $value) + return FALSE; + else + return $value; +} diff --git a/includes/galleria.admin.inc b/includes/galleria.admin.inc index c1ea6ad..469f35a 100644 --- a/includes/galleria.admin.inc +++ b/includes/galleria.admin.inc @@ -12,6 +12,182 @@ function galleria_admin_settings() { $form = array(); + /************************* Size *************************/ + $form['size'] = array( + '#type' => 'fieldset', + '#title' => t('Size'), + ); + + $form['size']['galleria_width'] = array( + '#type' => 'textfield', + '#title' => t('Width'), + '#description' => t('Set the width of your galleria display in pixels.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_width', 450), + ); + + $form['size']['galleria_height'] = array( + '#type' => 'textfield', + '#title' => t('Height'), + '#description' => t('Set the height of your galleria display in pixels.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_height', 300), + ); + + /************************* Behaviour *************************/ + $form['behaviour'] = array( + '#type' => 'fieldset', + '#title' => t('Behaviour'), + ); + + $form['behaviour']['galleria_preload'] = array( + '#type' => 'textfield', + '#title' => t('Preload'), + '#description' => t('Defines how many images Galleria should preload in advance. Please note that this only applies when you are using separate thumbnail files. Galleria always cache all preloaded images. 2 preloads the next 2 images in line, ‘all’ forces Galleria to start preloading all images. This may slow down client. 0 will not preload any images'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_preload', 3), + ); + + $form['behaviour']['galleria_autoplay'] = array( + '#type' => 'textfield', + '#title' => t('Autoplay'), + '#description' => t('Sets Galleria to play slidehow when initialized. Value in milliseconds, for example 5000 will move forward every 5 seconds. 0 will disable autoplay'), + '#default_value' => variable_get('galleria_autoplay', 0), + ); + + $form['behaviour']['galleria_pauseOnInteraction'] = array( + '#type' => 'checkbox', + '#title' => t('Pause playback on interaction'), + '#description' => t('During playback, Galleria will stop the playback if the user presses thumbnails or any other navigational links. If you dont want this behaviour, disable this option.'), + '#default_value' => variable_get('galleria_pauseOnInteraction', TRUE), + ); + + + /************************* Controls *************************/ + $form['controls'] = array( + '#type' => 'fieldset', + '#title' => t('Controls'), + ); + + $form['controls']['galleria_show_imagenav'] = array( + '#type' => 'checkbox', + '#title' => t('Show Imagenav'), + '#description' => t('Set this to false if you do not wish to display the image navigation (next/prev arrows).'), + '#default_value' => variable_get('galleria_show_imagenav', TRUE), + ); + + $form['controls']['galleria_clicknext'] = array( + '#type' => 'checkbox', + '#title' => t('clicknext'), + '#description' => t('This options adds a click event over the stage that navigates to the next image in the gallery. Useful for mobile browsers and other simpler applications.'), + '#default_value' => variable_get('galleria_clicknext', TRUE), + ); + + $form['controls']['galleria_queue'] = array( + '#type' => 'checkbox', + '#title' => t('Queue the slideshow'), + '#description' => t('Galleria queues all activation clicks (next/prev & thumbnails). You can see this effect when f.ex clicking “next” fast many times. If you don’t want Galleria to queue, disable this. This will make Galleria stall during animations.'), + '#default_value' => variable_get('galleria_queue', TRUE), + ); + + + /************************* Details *************************/ + $form['details'] = array( + '#type' => 'fieldset', + '#title' => t('Details'), + ); + + $form['details']['galleria_show_info'] = array( + '#type' => 'checkbox', + '#title' => t('Show Info'), + '#description' => t('Disable this if you do not wish to display the caption.'), + '#default_value' => variable_get('galleria_show_info', TRUE), + ); + + $form['details']['galleria_show_counter'] = array( + '#type' => 'checkbox', + '#title' => t('Show Counter'), + '#description' => t('Disable this if you do not wish to display the counter.'), + '#default_value' => variable_get('galleria_show_counter', TRUE), + ); + + + /************************* Images *************************/ + $form['images'] = array( + '#type' => 'fieldset', + '#title' => t('Images'), + ); + + $imagecrop_options = array( + 'on' => t('Crop the image.'), + 'off' => t('Scale down so the entire image fits.'), + 'height' => t('Scale the image to fill the height of the stage.'), + 'width' => t('Scale the image to fill the width of the stage.'), + ); + $form['images']['galleria_imagecrop'] = array( + '#type' => 'radios', + '#title' => t('Image cropping'), + '#description' => t('Defines how the main image will be cropped inside it’s container.'), + '#options' => $imagecrop_options, + '#default_value' => variable_get('galleria_imagecrop', 'true'), + ); + + $form['images']['galleria_max_scale_ratio'] = array( + '#type' => 'textfield', + '#title' => t('Max Scale Ratio'), + '#description' => t('Sets the maximum scale ratio for images. For example, if you don’t want Galleria to upscale any images, set this to 1. Leave empty to allow any scaling of the images.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_max_scale_ratio', 1), + ); + + $form['images']['galleria_min_scale_ratio'] = array( + '#type' => 'textfield', + '#title' => t('Min Scale Ratio'), + '#description' => t('Sets the minimum scale ratio for images. For example, if you don’t want Galleria to downscale any images, set this to 1. Leave empty to allow any scaling of the images.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_min_scale_ratio', 1), + ); + + $form['images']['galleria_imagePosition'] = array( + '#type' => 'textfield', + '#title' => t('Image position'), + '#description' => t('

Positions the main image inside the stage container. Works like the CSS background-position property, f.ex ‘top right’ or ‘20% 100%’. You can use keywords, percents or pixels. The first value is the horizontal position and the second is the vertical.

Read more about positioning at http://www.w3.org/TR/REC-CSS1/#background-position

'), + '#default_value' => variable_get('galleria_imagePosition', 'center'), + ); + + $form['images']['galleria_imageMargin'] = array( + '#type' => 'textfield', + '#title' => t('Image margin'), + '#description' => t('Since images are scaled to fit the stage container, there might be occations when you need to apply a margin between the image and stage border. This is what this option is for. The margin is set in pixels.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_imageMargin', 0), + ); + + $form['images']['galleria_imagePan'] = array( + '#type' => 'checkbox', + '#title' => t('Image pan effect'), + '#description' => t('

Galleria comes with a built-in panning effect. The effect is sometimes useful if you have cropped images and want to let the users pan across the stage to see the entire image.

' + .'

Set imagePan to true to apply a mouse-controlled movement of the image to reveal the cropped parts. This effect is useful if you want to avoid dark areas around the image but still be able to view the entire image.

' + .'

Popular on many fashion websites.

'), + '#default_value' => variable_get('galleria_imagePan', FALSE), + ); + + $form['images']['galleria_imagePanSmoothness'] = array( + '#type' => 'textfield', + '#title' => t('Image pan smoothness'), + '#description' => t('This value sets how “smooth” the image pan movement should be when setting image_pan to true. The higher value, the smoother effect but also CPU consuming.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_imagePanSmoothness', 12), + ); + + + + /************************* Effects *************************/ + $form['effects'] = array( + '#type' => 'fieldset', + '#title' => t('Effects'), + ); + $transition_options = array( 'fade' => t('fade: crossfade betweens images'), 'flash' => t('flash: fades into background color between images'), @@ -19,7 +195,7 @@ function galleria_admin_settings() { 'slide' => t('slide: slides the images depending on image position'), 'fadeslide' => t('fadeslide: fade between images and slide slightly at the same time'), ); - $form['galleria_transition'] = array( + $form['effects']['galleria_transition'] = array( '#type' => 'radios', '#title' => t('Transition'), '#description' => t('The transition that is used when displaying the images.'), @@ -27,13 +203,42 @@ function galleria_admin_settings() { '#default_value' => variable_get('galleria_transition', 'fade'), ); + $initialTransition_options = array_merge( + array( + 'none' => t('No special initial transition, use the obove default transition.'), + ), + $transition_options + ); + $form['effects']['galleria_initialTransition'] = array( + '#type' => 'radios', + '#title' => t('Initial Transition'), + '#description' => t('Defines a different transition to show on the first image. For example, if you are using a slide transition, you might want the first image to fade. You can then set this option to ‘fade’.'), + '#options' => $initialTransition_options, + '#default_value' => variable_get('galleria_initialTransition', 'none'), + ); + + $form['effects']['galleria_transitionSpeed'] = array( + '#type' => 'textfield', + '#title' => t('Transition speed'), + '#description' => t('The milliseconds used in the animation when applying the transition. The higher number, the slower transition.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_transitionSpeed', 400), + ); + + + /************************* Thumbnails *************************/ + $form['thumbnails'] = array( + '#type' => 'fieldset', + '#title' => t('Thumbnails'), + ); + $thumbnails_options = array( - 'on' => 'Show thumbnails', - 'off' => 'No thumbnails', - 'numbers' => 'numbers: Show empty spans with numbers instead of thumbnails', - 'empty' => 'empty: Show empty spans with the className img instead of thumbnails', + 'on' => t('Show thumbnails'), + 'off' => t('No thumbnails'), + 'numbers' => t('numbers: Show empty spans with numbers instead of thumbnails'), + 'empty' => t('empty: Show empty spans with the className img instead of thumbnails'), ); - $form['galleria_thumbnails'] = array( + $form['thumbnails']['galleria_thumbnails'] = array( '#type' => 'radios', '#title' => t('Show Thumbnails'), '#description' => t('Sets the creation of thumbnails.'), @@ -41,110 +246,125 @@ function galleria_admin_settings() { '#default_value' => variable_get('galleria_thumbnails', 'on'), ); - $form['galleria_show_imagenav'] = array( - '#type' => 'checkbox', - '#title' => t('Show Imagenav'), - '#default_value' => variable_get('galleria_show_imagenav', TRUE), - '#description' => t('Set this to false if you do not wish to display the image navigation (next/prev arrows).'), + $thumbcrop_options = array( + 'on' => t('Crop the thumbnail.'), + 'off' => t('Scale down so the entire thumbnail fits.'), + 'height' => t('Scale the thumbnail to fill the height of the container.'), + 'width' => t('Scale the thumbnail to fill the width of the container.'), + ); + $form['thumbnails']['galleria_thumbCrop'] = array( + '#type' => 'radios', + '#title' => t('Thumbnail cropping'), + '#description' => t('Defines how the thumbnails will be cropped inside their container.'), + '#options' => $thumbcrop_options, + '#default_value' => variable_get('galleria_thumbCrop', 'on'), ); - $form['galleria_clicknext'] = array( + $form['thumbnails']['galleria_thumbFit'] = array( '#type' => 'checkbox', - '#title' => t('clicknext'), - '#description' => t('This options adds a click event over the stage that navigates to the next image in the gallery. Useful for mobile browsers and other simpler applications. Note that setting this to true will disable any other links that you might have in the data object.'), - '#default_value' => variable_get('galleria_clicknext', TRUE), + '#title' => t('Fit thumbnails'), + '#description' => t('

If this is enabled, all thumbnail containers will be shrinked to fit the actual thumbnail size. This is useful if you have thumbnails of various sizes and will them float nicely side-by-side.

' + .'

This is only relevant if the above settign is set to anything else but "crop". If you want all thumbnails to fit inside a container with predefined width & height, disable this.

'), + '#default_value' => variable_get('galleria_thumbFit', TRUE), ); - $form['galleria_queue'] = array( - '#type' => 'checkbox', - '#title' => t('queue'), - '#description' => t('Galleria queues all activation clicks (next/prev & thumbnails). You can see this effect when for example clicking “next” fast many times. If you don’t want Galleria to queue, set this to false. This will make Galleria stall during anim'), - '#default_value' => variable_get('galleria_queue', TRUE), + $form['thumbnails']['galleria_thumbMargin'] = array( + '#type' => 'textfield', + '#title' => t('Thumbnail margin'), + '#description' => t('Specifies the margin between the thumbnails and their container. The margin is set in pixels.'), + '#element_validate' => array('_galleria_validate_numeric_element'), + '#default_value' => variable_get('galleria_thumbMargin', 0), ); - - $form['galleria_show_counter'] = array( - '#type' => 'checkbox', - '#title' => t('Show Counter'), - '#default_value' => variable_get('galleria_show_counter', TRUE), + $thumbQuality_options = array( + 'auto' => t('Auto: Use high quality if image scaling is moderate.'), + 'off' => t('Off: Will not use high quality (better performance).'), + 'on' => t('On: Will force high quality rendering (can slow down performance).'), ); + $form['thumbnails']['galleria_thumbQuality'] = array( + '#type' => 'radios', + '#title' => t('Thumbnail quality in IE'), + '#description' => t('Defines if and how IE should use bicubic image rendering for thumbnails'), + '#options' => $thumbQuality_options, + '#default_value' => variable_get('galleria_thumbQuality', 'on'), + ); + - $form['galleria_show_info'] = array( + /************************* Thumbnails *************************/ + $form['carousel'] = array( + '#type' => 'fieldset', + '#title' => t('Thumbnail carousel'), + ); + + $form['carousel']['galleria_carousel'] = array( '#type' => 'checkbox', - '#title' => t('Show Info'), - '#description' => t('Disable this if you do not wish to display the caption.'), - '#default_value' => variable_get('galleria_show_info', TRUE), - ); + '#title' => t('Carousel'), + '#description' => t('Galleria comes with a built-in horizontal carousel. Activating this, the carousel will be automatically applied if the total sum of thumbnails width exceeds the thumbnail container. This will be re-calculaed on resize.'), + '#default_value' => variable_get('galleria_carousel', TRUE), + ); - $form['galleria_width'] = array( - '#type' => 'textfield', - '#title' => t('Width'), - '#description' => t('Set the width of your galleria display in pixels.'), - '#element_validate' => array('_galleria_validate_numeric_element'), - '#default_value' => variable_get('galleria_width', 450), + $form['carousel']['galleria_carouselFollow'] = array( + '#type' => 'checkbox', + '#title' => t('Follow the active image'), + '#description' => t('This option defines if the the carousel should follow the active image. You can control the speed of the animation with the below option. Please note that animating heavy thumbnails can affect your main image animation, so if you are seeing big lags in the main animation you can try to disable this option.'), + '#default_value' => variable_get('galleria_carouselFollow', TRUE), ); - $form['galleria_height'] = array( + $form['carousel']['galleria_carouselSpeed'] = array( '#type' => 'textfield', - '#title' => t('Height'), - '#description' => t('Set the height of your galleria display in pixels.'), + '#title' => t('Carousel speed'), + '#description' => t('This option controls the slide speed of the carousel in milliseconds. It globally affects the carousel animation, both when following and sliding.'), '#element_validate' => array('_galleria_validate_numeric_element'), - '#default_value' => variable_get('galleria_height', 300), + '#default_value' => variable_get('galleria_carouselSpeed', 200), ); - $form['galleria_preload'] = array( + $form['carousel']['galleria_carouselSteps'] = array( '#type' => 'textfield', - '#title' => t('Preload'), - '#description' => t('Defines how many images Galleria should preload in advance. Please note that this only applies when you are using separate thumbnail files. Galleria always cache all preloaded images. 2 preloads the next 2 images in line, ‘all’ forces Galleria to start preloading all images. This may slow down client. 0 will not preload any images'), + '#title' => t('Carousel steps'), + '#description' => t('The number of “steps” the carousel will advance when navigating between available thumbnails. 0 will move the carousel as many steps as there are visible thumbnails.'), '#element_validate' => array('_galleria_validate_numeric_element'), - '#default_value' => variable_get('galleria_preload', 3), + '#default_value' => variable_get('galleria_carouselSteps', 0), ); - $form['galleria_autoplay'] = array( - '#type' => 'textfield', - '#title' => t('Autoplay'), - '#description' => t('Sets Galleria to play slidehow when initialized. Value in milliseconds, for example 5000 will move forward every 5 seconds. 0 will disable autoplay'), - '#default_value' => variable_get('galleria_autoplay', 0), - ); - $galleria_imagecrop_options = array( - 'on' => 'Crop', - 'off' => 'No Crop', - 'height' => 'Crop horizontally, fill the height', - 'width' => 'Crop vertically, fill the width', + /************************* Lightbox *************************/ + $form['lightbox'] = array( + '#type' => 'fieldset', + '#title' => t('Lightbox'), ); - $form['galleria_imagecrop'] = array( - '#type' => 'radios', - '#title' => t('Cropping'), - '#description' => t('Defines how the main image will be cropped inside it’s container.'), - '#options' => $galleria_imagecrop_options, - '#default_value' => variable_get('galleria_imagecrop', 'true'), + + $form['lightbox']['galleria_lightbox'] = array( + '#type' => 'checkbox', + '#title' => t('Lightbox'), + '#description' => t('When set, a lightbox will open when the user clicks on an image.'), + '#default_value' => variable_get('galleria_lightbox', FALSE), ); - - $form['galleria_max_scale_ratio'] = array( + + $form['lightbox']['galleria_lightboxFadeSpeed'] = array( '#type' => 'textfield', - '#title' => t('Max Scale Ratio'), - '#description' => t('Sets the maximum scale ratio for images. For example, if you don’t want Galleria to upscale any images, set this to 1. Leave empty to allow any scaling of the images.'), + '#title' => t('Lightbox fade speed'), + '#description' => t('When the lightbox opens, it will animate and fade the images and captions. This value controls how fast they should fade in milliseconds.'), '#element_validate' => array('_galleria_validate_numeric_element'), - '#default_value' => variable_get('galleria_max_scale_ratio', 1), + '#default_value' => variable_get('galleria_lightboxFadeSpeed', 200), ); - $form['galleria_min_scale_ratio'] = array( + $form['lightbox']['galleria_lightboxTransitionSpeed'] = array( '#type' => 'textfield', - '#title' => t('Min Scale Ratio'), - '#description' => t('Sets the minimum scale ratio for images. For example, if you don’t want Galleria to downscale any images, set this to 1. Leave empty to allow any scaling of the images.'), + '#title' => t('Lightbox transition speed'), + '#description' => t('When the lightbox opens, it will animate the white square before displaying the image. This value controls how fast it should animate in milliseconds.'), '#element_validate' => array('_galleria_validate_numeric_element'), - '#default_value' => variable_get('galleria_min_scale_ratio', 1), + '#default_value' => variable_get('galleria_lightboxTransitionSpeed', 300), ); - $form['galleria_overlay_opacity'] = array( + $form['lightbox']['galleria_overlay_opacity'] = array( '#type' => 'textfield', '#title' => t('Overlay Opacity'), - '#description' => t('This sets how much opacity the overlay should have when calling showLightbox()'), + '#description' => t('This sets how much opacity the overlay should have when the lightbox opens.'), '#element_validate' => array('_galleria_validate_numeric_element'), '#default_value' => variable_get('galleria_overlay_opacity', 0.85), ); + return system_settings_form($form); } --