A Free jQuery Responsive Slider or Fluid Slideshow Plugin – Fluid_DG

After successful response on Responsive_DG_Slider or fluid_dg slideshow, I have done more work on it. It is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don’t think, I will spend more hours to improve this for those oldies, sorry.

Fluid_dg slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing  and a customized version of  jQuery Mobile to use Fluid_dg with mobile devices. You can easily download these here by using right-click and “save target as..” command from the link below.

1. Download Easing Plugin
2. Download jQuery Mobile Plugin
3. Download Fluid_dg Plugin (minified)

View Demos:

Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

Usages and Methods

THE BASIS

This is the basic structure to make Fluid_dg work:

<div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

Just put this code into your HTML page and the basic slideshow will be ready to use. See the other demos to create more complex slideshows.

For jQuery newbies: after downloading and unzipping Fluid_dg, you can see some files in the folder called Examples included in the zip: there I provided some examples of Fluid_dg slideshow.

As you can see in the examples themselves, before the Fluid_dg plugin, you must calljQuery in the head of your document: without jQuery the slideshow doesn’t work.

Then you must call jQuery Easing plugin and jQuery Mobile plugin. After that you must call Fluid_dg plugin and initialize the function fluid_dg with the simply methodjQuery('YOUR_TARGET').fluid_dg();

SKINS

Do not forget to call also “fluid_dg.css“. By editing this CSS file you can create your own personal skin, of course. But Fluid_dg already provides some skins. It has got 33 different colors for the icons. To use them just add one of this classes to the target element (if you don’t use any of this classes the color of the icons will be petroleum/graphite):

fluid_dg_amber_skin	Amber colour theme
fluid_dg_ash_skin	Ash colour theme
fluid_dg_azure_skin	Azure colour theme
fluid_dg_beige_skin	Beige colour theme
fluid_dg_black_skin	Black colour theme
fluid_dg_blue_skin	Blue colour theme
fluid_dg_brown_skin	Brown colour theme
fluid_dg_burgundy_skin	Burgundy colour theme
fluid_dg_charcoal_skin	Charcoal colour theme
fluid_dg_chocolate_skin	Chocolate colour theme
fluid_dg_coffee_skin	Coffee colour theme
fluid_dg_cyan_skin	Cyan colour theme
fluid_dg_fuchsia_skin	Fuchsia colour theme
fluid_dg_gold_skin	Gold colour theme
fluid_dg_green_skin	Green colour theme
fluid_dg_grey_skin	Grey colour theme
fluid_dg_indigo_skin	Indigo colour theme
fluid_dg_khaki_skin	Khaki colour theme
fluid_dg_lime_skin	Lime colour theme
fluid_dg_magenta_skin	Megenta colour theme
fluid_dg_maroon_skin	Maroon colour theme
fluid_dg_orange_skin	Orange colour theme
fluid_dg_olive_skin	Olive colour theme
fluid_dg_pink_skin	Pink colour theme
fluid_dg_pistachio_skin	Pistachio colour theme
fluid_dg_pink_skin	Pink colour theme
fluid_dg_red_skin	Red colour theme
fluid_dg_tangerine_skin	Tangerine colour theme
fluid_dg_turquoise_skin	Turquoise colour theme
fluid_dg_violet_skin	Violet colour theme
fluid_dg_white_skin	White colour theme
fluid_dg_yellow_skin	Yellow colour theme

METHODS

This is the main function to start your slideshow. Have a look to the options for more detailed info about how to set the slideshow.

jQuery('YOUR_TARGET').fluid_dg(); //the basic method

jQuery('YOUR_TARGET').fluid_dg({ //here I declared some settings, the height and the presence of the thumbnails 
	height: '41%',
	pagination: false,
	thumbnails: true
});

You can use the public methods below to stop the slideshow, for instance, when you open a lightbox. They simply add or remove a class to the target element.

jQuery('YOUR_TARGET').fluid_dg_Stop(); //stop the slideshow

jQuery('YOUR_TARGET').fluid_dg_Play(); //start the slideshow

jQuery('YOUR_TARGET').fluid_dg_Pause(); //pause the slideshow (some difference between 'pause' and 'stop': when you stop the loader and the commands are hidden)

