1. Load the jQuery Blueimp Gallery’s stylesheet file
1 / <linkrel="stylesheet"href="css/blueimp-gallery.css">2. Create a inline carousel image gallery, which can be positioned anywhere on the page
<divid="blueimp-image-carousel"class="blueimp-gallery blueimp-gallery-carousel">
<divclass="slides"</div>
<h3class="title"</h3>
<aclass="prev">‹</a> <aclass="next">›</a> <aclass="play-pause"</a> </div>
3. Load the latest version of jQuery from a CDN
1 / <scriptsrc=""</script>4. The javascript
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
5. All the options
varoptions = {
// The Id, element or querySelector of the gallery widget:
container: '#blueimp-gallery',
// The tag name, Id, element or querySelector of the slides container:
slidesContainer: 'div',
// The tag name, Id, element or querySelector of the title element:
titleElement: 'h3',
// The tag name, Id, element or querySelector of the indicator container:
indicatorContainer: 'ol',
// The class to add when the gallery is visible:
displayClass: 'blueimp-gallery-display',
// The class to add when the gallery controls are visible:
controlsClass: 'blueimp-gallery-controls',
// The class to add when the gallery only displays one element:
singleClass: 'blueimp-gallery-single',
// The class to add when the left edge has been reached:
leftEdgeClass: 'blueimp-gallery-left',
// The class to add when the right edge has been reached:
rightEdgeClass: 'blueimp-gallery-right',
// The class to add when the automatic slideshow is active:
playingClass: 'blueimp-gallery-playing',
// The class for all slides:
slideClass: 'slide',
// The slide class for loading elements:
slideLoadingClass: 'slide-loading',
// The slide class for elements that failed to load:
slideErrorClass: 'slide-error',
// The class for the content element loaded into each slide:
slideContentClass: 'slide-content',
// The class for video content elements:
videoContentClass: 'video-content',
// The class for video when it is loading:
videoLoadingClass: 'video-loading',
// The class for video when it is playing:
videoPlayingClass: 'video-playing',
// The class for the "toggle" control:
toggleClass: 'toggle',
// The class for the "prev" control:
prevClass: 'prev',
// The class for the "next" control:
nextClass: 'next',
// The class for the "close" control:
closeClass: 'close',
// The class for the "play-pause" toggle control:
playPauseClass: 'play-pause',
// The class for the active indicator:
activeClass: 'active',
// The list object property (or data attribute) with the object type:
typeProperty: 'type',
// The list object property (or data attribute) with the object title:
titleProperty: 'title',
// The list object property (or data attribute) with the object URL:
urlProperty: 'href',
// The list object property (or data attribute) with the thumbnail URL,
// used as alternative to a thumbnail child element:
thumbnailProperty: 'thumbnail',
// The list object property (or data attribute) for the video poster URL:
videoPosterProperty: 'poster',
// The list object property (or data attribute) for the video sources array:
videoSourcesProperty: 'sources',
// Defines if the gallery indicators should display a thumbnail:
thumbnailIndicators: true,
// Defines if the gallery slides are cleared from the gallery modal,
// or reused for the next gallery initialization:
clearSlides: true,
// Defines if the gallery should open in fullscreen mode:
fullScreen: false,
// Defines if images should be stretched to fill the available space,
// while maintaining their aspect ratio (will only be enabled for browsers
// supporting background-size="contain", which excludes IE < 9):
stretchImages: false,
// Toggle the controls on pressing the Return key:
toggleControlsOnReturn: true,
// Toggle the automatic slideshow interval on pressing the Space key:
toggleSlideshowOnSpace: true,
// Navigate the gallery by pressing left and right on the keyboard:
enableKeyboard<a href="">Navigation</a>: true,
// Close the gallery on pressing the ESC key:
closeOnEscape: true,
// Close the gallery when clicking on an empty slide area:
closeOnSlideClick: true,
// Close the gallery by swiping up or down:
closeOnSwipeUpOrDown: true,
// Emulate touch events on mouse-pointer devices such as desktop browsers:
emulateTouchEvents: true,
// Hide the page scrollbars:
hidePage<a href="">Scroll</a>bars: true,
// Stops any touches on the container from scrolling the page:
disableScroll: true,
// Carousel mode (shortcut for carousel specific options):
carousel: false,
// Allow continuous navigation, moving from last to first
// and from first to last slide:
continuous: true,
// Start with the automatic slideshow:
startSlideshow: false,
// Delay in milliseconds between slides for the automatic slideshow:
slideshowInterval: 5000,
// The starting index as integer.
// Can also be an object of the given list,
// or an equal object with the same url property:
index: 0,
// The number of elements to load around the current index:
preloadRange: 2,
// The transition speed between slide changes in milliseconds:
transitionSpeed: 400,
// The transition speed for automatic slide changes, set to an integer
// greater 0 to override the default transition speed:
slideshowTransitionSpeed: undefined,
// Callback function executed on slide change.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslide: undefined,
// Callback function executed after the slide change transition.
// Is called with the gallery instance as "this" object and the
// current index and slide as arguments:
onslideend: undefined,
// Callback function executed on slide content load.
// Is called with the gallery instance as "this" object and the
// slide index and slide element as arguments:
onslidecomplete: undefined,
// Callback function executed when the Gallery is closed.
// Is called with the gallery instance as "this" object:
onclose: undefined
};
function blueimp_create_modal(id, p) {
$('body').append('<div id="blueimp-gallery" class="blueimp-gallery">');
- $('#blueimp-gallery').addClass( "blueimp-gallery-controls" );
- $('#blueimp-gallery').attr( "data-carousel", "false" );
- $('#blueimp-gallery').attr( "data-hidePageScrollbars", "true" );
- $('#blueimp-gallery').attr( "data-startSlideshow", "true" );
+ if ( p.startControls ) { $('#blueimp-gallery').addClass( "blueimp-gallery-controls" ) };
+ if ( p.carousel ) { $('#blueimp-gallery').attr( "data-carousel", "true" ) };
+ if ( !p.continuous ) { $('#blueimp-gallery').attr( "data-continuous", "false" ) };
+ if ( !p.hidePageScrollbars ) { $('#blueimp-gallery').attr( "data-hidePageScrollbars", "false" ) };
+ if ( !p.startSlideshow ) { $('#blueimp-gallery').attr( "data-startSlideshow", "false" ) };
+ $('#blueimp-gallery').attr( "data-slideshowInterval", p.slideshowInterval );
+ $('#blueimp-gallery').attr( "data-transitionSpeed", p.transitionSpeed );
$('#blueimp-gallery').append('<div class="slides" />');
$('#blueimp-gallery').append('<h3 class="title" />');
$('#blueimp-gallery').append('<a class="prev">‹</a>');
diff --git a/blueimp.module b/blueimp.module
index dc98822..e1dc57d 100644
--- a/blueimp.module
+++ b/blueimp.module
@@ -17,6 +17,7 @@ function blueimp_init() {
'blueimp' => array(
'module_path' => $module_path,
'trigger' => $settings['trigger'],
+ 'startControls' => $settings['navigation']['startControls'],
'hidePageScrollbars' => $settings['navigation']['hidePageScrollbars'],
'carousel' => $settings['navigation']['carousel'],
'startSlideshow' => $settings['navigation']['startSlideshow'],
@@ -76,7 +77,7 @@ function blueimp_settings($form, &$form_state) {
'#type' => 'textarea',
'#title' => t('Valid jQuery Classes/IDs to trigger Blueimp Gallery (One per line)'),
'#default_value' => $settings['trigger'],
- '#description' => t('Specify the class/ID of links to load destination images in a Blueimp Gallery, one per line. For example by providing ".field-name-field-image" will convert any link inside a tag class="field-name-field-image" element'),
+ '#description' => t('Specify the class/ID of a container of links to load destination images in a Blueimp Gallery, one per line. For example by providing ".field-name-field-image" will open any image link inside class="field-name-field-image" container in a gallery'),
);
// Navigation
@@ -86,11 +87,17 @@ function blueimp_settings($form, &$form_state) {
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
+ $options['navigation']['startControls'] = array(
+ '#type' => 'checkbox',
+ '#title' => t('Start with visibe controls'),
+ '#default_value' => $settings['navigation']['startControls'],
+ '#description' => t('When enable, controls will be visible on load.'),
+ );
$options['navigation']['hidePageScrollbars'] = array(
'#type' => 'checkbox',
- '#title' => t('Controls are always visible'),
+ '#title' => t('Hide the page scrollbars'),
'#default_value' => $settings['navigation']['hidePageScrollbars'],
- '#description' => t('Disable carousel transitions while the user is hovering over the carousel.'),
+ '#description' => t('When enable, click outside image will close galley.'),
);
$options['navigation']['carousel'] = array(
'#type' => 'checkbox',
@@ -100,13 +107,13 @@ function blueimp_settings($form, &$form_state) {
);
$options['navigation']['startSlideshow'] = array(
'#type' => 'checkbox',
- '#title' => t('Display control navigation'),
+ '#title' => t('Slideshow'),
'#default_value' => $settings['navigation']['startSlideshow'],
'#description' => t('Starts automatically a Slideshow.'),
);
$options['navigation']['continuous'] = array(
'#type' => 'checkbox',
- '#title' => t('Whether the carousel should cycle continuously or have hard stops.'),
+ '#title' => t('Cycle continuously.'),
'#description' => t('If this option in checked, the corousel will continue on first carousel after reaching last and viceversa.'),
'#default_value' => $settings['navigation']['continuous'],
);