jQuery('YOUR_TARGET').fluid_dg_Resume(); //resume the slideshow after pausing

Options, and callbacks

TO CUSTOMIZE ALMOST EVERYTHING

Options	Defaults	Values
alignment	center	topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
autoAdvance	true	true, false
mobileAutoAdvance	true	true, false. Auto-advancing for mobile devices
barDirection	leftToRight	‘leftToRight’, ‘rightToLeft’, ‘topToBottom’, ‘bottomToTop’
barPosition	‘bottom’	‘left’, ‘right’, ‘top’, ‘bottom’
cols	6
easing	‘easeInOutExpo’	for the complete list http://jqueryui.com/demos/effect/easing.html
mobileEasing		leave empty if you want to display the same easing on mobile devices and on desktop etc.
fx	random	‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’ N.B.: you can also use more than one effect, just separate them with commas: ‘simpleFade, scrollRight, scrollBottom’
mobileFx		leave empty if you want to display the same effect on mobile devices and on desktop etc.
gridDifference	250	to make the grid blocks slower than the slices, this value must be smaller than transPeriod
height:	50%	here you can type pixels (for instance ‘300px’), a percentage (relative to the width of the slideshow, for instance ‘50%’) or auto
hover	true	true, false. Pause on state hover. Not available for mobile devices
imagePath	images/	the path to the image folder (it serves for the blank.gif, when you want to display videos)
loader	pie	pie, bar, none (even if you choose “pie”, old browsers like IE8- can’t display it… they will display always a loading bar)
loaderColor	#eeeeee	any hexadecimal color codes
loaderBgColor	#222222	any hexadecimal color codes
loaderOpacity	.8	0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1
loaderPadding	2	how many empty pixels you want to display between the loader and its background
loaderStroke	7	the thickness both of the pie loader and of the bar loader. Remember: for the pie, the loader thickness must be less than a half of the pie diameter
minHeight	200px	you can also leave it blank
navigation	true	if true the navigation button (prev, next and play/stop buttons) will be visible, if false they will be always hidden
navigationHover	true	if true the navigation button (prev, next and play/stop buttons) will be visible on hover state only, if false they will be visible always
mobileNavHover	true	same as above, but only for mobile devices
opacityOnGrid	false	true, false. Decide to apply a fade effect to blocks and slices: if your slideshow is fullscreen or simply big, I recommend to set it false to have a smoother effect
overlayer	true	true, false. Decide to put a layer on the images to prevent the users grab them simply by clicking the right button of their mouse (.fluid_dg_overlayer)
pagination	true	true, false
playPause	true	true or false, to display or not the play/pause buttons
pauseOnClick	true	true, false. It stops the slideshow when you click the sliders
pieDiameter	38
piePosition	‘rightTop’	‘rightTop’, ‘leftTop’, ‘leftBottom’, ‘rightBottom’
portrait	false	true, false. Select true if you don’t want that your images are cropped
rows:	4
slicedCols	12	if 0 the same value of cols
slicedRows	8	if 0 the same value of rows
slideOn	‘random’	next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide
thumbnails	false	true, false
time:	7000	milliseconds between the end of the sliding effect and the start of the nex one
transPeriod	1500	length of the sliding effect in milliseconds

CALLBACKS

onStartLoading: function() { }	this callback is invoked when the image on a slide start loading
onLoaded: function() { }	this callback is invoked when the image on a slide has completely loaded
onStartTransition: function() { }	this callback is invoked when the transition effect starts
onEndTransition: function() { }	this callback is invoked when the transition effect ends

Since Fluid_dg 1.3.0 you can get the index of the current slider by using the callbacks in this way:

onLoaded: function(){
  var ind = t.find('.fluid_dg_target .fluid_dg_Slide.fluid_dg_next').index();
}

With the method above you can get the index of the slide that will display after the transition effect.

onEndTransition: function(){
  var ind = t.find('.fluid_dg_target .fluid_dg_Slide.fluid_dg_current').index();
}

With the method above you can get the index of the slide at the end of the transition effect.

Apis, classes and HTML5 data-attributes

TO MANIPULATE ALMOST EVERYTHING…

A SIMPLE SLIDE

This is the “simple anathomy” of a slide:

<div data-src="images/image_1.jpg"></div>

CAPTIONS

You can add a caption to the slide, just put a div with class “fluid_dg_caption” into the div above:

<div data-src="images/image_1.jpg">
	<div>The text of your caption</div>
</div>

By adding one more class to the “fluid_dg_caption” div you can decide the effect of the caption. The possible classes are: “moveFromLeft”, “moveFomRight”, “moveFromTop”, “moveFromBottom”, “fadeIn”, “fadeFromLeft”, “fadeFromRight”, “fadeFromTop”, “fadeFromBottom”

HTML ELEMENTS

You can also put some HTML elements into your slides. These elements must be wrapped into a div with position:absolute and they can be included in the transition effect too:

<div data-src="images/image_1.jpg">
	<div>The text of your html element</div>
</div>

An HTML element can have a class “fadeIn”: in this case it will be displayed with a fading effect. By adding the class “fluid_dg_effected” to the div, it will be included in the transition effect (but pay attention, this could make the transition slow).

VIDEOS

To include a video into your slideshow you must put an iframe into one of your slides:

<div data-src="images/image_1.jpg">
	< iframe src="http://player.vimeo.com/video/37400494" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio).

The iframes can’t be included in the transition effect, so you can use a screenshot of the iframe as image for your slide. By default they are displayed after the transition, but you can decide to display them only after clicking the image of the slide itself. Just add to the div (the slide) the attribute data-video="hide" (see below the data- attributes).

THE “DATA-” ATTRIBUTES

The URL of the image on the slide is added by using the HTML5 data- attribute. This allows to load the image only when the slideshow calls it and not (lazy load method).

By using the HTML5 data- attribute you can add many properties to your slide, that overwrite the general ones. For instance the URL of the thumbnails:

<div data-src="images/image_1.jpg" data-thumb="images/thumbs/image_1.jpg"></div>

or a particular alignment for one slide only:

<div data-src="images/image_1.jpg" data-alignment="topLeft"></div>

Here below you can see all the other “data-” possibilities

data-alignment	“topLeft”, “topCenter”, “topRight”, “centerLeft”, “center”, “centerRight”, “bottomLeft”, “bottomCenter”, “bottomRight”
data-easing	for the complete list http://jqueryui.com/demos/effect/easing.html
data-mobileEasing	the easing effect for mobile devices only
data-fx	“random”,”simpleFade”, “curtainTopLeft”, “curtainTopRight”, “curtainBottomLeft”, “curtainBottomRight”, “curtainSliceLeft”, “curtainSliceRight”, “blindCurtainTopLeft”, “blindCurtainTopRight”, “blindCurtainBottomLeft”, “blindCurtainBottomRight”, “blindCurtainSliceBottom”, “blindCurtainSliceTop”, “stampede”, “mosaic”, “mosaicReverse”, “mosaicRandom”, “mosaicSpiral”, “mosaicSpiralReverse”, “topLeftBottomRight”, “bottomRightTopLeft”, “bottomLeftTopRight”, “bottomLeftTopRight”
data-link	the URL where you go by clicking your slide
data-portrait	“true”, “false”. Select “true” if you don’t want that your images are cropped
data-slideOn	“next”, “prev”, “random”: decide if the transition effect will be applied to the current (prev) or the next slide
data-src	the URL of the image of the slide
data-target	“_blank”, “_new”, “_parent”, “_self”, “_top”, the target values for the data-link attribute
data-thumb	the URL of the thumbnail of the slide (if the value of the ‘thumbnail’ option is true)
data-time	the milliseconds between the end of the sliding effect and the start of the nex one
data-transPeriod	the length of the sliding effect in milliseconds
data-video=”hide”	“hide” is the unique possible value. If you use this data- attribute means you are using a video on your slideshow. The videos on Fluid_dg can be displayed only after the transition. By adding this data- attribute you must click the image to display the video, otherwise the video will be displayed automatically after the transition. More info are available on the demo pages

Demo:

1. Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider
2. Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

Posted by: Dhiraj kumar