{"id":4925,"date":"2021-08-25T10:12:57","date_gmt":"2021-08-25T10:12:57","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=4925"},"modified":"2021-09-08T07:56:04","modified_gmt":"2021-09-08T07:56:04","slug":"chiropractic-treatments-slider","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/chiropractic-treatments-slider\/","title":{"rendered":"Chiropractic Treatments Slider"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<style>\r\n.fluxslider-main-184 {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n\r\n.fluxslider_container { \/* gallery-container *\/\r\n  -moz-box-sizing: content-box;\r\n  -webkit-box-sizing: content-box;\r\n  -ms-box-sizing: content-box;\r\n  box-sizing: content-box;\r\n  position: relative;\r\n  padding-top: 0px; \/* adjustment for player controls or video sizing slightly off *\/\r\n  height: 0; \/* fix for IE, to give the element \"layout\" *\/\r\n  max-width: 100%;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.fluxslider img {\r\n  width: 100% !important;\r\n  height: auto;  \r\n}  \r\n  \r\n.fluxslider { \/* gallery *\/\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;    \r\n}\r\n  \r\n.fluxslider .surface {\r\n  width: 100%;\r\n  height: 100%;    \r\n  -moz-box-sizing: content-box;\r\n  -webkit-box-sizing: content-box;\r\n  -ms-box-sizing: content-box;\r\n  box-sizing: content-box;\r\n}\r\n\r\n.fluxslider .image1, .image2 {\r\n  background-size: 100% auto;   \r\n}  \r\n\r\n.fluxslider .images {\r\n  width: 100%;\r\n}\r\n\r\n#section { background-image: url(https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/AKABGLight.png); }<\/style>\r\n<script type=\"text\/javascript\">\r\n<!--\r\n\/**\r\n * @preserve Flux Slider v1.4.4\r\n *\r\n * Copyright 2011, Joe Lambert.\r\n * Free to use under the MIT license.\r\n * http:\/\/www.opensource.org\/licenses\/mit-license.php\r\n *\/\r\n\r\n\/\/ Flux namespace\r\nwindow.flux = {\r\n  version: '1.4.4'\r\n};\r\n\r\n(function($){\r\n  flux.slider = function(elem, opts) {\r\n\t\/\/ Setup the flux.browser singleton to perform feature detection\r\n\tflux.browser.init();\r\n\r\n\tif(!flux.browser.supportsTransitions)\r\n\t{\r\n\t  if(window.console && window.console.error)\r\n\t\tconsole.error(\"Flux Slider requires a browser that supports CSS3 transitions\");\r\n\t}\r\n\r\n\tvar _this = this;\r\n\r\n\tthis.element = $(elem);\r\n\r\n\t\/\/ Make a list of all available transitions\r\n\tthis.transitions = [];\r\n\tfor(var fx in flux.transitions)\r\n\t  this.transitions.push(fx);\r\n\t   \r\n\tif (detectIE()) { this.transitions = ['bars','blinds','blocks','blocks2','concentric','dissolve','slide','warp','zip','swipe','bars3d','cube','blinds3d','tiles3d','blinds3d']; } \r\n\r\n\tthis.options = $.extend({\r\n\t  autoplay: true,\r\n\t  transitions: this.transitions,\r\n\t  delay: 4000,\r\n\t  pagination: false,\r\n\t  controls: false,\r\n\t  captions: false,\r\n\t  width: null,\r\n\t  height: null,\r\n\t  onTransitionEnd: null\r\n\t}, opts);\r\n\r\n\t\/\/ Set the height\/width if given [EXPERIMENTAL!]\r\n\t\/\/this.height = this.options.height ? this.options.height : null;\r\n\t\/\/this.width  = this.options.width  ? this.options.width  : null;\r\n\t\r\n\t\/\/ Find all the images for the gallery\r\n\tthis.imagesAspect = this.element.find('img');\r\n\t\r\n\t\/\/ If we only have one image then don't proceed\r\n\tif(this.imagesAspect.length <= 1)\r\n\t  return;      \r\n\t\r\n\t\/\/ Get image dimensions\r\n\tthis.heightAspect = this.imagesAspect.first().height();\r\n\tthis.widthAspect = this.imagesAspect.first().width();\r\n\t\r\n\t\/\/ Make sure the gallery element keeps its aspect ratio when resized\r\n\tthis.aspectRatio = (this.heightAspect \/ this.widthAspect) * 100;\r\n\tthis.element.closest('div').css('paddingBottom', this.aspectRatio + '%');\r\n\r\n\t\/\/ Filter out non compatible transitions\r\n\tvar newTrans = [];\r\n\t$(this.options.transitions).each(function(index, tran){\r\n\t  var t = new flux.transitions[tran](this),\r\n\t\tcompatible = true;\r\n\t   \r\n\t  if(t.options.requires3d && !flux.browser.supports3d)\r\n\t\tcompatible = false;\r\n\t\t\r\n\t  if(t.options.compatibilityCheck)\r\n\t\tcompatible = t.options.compatibilityCheck();\r\n\r\n\t  if(compatible)\r\n\t\tnewTrans.push(tran);\r\n\t});   \r\n\r\n\tthis.options.transitions = newTrans;\r\n\r\n\tthis.images = new Array();\r\n\tthis.imageLoadedCount = 0;\r\n\tthis.currentImageIndex = 0;\r\n\tthis.nextImageIndex = 1;\r\n\tthis.playing = false;\r\n\r\n\r\n\tthis.container = $('<div class=\"fluxslider\"><\/div>').appendTo(this.element);\r\n\t\r\n\tthis.surface = $('<div class=\"surface\" style=\"position: absolute\"><\/div>').appendTo(this.container);\r\n\t\r\n\t\/\/ Listen for click events as we may want to follow a link\r\n\tthis.container.bind('click', function(event) {\r\n\t  if($(event.target).hasClass('hasLink'))\r\n\t\twindow.location = $(event.target).data('href');\r\n\t});\r\n\r\n\tthis.imageContainer = $('<div class=\"images loading\"><\/div>').css({\r\n\t  'position': 'absolute',\r\n\t  'overflow': 'hidden',\r\n\t  'min-height': '100px'\r\n\t}).appendTo(this.surface);\r\n\t\r\n\t\/\/ If the height\/width is already set then resize the container\r\n\t\/\/if(this.width && this.height)\r\n\t\/\/{\r\n\t\/\/  this.imageContainer.css({\r\n\t\/\/    width: this.width+'px',\r\n\t\/\/    height: this.height+'px'\r\n\t\/\/  });\r\n\t\/\/}\r\n\r\n\t\/\/ Create the placeholders for the current and next image\r\n\tthis.image1 = $('<div class=\"image1\" style=\"height: 100%; width: 100%\"><\/div>').appendTo(this.imageContainer);\r\n\tthis.image2 = $('<div class=\"image2\" style=\"height: 100%; width: 100%\"><\/div>').appendTo(this.imageContainer);\r\n\r\n\t$(this.image1).add(this.image2).css({\r\n\t  'position': 'absolute',\r\n\t  'top': '0px',\r\n\t  'left': '0px'\r\n\t});\r\n\t\r\n\t\/\/ Get a list of the images to use.\r\n\tthis.element.find('img, a img').each(function(index, found_img){\r\n\t  var imgClone = found_img.cloneNode(false),\r\n\t\tlink = $(found_img).parent();\r\n\r\n\t  \/\/ If this img is directly inside a link then save the link for later use.\r\n\t  if(link.is('a'))\r\n\t\t$(imgClone).data('href', link.attr('href'));\r\n\r\n\t  _this.images.push(imgClone);\r\n\r\n\t  \/\/ Remove the images from the DOM.\r\n\t  $(found_img).remove();\r\n\t});\r\n\t\r\n\t\/\/ Load the images afterwards as IE seems to load images synchronously.\r\n\tfor(var i=0; i<this.images.length; i++) {\r\n\t  var image = new Image();\r\n\t  image.onload = function() {\r\n\t\t_this.imageLoadedCount++;\r\n\r\n\t\t_this.width  = _this.width  ? _this.width  : this.width;\r\n\t\t_this.height = _this.height ? _this.height : this.height;\r\n\r\n\t\tif(_this.imageLoadedCount >= _this.images.length)\r\n\t\t{\r\n\t\t  _this.finishedLoading();\r\n\t\t  _this.setupImages();\r\n\t\t}\r\n\t  };\r\n\r\n\t  \/\/ Load the image to ensure its cached by the browser.\r\n\t  image.src = this.images[i].src;\r\n\t}\r\n\t\r\n\t\/\/ Catch when a transition has finished.\r\n\tthis.element.bind('fluxTransitionEnd', function(event, data) {\r\n\t  \/\/ If the slider is currently playing then set the timeout for the next transition.\r\n\t  \/\/ if(_this.isPlaying()).\r\n\t  \/\/  _this.start();.\r\n\t   \r\n\t  \/\/ Are we using a callback instead of events for notifying about transition ends?.\r\n\t  if(_this.options.onTransitionEnd) {         \r\n\t\tevent.preventDefault();\r\n\t\t_this.options.onTransitionEnd(data);\r\n\t  }\r\n\t});\r\n\r\n\t\/\/ Should we auto start the slider?.\r\n\tif(this.options.autoplay)\r\n\t  this.start();\r\n\t   \r\n\t\/\/ Handle swipes.\r\n\tthis.element.bind('swipeLeft', function(event){\r\n\t  _this.next(null, {direction: 'left'});\r\n\t}).bind('swipeRight', function(event){\r\n\t  _this.prev(null, {direction: 'right'});\r\n\t});\r\n\t\r\n\t\/\/ Under FF7 autoplay breaks when the current tab loses focus.\r\n\tsetTimeout(function(){\r\n\t  $(window).focus(function(){\r\n\t\tif(_this.isPlaying())\r\n\t\t  _this.next();\r\n\t  });\r\n\t}, 100);\r\n  };\r\n\r\n  flux.slider.prototype = {\r\n\tconstructor: flux.slider,\r\n\tplaying: false,\r\n\tstart: function() {\r\n\t  var _this = this;\r\n\t  this.playing = true;\r\n\t  this.interval = setInterval(function() {\r\n\t\tconsole.log('play');\r\n\t\t_this.transition();\r\n\t  }, this.options.delay);\r\n\t},\r\n\tstop: function() {\r\n\t  this.playing = false;\r\n\t  clearInterval(this.interval);\r\n\t  this.interval = null;\r\n\t},\r\n\tisPlaying: function() {\r\n\t  return this.playing;\r\n\t  \/\/return this.interval != null;\r\n\t},\r\n\tnext: function(trans, opts) {\r\n\t  opts = opts || {};\r\n\t  \t  opts.direction = 'left';\r\n\t\t\t  \t  this.showImage(this.currentImageIndex+1, trans, opts);\r\n\t},\r\n\tprev: function(trans, opts) {\r\n\t  opts = opts || {};\r\n\t  \t  opts.direction = 'right';\r\n\t\t\t  \t  this.showImage(this.currentImageIndex-1, trans, opts);\r\n\t},\r\n\tshowImage: function(index, trans, opts) {\r\n\t  \/\/for restart delay.\r\n\t  this.stop();\r\n\t  this.start();\r\n\t   \r\n\t  this.setNextIndex(index);\r\n\t   \r\n\t  \/\/ Temporarily stop the transition interval\r\n\t  \/\/clearInterval(this.interval);\r\n\t  \/\/this.interval = null;\r\n\t   \r\n\t  this.setupImages();\r\n\t  this.transition(trans, opts);\r\n\t},  \r\n\tfinishedLoading: function() {\r\n\t  var _this = this;\r\n\r\n\t  \/\/this.container.css({\r\n\t  \/\/  width: this.width+'px',\r\n\t  \/\/  height: this.height+'px'\r\n\t  \/\/});\r\n\r\n\t  this.imageContainer.removeClass('loading');\r\n\r\n\t  \/\/ Should we setup a pagination view?\r\n\t  \/* if(this.options.pagination)\r\n\t  {\r\n\t\t\/\/ TODO: Attach to touch events if appropriate\r\n\t\tthis.pagination = $('<ul class=\"pagination\"><\/ul>').css({\r\n\t\t  \/\/margin: '0px',\r\n\t\t  \/\/padding: '0px',\r\n\t\t  \/\/'text-align': 'center'\r\n\t\t});\r\n\r\n\t\tthis.pagination.bind('click', function(event){\r\n\t\t  event.preventDefault();\r\n\t\t  _this.showImage($(event.target).data('index'));\r\n\t\t});\r\n\r\n\t\t$(this.images).each(function(index, image){\r\n\t\t  var li = $('<li data-index=\"'+index+'\">'+(index+1)+'<\/li>').css({\r\n\t\t\tdisplay: 'inline-block',\r\n\t\t\t'margin-left': '0.5em',\r\n\t\t\t'cursor': 'pointer'\r\n\t\t  }).appendTo(_this.pagination);\r\n\r\n\t\t  if(index == 0)\r\n\t\t\tli.css('margin-left', 0).addClass('current');\r\n\t\t});\r\n\r\n\t\tthis.container.append(this.pagination);\r\n\t  } *\/\r\n\r\n\t  \/\/ Resize\r\n\t  $(this.imageContainer).css({\r\n\t\twidth: '100%',\r\n\t\theight: '100%'\r\n\t  });\r\n\r\n\t  $(this.image1).css({\r\n\t\twidth: '100%',\r\n\t\theight: '100%'\r\n\t  });\r\n\r\n\t  $(this.image2).css({\r\n\t\twidth: '100%',\r\n\t\theight: '100%'\r\n\t  });\r\n\r\n\t  \/\/this.container.css({\r\n\t  \/\/  width: this.width+'px',\r\n\t  \/\/  height: this.height+(this.options.pagination?this.pagination.height():0)+'px'\r\n\t  \/\/});\r\n\t   \r\n\t  \/\/ Should we add prev\/next controls?\r\n\t  if(this.options.controls)\r\n\t  {\r\n\t\tvar css = {\r\n\t\t  padding: '4px 10px 10px',\r\n\t\t  'font-size': '30px',\r\n\t\t  'font-family': 'arial, sans-serif',\r\n\t\t  'line-height': '1em',\r\n\t\t  'font-weight': 'bold',\r\n\t\t  color: '#FFF',\r\n\t\t  'text-decoration': 'none',\r\n\t\t  background: 'rgba(0,0,0,0.5)',\r\n\t\t  position: 'absolute',\r\n\t\t  'z-index': 2000\r\n\t\t};\r\n\t\t\r\n\t\tthis.nextButton = $('<a href=\"#\">\u00bb<\/a>').css(css).css3({\r\n\t\t  'border-radius': '4px'\r\n\t\t}).appendTo(this.surface).bind('click', function(event){\r\n\t\t  event.preventDefault();\r\n\t\t  _this.next();\r\n\t\t});\r\n\t\t\r\n\t\tthis.prevButton = $('<a href=\"#\">\u00ab<\/a>').css(css).css3({\r\n\t\t  'border-radius': '4px'\r\n\t\t}).appendTo(this.surface).bind('click', function(event){\r\n\t\t  event.preventDefault();\r\n\t\t  _this.prev();\r\n\t\t});\r\n\t\t\r\n\t\tvar top = (this.height - this.nextButton.height())\/2;\r\n\t\t\r\n\t\tthis.nextButton.css({\r\n\t\t  top: '40%',\r\n\t\t  right: '10px'\r\n\t\t});\r\n\t\t\r\n\t\tthis.prevButton.css({\r\n\t\t  top: '40%',\r\n\t\t  left: '10px'\r\n\t\t});\r\n\t  }\r\n\t   \r\n\t  \/\/ Should we use captions?\r\n\t  if(this.options.captions)\r\n\t  {\r\n\t\tthis.captionBar = $('<div class=\"caption\"><\/div>').css({\r\n\t\t  background: 'rgba(0,0,0,0.6)',\r\n\t\t  color: '#FFF',\r\n\t\t  'font-size': '16px',\r\n\t\t  'font-family': 'helvetica, arial, sans-serif',\r\n\t\t  'text-decoration': 'none',\r\n\t\t  'font-weight': 'bold',\r\n\t\t  padding: '1.5em 1em',\r\n\t\t  opacity: 0,\r\n\t\t  position: 'absolute',\r\n\t\t  'z-index': 110,\r\n\t\t  width: '100%',\r\n\t\t  bottom: 0\r\n\t\t}).css3({\r\n\t\t  'transition-property': 'opacity',\r\n\t\t  'transition-duration': '800ms',\r\n\t\t  'box-sizing': 'border-box'\r\n\t\t}).prependTo(this.surface);\r\n\t  }\r\n\t   \r\n\t  this.updateCaption();\r\n\t},\r\n\tsetupImages: function() {\r\n\t  var img1 = this.getImage(this.currentImageIndex),\r\n\t\tcss1 = {\r\n\t\t  'background-image': 'url(\"'+img1.src+'\")',\r\n\t\t  'background-size': 'auto 100%',\r\n\t\t  'z-index': 101,\r\n\t\t  'cursor': 'auto'\r\n\t\t};\r\n\r\n\t  \/\/ Does this image have an associated link?\r\n\t  if($(img1).data('href'))\r\n\t  {\r\n\t\tcss1.cursor = 'pointer';\r\n\t\tthis.image1.addClass('hasLink');\r\n\t\tthis.image1.data('href', $(img1).data('href'));\r\n\t  }\r\n\t  else\r\n\t  {\r\n\t\tthis.image1.removeClass('hasLink');\r\n\t\tthis.image1.data('href', null);\r\n\t  }\r\n\r\n\t  this.image1.css(css1).children().remove();\r\n\r\n\t  this.image2.css({\r\n\t\t'background-image': 'url(\"'+this.getImage(this.nextImageIndex).src+'\")',\r\n\t\t'background-size': 'auto 100%',\r\n\t\t'z-index': 100\r\n\t  }).show();\r\n\r\n\t  \/* if(this.options.pagination && this.pagination)\r\n\t  {\r\n\t\tthis.pagination.find('li.current').removeClass('current');\r\n\t\t$(this.pagination.find('li')[this.currentImageIndex]).addClass('current');\r\n\t  } *\/\r\n\t},\r\n\ttransition: function(transition, opts) {\r\n\t  \/\/ Allow a transition to be picked from ALL available transitions (not just the reduced set)\r\n\t\t  if(transition == undefined || !flux.transitions[transition])\r\n\t\t  {\r\n\t\t\t  \/\/ Pick a transition at random from the (possibly reduced set of) transitions\r\n\t\t\t  var index = Math.floor(Math.random()*(this.options.transitions.length));\r\n\t\t\t  transition = this.options.transitions[index];\r\n\t\t  }\r\n\t   \r\n\t  var tran = null;\r\n\r\n\t  try {\r\n\t\t\ttran = new flux.transitions[transition](this, $.extend(this.options[transition] ? this.options[transition] : {}, opts));\r\n\t  }\r\n\t  catch(e) {\r\n\t\t\/\/ If an invalid transition has been provided then use the fallback (default is to just switch the image)\r\n\t\ttran = new flux.transition(this, {fallback: true});\r\n\t  }\r\n\r\n\t\t  tran.run();\r\n\t   \r\n\t\t  this.currentImageIndex = this.nextImageIndex;\r\n\t\t  this.setNextIndex(this.currentImageIndex+1);\r\n\t  this.updateCaption();\r\n\t},\r\n\tupdateCaption: function() {\r\n\t  var str = $(this.getImage(this.currentImageIndex)).attr('title');\r\n\t  var desc = $(this.getImage(this.currentImageIndex)).attr('description');\r\n\t  if(this.options.captions && this.captionBar)\r\n\t  {\r\n\t\tif(str !== \"\"){\r\n\t\t\tif(desc !== \"\")\r\n\t\t\t{this.captionBar.html(str+'&nbsp:&nbsp'+desc);}\r\n\t\t\telse\r\n\t\t\t{this.captionBar.html(str);}\r\n\t\t} else {\r\n\t\t\tthis.captionBar.html(desc);\r\n\t\t}\r\n\t\tthis.captionBar.css('opacity', (str === \"\" && desc === \"\") ? 0 : 1);\r\n\t  }\r\n\t},\r\n\tgetImage: function(index) {\r\n\t  index = index % this.images.length;\r\n\r\n\t  return this.images[index];\r\n\t},\r\n\tsetNextIndex: function(nextIndex)\r\n\t{\r\n\t  if(nextIndex == undefined)\r\n\t\tnextIndex = this.currentImageIndex+1;\r\n\r\n\t  this.nextImageIndex = nextIndex;\r\n\r\n\t  if(this.nextImageIndex > this.images.length-1)\r\n\t\tthis.nextImageIndex = 0;\r\n\r\n\t  if(this.nextImageIndex < 0)\r\n\t\tthis.nextImageIndex = this.images.length-1;\r\n\t},\r\n\tincrement: function() {\r\n\t  this.currentImageIndex++;\r\n\t  if(this.currentImageIndex > this.images.length-1)\r\n\t\tthis.currentImageIndex = 0;\r\n\t}\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n\/**\r\n * Helper object to determine support for various CSS3 functions\r\n * @author Joe Lambert\r\n *\/\r\n\r\n(function($) {\r\n  flux.browser = {\r\n\tinit: function() {\r\n\t  \/\/ Have we already been initialised?\r\n\t  if(flux.browser.supportsTransitions !== undefined)\r\n\t\treturn;\r\n\r\n\t  var div = document.createElement('div'),\r\n\t\tprefixes = ['-webkit', '-moz', '-o', '-ms'],\r\n\t\tdomPrefixes = ['Webkit', 'Moz', 'O', 'Ms'];\r\n\r\n\t  \/\/ Does the current browser support CSS Transitions?\r\n\t  if(window.Modernizr && Modernizr.csstransitions !== undefined)\r\n\t\tflux.browser.supportsTransitions = Modernizr.csstransitions;\r\n\t  else\r\n\t  {\r\n\t\tflux.browser.supportsTransitions = this.supportsCSSProperty('Transition');\r\n\t  }\r\n\r\n\t  \/\/ Does the current browser support 3D CSS Transforms?\r\n\t  if(window.Modernizr && Modernizr.csstransforms3d !== undefined)\r\n\t\tflux.browser.supports3d = Modernizr.csstransforms3d;\r\n\t  else\r\n\t  {\r\n\t\t\/\/ Custom detection when Modernizr isn't available\r\n\t\tflux.browser.supports3d = this.supportsCSSProperty(\"Perspective\");\r\n\t\t\r\n\t\tif ( flux.browser.supports3d && 'webkitPerspective' in $('body').get(0).style ) {\r\n\t\t  \/\/ Double check with a media query (similar to how Modernizr does this)\r\n\t\t  var div3D = $('<div id=\"csstransform3d\"><\/div>');\r\n\t\t  var mq = $('<style media=\"(transform-3d), ('+prefixes.join('-transform-3d),(')+'-transform-3d)\">div#csstransform3d { position: absolute; left: 9px }<\/style>');\r\n\r\n\t\t  $('body').append(div3D);\r\n\t\t  $('head').append(mq);\r\n\r\n\t\t  flux.browser.supports3d = div3D.get(0).offsetLeft == 9;\r\n\r\n\t\t  div3D.remove();\r\n\t\t  mq.remove();  \r\n\t\t}\r\n\t  }\r\n\r\n\t},\r\n\tsupportsCSSProperty: function(prop) {\r\n\t  var div = document.createElement('div'),\r\n\t\tprefixes = ['-webkit', '-moz', '-o', '-ms'],\r\n\t\tdomPrefixes = ['Webkit', 'Moz', 'O', 'Ms'];\r\n\t\t\r\n\t  var support = false;\r\n\t  for(var i=0; i<domPrefixes.length; i++)\r\n\t  {\r\n\t\tif(domPrefixes[i]+prop in div.style)\r\n\t\t  support = support || true;\r\n\t  }\r\n\t   \r\n\t  return support;\r\n\t},\r\n\ttranslate: function(x, y, z) {\r\n\t  x = (x != undefined) ? x : 0;\r\n\t  y = (y != undefined) ? y : 0;\r\n\t  z = (z != undefined) ? z : 0;\r\n\r\n\t  return 'translate' + (flux.browser.supports3d ? '3d(' : '(') + x + 'px,' + y + (flux.browser.supports3d ? 'px,' + z + 'px)' : 'px)');\r\n\t},\r\n\r\n\trotateX: function(deg) {\r\n\t  return flux.browser.rotate('x', deg);\r\n\t},\r\n\r\n\trotateY: function(deg) {\r\n\t  return flux.browser.rotate('y', deg);\r\n\t},\r\n\r\n\trotateZ: function(deg) {\r\n\t  return flux.browser.rotate('z', deg);\r\n\t},\r\n\r\n\trotate: function(axis, deg) {\r\n\t  if(!axis in {'x':'', 'y':'', 'z':''})\r\n\t\taxis = 'z';\r\n\r\n\t  deg = (deg != undefined) ? deg : 0;\r\n\r\n\t  if(flux.browser.supports3d)\r\n\t\treturn 'rotate3d('+(axis == 'x' ? '1' : '0')+', '+(axis == 'y' ? '1' : '0')+', '+(axis == 'z' ? '1' : '0')+', '+deg+'deg)';\r\n\t  else\r\n\t  {\r\n\t\tif(axis == 'z')\r\n\t\t  return 'rotate('+deg+'deg)';\r\n\t\telse\r\n\t\t  return '';\r\n\t  }\r\n\t}\r\n  };\r\n\r\n  $(function(){\r\n\t\/\/ To continue to work with legacy code, ensure that flux.browser is initialised on document ready at the latest\r\n\tflux.browser.init();\r\n  });\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($){\r\n  \/**\r\n   * Helper function for cross-browser CSS3 support, prepends all possible prefixes to all properties passed in\r\n   * @param {Object} props Ker\/value pairs of CSS3 properties\r\n   *\/\r\n  $.fn.css3 = function(props) {\r\n\tvar css = {};\r\n\tvar prefixes = ['webkit', 'moz', 'ms', 'o'];\r\n\r\n\tfor(var prop in props)\r\n\t{\r\n\t  \/\/ Add the vendor specific versions\r\n\t  for(var i=0; i<prefixes.length; i++)\r\n\t\tcss['-'+prefixes[i]+'-'+prop] = props[prop];\r\n\t   \r\n\t  \/\/ Add the actual version \r\n\t  css[prop] = props[prop];\r\n\t}\r\n\t\r\n\tthis.css(css);\r\n\treturn this;\r\n  };\r\n  \r\n  \/**\r\n   * Helper function to bind to the correct transition end event\r\n   * @param {function} callback The function to call when the event fires\r\n   *\/\r\n  $.fn.transitionEnd = function(callback) {\r\n\tvar _this = this;\r\n\t\r\n\tvar events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd'];\r\n\t\r\n\tfor(var i=0; i < events.length; i++)\r\n\t{\r\n\t  this.bind(events[i], function(event){\r\n\t\t\/\/ Automatically stop listening for the event\r\n\t\tfor(var j=0; j<events.length;j++)\r\n\t\t  $(this).unbind(events[j]);\r\n\r\n\t\t\/\/ Perform the callback function\r\n\t\tif(callback)\r\n\t\t  callback.call(this, event);\r\n\t  });\r\n\t}\r\n\t\r\n\treturn this;\r\n  };\r\n\r\n  flux.transition = function(fluxslider, opts) {\r\n\tthis.options = $.extend({\r\n\t  requires3d: false,\r\n\t  after: function() {\r\n\t\t\/\/ Default callback for after the transition has completed\r\n\t  }\r\n\t}, opts);\r\n\r\n\tthis.slider = fluxslider;\r\n\r\n\t\/\/ We need to ensure transitions degrade gracefully if the transition is unsupported or not loaded\r\n\tif((this.options.requires3d && !flux.browser.supports3d) || !flux.browser.supportsTransitions || this.options.fallback === true)\r\n\t{\r\n\t  var _this = this;\r\n\t   \r\n\t  this.options.after = undefined;\r\n\r\n\t  this.options.setup = function() {\r\n\t\t\/\/console.error(\"Fallback setup()\");\r\n\t\t_this.fallbackSetup();\r\n\t  };\r\n\t   \r\n\t  this.options.execute = function() {\r\n\t\t\/\/console.error(\"Fallback execute()\");\r\n\t\t_this.fallbackExecute();\r\n\t  };\r\n\t}\r\n  };\r\n\r\n  flux.transition.prototype = {\r\n\tconstructor: flux.transition,\r\n\thasFinished: false, \/\/ This is a lock to ensure that the fluxTransitionEnd event is only fired once per tansition\r\n\trun: function() {\r\n\t  var _this = this;\r\n\r\n\t  \/\/ do something\r\n\t  if(this.options.setup !== undefined)\r\n\t\tthis.options.setup.call(this);\r\n\t   \r\n\t  \/\/ Remove the background image from the top image\r\n\t  this.slider.image1.css({\r\n\t\t'background-image': 'none'\r\n\t  });\r\n\r\n\t  this.slider.imageContainer.css('overflow', this.options.requires3d ? 'visible' : 'hidden');\r\n\r\n\t  \/\/ For some of the 3D effects using Zepto we need to delay the transitions for some reason\r\n\t  setTimeout(function(){\r\n\t\tif(_this.options.execute !== undefined)\r\n\t\t  _this.options.execute.call(_this);\r\n\t  }, 5);\r\n\t},\r\n\tfinished: function() {\r\n\t  if(this.hasFinished)\r\n\t\treturn;\r\n\t\t\r\n\t  this.hasFinished = true;\r\n\t   \r\n\t  if(this.options.after)\r\n\t\tthis.options.after.call(this);\r\n\r\n\t  this.slider.imageContainer.css('overflow', 'hidden'); \r\n\r\n\t  this.slider.setupImages();\r\n\r\n\t  \/\/ Trigger an event to signal the end of a transition\r\n\t  this.slider.element.trigger('fluxTransitionEnd', {\r\n\t\tcurrentImage: this.slider.getImage(this.slider.currentImageIndex)\r\n\t  });\r\n\t},\r\n\tfallbackSetup: function() {\r\n\t   \r\n\t},\r\n\tfallbackExecute: function() {\r\n\t  this.finished();\r\n\t}\r\n  };\r\n\r\n  flux.transitions = {};\r\n  \r\n  \/\/ Flux grid transition\r\n  \r\n  flux.transition_grid = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  columns: 7,\r\n\t  rows: 7,\r\n\t  forceSquare: false,\r\n\t  setup: function() {\r\n\t\tvar imgWidth = this.slider.image1.width(),\r\n\t\t  imgHeight = this.slider.image1.height();\r\n\t\t   \r\n\t\tvar colWidth = Math.floor(imgWidth \/ this.options.columns),\r\n\t\t  rowHeight = Math.floor(imgHeight \/ this.options.rows);\r\n\t\t   \r\n\t\tif(this.options.forceSquare)\r\n\t\t{\r\n\t\t  rowHeight = colWidth;\r\n\t\t  this.options.rows = Math.floor(imgHeight \/ rowHeight);\r\n\t\t}\r\n\r\n\t\t\/\/ Work out how much space remains with the adjusted barWidth\r\n\t\tvar colRemainder = imgWidth - (this.options.columns * colWidth),\r\n\t\t  colAddPerLoop = Math.ceil(colRemainder \/ this.options.columns),\r\n\t\t   \r\n\t\t  rowRemainder = imgHeight - (this.options.rows * rowHeight),\r\n\t\t  rowAddPerLoop = Math.ceil(rowRemainder \/ this.options.rows),\r\n\t\t   \r\n\t\t  delayBetweenBars = 150,\r\n\t\t  height = this.slider.image1.height(),\r\n\t\t  totalLeft = 0,\r\n\t\t  totalTop = 0,\r\n\t\t  fragment = document.createDocumentFragment();\r\n\t\t\r\n\t\tfor(var i=0; i<this.options.columns; i++) {\r\n\t\t  var thisColWidth = colWidth,\r\n\t\t\ttotalTop = 0;\r\n\r\n\t\t  if(colRemainder > 0)\r\n\t\t  {\r\n\t\t\tvar add = colRemainder >= colAddPerLoop ? colAddPerLoop : colRemainder;\r\n\t\t\tthisColWidth += add;\r\n\t\t\tcolRemainder -= add;\r\n\t\t  }\r\n\t\t   \r\n\t\t  for(var j=0; j<this.options.rows; j++)\r\n\t\t  {\r\n\t\t\tvar thisRowHeight = rowHeight,\r\n\t\t\t  thisRowRemainder = rowRemainder;\r\n\r\n\t\t\tif(thisRowRemainder > 0)\r\n\t\t\t{\r\n\t\t\t  var add = thisRowRemainder >= rowAddPerLoop ? rowAddPerLoop : thisRowRemainder;\r\n\t\t\t  thisRowHeight += add;\r\n\t\t\t  thisRowRemainder -= add;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tvar tile = $('<div class=\"tile tile-'+i+'-'+j+'\"><\/div>').css({\r\n\t\t\t  width: thisColWidth+'px',\r\n\t\t\t  height: thisRowHeight+'px',\r\n\t\t\t  position: 'absolute',\r\n\t\t\t  top: totalTop+'px',\r\n\t\t\t  left: totalLeft+'px',\r\n\t\t\t  'background-size' : ((imgWidth \/ thisColWidth) * 100 ) + '%,' + ((imgHeight \/ thisRowHeight) * 100) + '%'\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\tthis.options.renderTile.call(this, tile, i, j, thisColWidth, thisRowHeight, totalLeft, totalTop);\r\n\t\t\t\r\n\t\t\tfragment.appendChild(tile.get(0));\r\n\t\t\t\r\n\t\t\ttotalTop += thisRowHeight;\r\n\t\t  }\r\n\t\t   \r\n\t\t  totalLeft += thisColWidth;\r\n\t\t}\r\n\r\n\t\t\/\/ Append the fragement to the surface\r\n\t\tthis.slider.image1.get(0).appendChild(fragment);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this,\r\n\t\t  height = this.slider.image1.height(),\r\n\t\t  bars = this.slider.image1.find('div.barcontainer');\r\n\r\n\t\tthis.slider.image2.hide();\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\tbars.last().transitionEnd(function(event){\r\n\t\t  _this.slider.image2.show();\r\n\r\n\t\t  _this.finished();\r\n\t\t});\r\n\r\n\t\tbars.css3({\r\n\t\t  'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height\/2, height\/2)\r\n\t\t});\r\n\t  },\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\t\r\n\t  }\r\n\t}, opts));  \r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.bars = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  columns: 10, \/\/ Number of Columns for Bars check\r\n\t  rows: 1,\r\n\t  delayBetweenBars: 50, \/\/ delay between for bars\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\t$(elem).css({\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px 0px'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms', \/\/Transition Duration Bars\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms'\r\n\t\t});\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n  \r\n\t\tvar height = this.slider.image1.height();\r\n  \r\n\t\tvar bars = this.slider.image1.find('div.tile');\r\n  \r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\t$(bars[bars.length-1]).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  bars.css({\r\n\t\t\t'opacity': '0.5'\r\n\t\t  }).css3({\r\n\t\t\t'transform': flux.browser.translate(0, height)\r\n\t\t  });\r\n\t\t}, 50);\r\n\t\t\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.bars3d = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  requires3d: true,\r\n\t  columns: 10, \/\/ Number of Columns for Bars3d\r\n\t  rows: 1,\r\n\t  delayBetweenBars: 50, \/\/ Delay between Bars3d\r\n\t  perspective: 1000,\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\tvar bar = $('<div class=\"bar-'+colIndex+'\"><\/div>').css({\r\n\t\t  width: colWidth+'px',\r\n\t\t  height: '100%',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: '0px',\r\n\t\t  'z-index': 200,\r\n\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px 0px',\r\n\t\t  'background-repeat': 'no-repeat',\r\n\t\t  'background-size': 'auto 100%'\r\n\t\t}).css3({\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t}),\r\n\r\n\t\tbar2 = $(bar.get(0).cloneNode(false)).css({\r\n\t\t  'background-image': this.slider.image2.css('background-image'),\r\n\t\t  'background-size': 'auto 100%'\r\n\t\t}).css3({\r\n\t\t  'transform': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -rowHeight\/2, rowHeight\/2)\r\n\t\t}),\r\n\r\n\t\tleft = $('<div class=\"side bar-'+colIndex+'\"><\/div>').css({\r\n\t\t  width: rowHeight+'px',\r\n\t\t  height: rowHeight+'px',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: '0px',\r\n\t\t  background: '#222',\r\n\t\t  'z-index': 190\r\n\t\t}).css3({\r\n\t\t  'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight\/2, 0, -rowHeight\/2) + ' ' + flux.browser.rotateY(180),\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t}),\r\n\r\n\t\tright = $(left.get(0).cloneNode(false)).css3({\r\n\t\t  'transform': flux.browser.rotateY(90) + ' ' + flux.browser.translate(rowHeight\/2, 0, colWidth-rowHeight\/2)\r\n\t\t});\r\n\r\n\t\t$(elem).css({\r\n\t\t  width: colWidth+'px',\r\n\t\t  height: '100%',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: leftOffset+'px',\r\n\t\t  'z-index': colIndex > this.options.columns\/2 ? 1000-colIndex : 1000 \/\/ Fix for Chrome to ensure that the z-index layering is correct!\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms', \/\/Transition Duration Bars3d\r\n\t\t  'transition-timing-function': 'linear',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': (colIndex*this.options.delayBetweenBars)+'ms',\r\n\t\t  'transform-style': 'preserve-3d'\r\n\t\t}).append(bar).append(bar2).append(left).append(right);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tthis.slider.image1.css3({\r\n\t\t  'perspective': this.options.perspective,\r\n\t\t  'perspective-origin': '50% 50%'\r\n\t\t}).css({\r\n\t\t  '-moz-transform': 'perspective('+this.options.perspective+'px)',\r\n\t\t  '-moz-perspective': 'none',\r\n\t\t  '-moz-transform-style': 'preserve-3d'\r\n\t\t});\r\n\t\t\r\n\t\tvar _this = this,\r\n\t\t  height = this.slider.image1.height(),\r\n\t\t  bars = this.slider.image1.find('div.tile');\r\n\r\n\t\tthis.slider.image2.hide();\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\tbars.last().transitionEnd(function(event){\r\n\t\t  _this.slider.image1.css3({\r\n\t\t\t'transform-style': 'flat'\r\n\t\t  });\r\n\t\t   \r\n\t\t  _this.slider.image2.show();\r\n\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  bars.css3({\r\n\t\t\t'transform': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height\/2, height\/2)\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {  \r\n  flux.transitions.blinds = function(fluxslider, opts) {\r\n\treturn new flux.transitions.bars(fluxslider, $.extend({\r\n\t\tcolumns: 10,\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tvar height = this.slider.image1.height();\r\n\r\n\t\tvar bars = this.slider.image1.find('div.tile');\r\n\r\n\t\t\/\/ Get notified when the last transition has completed.\r\n\t\t$(bars[bars.length-1]).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  bars.css({\r\n\t\t\t'opacity': '0.5'\r\n\t\t  }).css3({\r\n\t\t\t'transform': 'scalex(0.0001)'\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  }\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.blinds3d = function(fluxslider, opts) {\r\n\treturn new flux.transitions.tiles3d(fluxslider, $.extend({\r\n\t  forceSquare: false,\r\n\t  rows: 1,\r\n\t  columns: 10 \/\/ Number of Columns Blind3d\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.zip = function(fluxslider, opts) {\r\n\treturn new flux.transitions.bars(fluxslider, $.extend({\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tvar height = this.slider.image1.height();\r\n\r\n\t\tvar bars = this.slider.image1.find('div.tile');\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\t$(bars[bars.length-1]).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  bars.each(function(index, bar){           \r\n\t\t\t$(bar).css({\r\n\t\t\t  'opacity': '0.3'\r\n\t\t\t}).css3({\r\n\t\t\t  'transform': flux.browser.translate(0, (index%2 ? '-'+(2*height) : height))\r\n\t\t\t});   \r\n\t\t  });\r\n\t\t}, 20);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.blocks = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  forceSquare: true,\r\n\t  delayBetweenBars: 100, \/\/ Time Delay Blocks\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\tvar delay = Math.floor(Math.random()*10*this.options.delayBetweenBars);\r\n\t\t\r\n\t\t$(elem).css({\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px -'+topOffset+'px'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms', \/\/Transition time Blocks\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': delay+'ms'\r\n\t\t});\r\n\t\t\r\n\t\t\/\/ Keep track of the last elem to fire\r\n\t\tif(this.maxDelay === undefined)\r\n\t\t  this.maxDelay = 0;\r\n\t\t   \r\n\t\tif(delay > this.maxDelay)\r\n\t\t{\r\n\t\t  this.maxDelay = delay;\r\n\t\t  this.maxDelayTile = elem;\r\n\t\t}\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n  \r\n\t\tvar blocks = this.slider.image1.find('div.tile');\r\n  \r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\tthis.maxDelayTile.transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n  \r\n\t\tsetTimeout(function(){\r\n\t\t  blocks.each(function(index, block){       \r\n\t\t\t$(block).css({\r\n\t\t\t  'opacity': '0'\r\n\t\t\t}).css3({\r\n\t\t\t  'transform': 'scale(0.8)'\r\n\t\t\t});\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.blocks2 = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  cols: 12, \/\/ Number of Colums dblocks\r\n\t  forceSquare: true,\r\n\t  delayBetweenDiagnols: 150, \/\/ Time Delay dblocks\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\tvar delay = Math.floor(Math.random()*10*this.options.delayBetweenBars);\r\n\t\t\r\n\t\t$(elem).css({\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px -'+topOffset+'px'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '400ms', \/\/ Animation Time dblocks\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': (colIndex+rowIndex)*this.options.delayBetweenDiagnols+'ms',\r\n\t\t  'backface-visibility': 'hidden' \/\/ trigger hardware acceleration\r\n\t\t});\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n  \r\n\t\tvar blocks = this.slider.image1.find('div.tile');\r\n  \r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\tblocks.last().transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  blocks.each(function(index, block){       \r\n\t\t\t$(block).css({\r\n\t\t\t  'opacity': '0'\r\n\t\t\t}).css3({\r\n\t\t\t  'transform': 'scale(0.8)'\r\n\t\t\t});\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.blocks3 = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  cols: 12, \/\/ Number of Columns dblock3d\r\n\t  forceSquare: true,\r\n\t  delayBetweenDiagnols: 150, \/\/ Delay dblocks3d\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\tvar delay = Math.floor(Math.random()*10*this.options.delayBetweenBars);\r\n\t\t\r\n\t\t$(elem).css({\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px -'+topOffset+'px'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '350ms', \/\/ Animation time dblocks3d\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': (colIndex+rowIndex)*this.options.delayBetweenDiagnols+'ms',\r\n\t\t  'backface-visibility': 'hidden' \/\/ trigger hardware acceleration\r\n\t\t});\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n  \r\n\t\tvar blocks = this.slider.image1.find('div.tile');\r\n  \r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\tblocks.last().transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  blocks.each(function(index, block){       \r\n\t\t\t$(block).css({\r\n\t\t\t  \/\/'opacity': '0',\r\n\t\t\t  'borderRadius': '50%'\r\n\t\t\t}).css3({\r\n\t\t\t  'transform': 'scale(0)'\r\n\t\t\t});\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.concentric = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  blockSize: 40, \/\/ Blocksize Concentric\r\n\t  delay: 150, \/\/ Delay time Concentric\r\n\t  alternate: false,\r\n\t  setup: function() {\r\n\t\tvar w = this.slider.image1.width(),\r\n\t\t  h = this.slider.image1.height(),\r\n\t\t  largestLength = Math.sqrt(w*w + h*h), \/\/ Largest length is the diagonal\r\n\r\n\t\t  \/\/ How many blocks do we need?\r\n\t\t  blockCount = Math.ceil(((largestLength-this.options.blockSize)\/2) \/ this.options.blockSize) + 1, \/\/ 1 extra to account for the round border\r\n\t\t  fragment = document.createDocumentFragment();\r\n\r\n\t\tfor(var i=0; i<blockCount; i++)\r\n\t\t{\r\n\t\t  var thisBlockSize = (2*i*this.options.blockSize)+this.options.blockSize;\r\n\r\n\t\t  var block = $('<div><\/div>').attr('class', 'block block-'+i).css({\r\n\t\t\twidth: thisBlockSize+'px',\r\n\t\t\theight: thisBlockSize+'px',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: ((h-thisBlockSize)\/2)+'px',\r\n\t\t\tleft: ((w-thisBlockSize)\/2)+'px',\r\n\r\n\t\t\t'z-index': 100+(blockCount-i),\r\n\r\n\t\t\t'background-image': this.slider.image1.css('background-image'),\r\n\t\t\t'background-position': 'center center',\r\n\t\t\t'background-size' : ((w \/ thisBlockSize) * 100)+'% ' + ((h \/ thisBlockSize) * 100)+'%'\r\n\t\t  }).css3({\r\n\t\t\t'border-radius': thisBlockSize+'px',\r\n\t\t\t'transition-duration': '800ms', \/\/Transition time Concentric\r\n\t\t\t'transition-timing-function': 'linear',\r\n\t\t\t'transition-property': 'all',\r\n\t\t\t'transition-delay': ((blockCount-i)*this.options.delay)+'ms'\r\n\t\t  });\r\n\r\n\t\t  fragment.appendChild(block.get(0));\r\n\t\t}\r\n\r\n\t\t\/\/this.slider.image1.append($(fragment));\r\n\t\tthis.slider.image1.get(0).appendChild(fragment);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tvar blocks = this.slider.image1.find('div.block');\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\t$(blocks[0]).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\r\n\t\tsetTimeout(function(){\r\n\t\t  blocks.each(function(index, block){\r\n\t\t\t$(block).css({\r\n\t\t\t  'opacity': '0'\r\n\t\t\t}).css3({\r\n\t\t\t  'transform': flux.browser.rotateZ((!_this.options.alternate || index%2 ? '' : '-')+'90')\r\n\t\t\t});\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.warp = function(fluxslider, opts) {\r\n\treturn new flux.transitions.concentric(fluxslider, $.extend({\r\n\t  delay: 30, \/\/ Delay time for Warp\r\n\t  alternate: true\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.cube = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  requires3d: true,\r\n\t  barWidth: 100,\r\n\t  direction: 'left', \/\/ Direction for Cube\r\n\t  perspective: 1000,\r\n\t  setup: function() {\r\n\t\tvar width = this.slider.image1.width();\r\n\t\tvar height = this.slider.image1.height();\r\n\r\n\t\t\/\/ Setup the container to allow 3D perspective\r\n\r\n\t\tthis.slider.image1.css3({\r\n\t\t  'perspective': this.options.perspective,\r\n\t\t  'perspective-origin': '50% 50%'\r\n\t\t});\r\n\r\n\t\tthis.cubeContainer = $('<div class=\"cube\"><\/div>').css({\r\n\t\t  width: width+'px',\r\n\t\t  height: height+'px',\r\n\t\t  position: 'relative'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms', \/\/ Time Duration Cube \r\n\t\t  'transition-timing-function': 'linear',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transform-style': 'preserve-3d'\r\n\t\t});\r\n\r\n\t\tvar css = {\r\n\t\t  height: '100%',\r\n\t\t  width: '100%',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: '0px'\r\n\t\t};\r\n\r\n\t\tvar currentFace = $('<div class=\"face current\"><\/div>').css($.extend(css, {\r\n\t\t  background: this.slider.image1.css('background-image'),\r\n\t\t  'background-size': 'auto 100%'\r\n\t\t})).css3({\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t});\r\n\r\n\t\tthis.cubeContainer.append(currentFace);\r\n\r\n\t\tvar nextFace = $('<div class=\"face next\"><\/div>').css($.extend(css, {\r\n\t\t  background: this.slider.image2.css('background-image'),\r\n\t\t  'background-size': 'auto 100%'\r\n\t\t})).css3({\r\n\t\t  'transform' : this.options.transitionStrings.call(this, this.options.direction, 'nextFace'),\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t});\r\n\r\n\t\tthis.cubeContainer.append(nextFace);\r\n\r\n\t\tthis.slider.image1.append(this.cubeContainer);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tvar width = this.slider.image1.width();\r\n\t\tvar height = this.slider.image1.height();\r\n\r\n\t\tthis.slider.image2.hide();\r\n\t\tthis.cubeContainer.transitionEnd(function(){\r\n\t\t  _this.slider.image2.show();\r\n\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  _this.cubeContainer.css3({\r\n\t\t\t'transform' : _this.options.transitionStrings.call(_this, _this.options.direction, 'container')\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  },\r\n\t  transitionStrings: function(direction, elem) {\r\n\t\tvar width = this.slider.image1.width();\r\n\t\tvar height = this.slider.image1.height();\r\n\r\n\t\t\/\/ Define the various transforms that are required to perform various cube rotations\r\n\t\tvar t = {\r\n\t\t  'up' : {\r\n\t\t\t'nextFace': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height\/2, height\/2),\r\n\t\t\t'container': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height\/2, height\/2)\r\n\t\t  },\r\n\t\t  'down' : {\r\n\t\t\t'nextFace': flux.browser.rotateX(90) + ' ' + flux.browser.translate(0, -height\/2, height\/2),\r\n\t\t\t'container': flux.browser.rotateX(-90) + ' ' + flux.browser.translate(0, height\/2, height\/2)\r\n\t\t  },\r\n\t\t  'left' : {\r\n\t\t\t'nextFace': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width\/2, 0, width\/2),\r\n\t\t\t'container': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width\/2, 0, width\/2)\r\n\t\t  },\r\n\t\t  'right' : {\r\n\t\t\t'nextFace': flux.browser.rotateY(-90) + ' ' + flux.browser.translate(-width\/2, 0, width\/2),\r\n\t\t\t'container': flux.browser.rotateY(90) + ' ' + flux.browser.translate(width\/2, 0, width\/2)\r\n\t\t  }\r\n\t\t};\r\n\r\n\t\treturn (t[direction] && t[direction][elem]) ? t[direction][elem] : false;\r\n\t  }\r\n\t}, opts));  \r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.tiles3d = function(fluxslider, opts) {\r\n\treturn new flux.transition_grid(fluxslider, $.extend({\r\n\t  requires3d: true,\r\n\t  forceSquare: true,\r\n\t  columns: 7, \/\/Number of Columns Tiles3d\r\n\t  perspective: 600,\r\n\t  delayBetweenBarsX: 200,\r\n\t  delayBetweenBarsY: 150,\r\n\t  renderTile: function(elem, colIndex, rowIndex, colWidth, rowHeight, leftOffset, topOffset) {\r\n\t\tvar tile = $('<div><\/div>').css({\r\n\t\t  width: colWidth+'px',\r\n\t\t  height: rowHeight+'px',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: '0px',\r\n\t\t  \/\/'z-index': 200, \/\/ Removed to make compatible with FF10 (Chrome bug seems to have been fixed)\r\n\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': '-'+leftOffset+'px -'+topOffset+'px',\r\n\t\t  'background-repeat': 'no-repeat',\r\n\t\t  'background-size' : ((this.slider.image1.width() \/ colWidth) * 100 ) + '%,' + ((this.slider.image1.height() \/ rowHeight) * 100) + '%',\r\n\t\t  '-moz-transform': 'translateZ(1px)'\r\n\t\t}).css3({\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t});\r\n\r\n\t\tvar tile2 = $(tile.get(0).cloneNode(false)).css({\r\n\t\t  'background-image': this.slider.image2.css('background-image')\r\n\t\t  \/\/'z-index': 190 \/\/ Removed to make compatible with FF10 (Chrome bug seems to have been fixed)\r\n\t\t}).css3({\r\n\t\t  'transform': flux.browser.rotateY(180),\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t});\r\n\r\n\t\t$(elem).css({\r\n\t\t  'z-index': (colIndex > this.options.columns\/2 ? 500-colIndex : 500) + (rowIndex > this.options.rows\/2 ? 500-rowIndex : 500) \/\/ Fix for Chrome to ensure that the z-index layering is correct!\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms',\r\n\t\t  'transition-timing-function': 'ease-out',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'transition-delay': (colIndex*this.options.delayBetweenBarsX+rowIndex*this.options.delayBetweenBarsY)+'ms',\r\n\t\t  'transform-style': 'preserve-3d'\r\n\t\t}).append(tile).append(tile2);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tthis.slider.image1.css3({\r\n\t\t  'perspective': this.options.perspective,\r\n\t\t  'perspective-origin': '50% 50%'\r\n\t\t});\r\n\t\t\r\n\t\tvar _this = this;\r\n\r\n\t\tvar tiles = this.slider.image1.find('div.tile');\r\n\r\n\t\tthis.slider.image2.hide();\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\ttiles.last().transitionEnd(function(event){\r\n\t\t  _this.slider.image2.show();\r\n\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  tiles.css3({\r\n\t\t\t'transform': flux.browser.rotateY(180)\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.turn = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  requires3d: true,\r\n\t  perspective: 1300,\r\n\t  direction: 'left',\r\n\t  setup: function() {       \r\n\t\tvar tab = $('<div class=\"tab\"><\/div>').css({\r\n\t\t\twidth: '50%',\r\n\t\t\theight: '100%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: '0px',\r\n\t\t\tleft: this.options.direction == 'left' ? '50%' : '0%',\r\n\t\t\t'z-index':101\r\n\t\t  }).css3({\r\n\t\t\t'transform-style': 'preserve-3d',\r\n\t\t\t'transition-duration': '1000ms',\r\n\t\t\t'transition-timing-function': 'ease-out',\r\n\t\t\t'transition-property': 'all',\r\n\t\t\t'transform-origin': this.options.direction == 'left' ? 'left center' : 'right center'\r\n\t\t  }),\r\n\r\n\t\tfront = $('<div><\/div>').appendTo(tab).css({\r\n\t\t\t'background-image': this.slider.image1.css('background-image'),\r\n\t\t\t'background-position': (this.options.direction == 'left' ? '-'+(this.slider.image1.width()\/2) : 0)+'px 0',\r\n\t\t\t'background-size': 'auto 100%',\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '100%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: '0',\r\n\t\t\tleft: '0',\r\n\t\t\t'-moz-transform': 'translateZ(1px)'\r\n\t\t  }).css3({\r\n\t\t\t'backface-visibility': 'hidden'\r\n\t\t  }),\r\n\r\n\t\tback = $('<div><\/div>').appendTo(tab).css({\r\n\t\t\t'background-image': this.slider.image2.css('background-image'),\r\n\t\t\t'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()\/2))+'px 0',\r\n\t\t\t'background-size': 'auto 100%',\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '100%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: '0',\r\n\t\t\tleft: '0'\r\n\t\t  }).css3({\r\n\t\t\ttransform: flux.browser.rotateY(180),\r\n\t\t\t'backface-visibility': 'hidden'\r\n\t\t  }),\r\n\r\n\t\tcurrent = $('<div><\/div>').css({\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0',\r\n\t\t  left: this.options.direction == 'left' ? '0' : '50%',\r\n\t\t  width: '50%',\r\n\t\t  height: '100%',\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': (this.options.direction == 'left' ? 0 : '-'+(this.slider.image1.width()\/2))+'px 0',\r\n\t\t  'background-size': 'auto 100%',\r\n\t\t  'z-index':100\r\n\t\t}),\r\n\r\n\t\toverlay = $('<div class=\"overlay\"><\/div>').css({\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0',\r\n\t\t  left: this.options.direction == 'left' ? '50%' : '0',\r\n\t\t  width: '50%',\r\n\t\t  height: '100%',\r\n\t\t  background: '#000',\r\n\t\t  opacity: 1\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '800ms',\r\n\t\t  'transition-timing-function': 'linear',\r\n\t\t  'transition-property': 'opacity'\r\n\t\t}),\r\n\r\n\t\tcontainer = $('<div><\/div>').css3({\r\n\t\t  width: '100%',\r\n\t\t  height: '100%'\r\n\t\t}).css3({\r\n\t\t  'perspective': this.options.perspective,\r\n\t\t  'perspective-origin': '50% 50%'\r\n\t\t}).append(tab).append(current).append(overlay);\r\n\r\n\t\tthis.slider.image1.append(container);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tthis.slider.image1.find('div.tab').first().transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  _this.slider.image1.find('div.tab').css3({\r\n\t\t\t\/\/ 179 not 180 so that the tab rotates the correct way in Firefox\r\n\t\t\ttransform: flux.browser.rotateY(_this.options.direction == 'left' ? -179 : 179)\r\n\t\t  });\r\n\t\t  _this.slider.image1.find('div.overlay').css({\r\n\t\t\topacity: 0\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.turn2 = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  requires3d: true,\r\n\t  perspective: 1300,\r\n\t  directionV: 'bottom',\r\n\t  setup: function() {       \r\n\t\tvar tab = $('<div class=\"tab\"><\/div>').css({\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '50%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: this.options.directionV == 'top' ? '50%' : '0%',\r\n\t\t\tleft: '0px',\r\n\t\t\t'z-index':101\r\n\t\t  }).css3({\r\n\t\t\t'transform-style': 'preserve-3d',\r\n\t\t\t'transition-duration': '1000ms',\r\n\t\t\t'transition-timing-function': 'ease-out',\r\n\t\t\t'transition-property': 'all',\r\n\t\t\t'transform-origin': this.options.directionV == 'top' ? 'center top' : 'center bottom'\r\n\t\t  }),        \r\n\t\tfront = $('<div><\/div>').appendTo(tab).css({\r\n\t\t\t'background-image': this.slider.image1.css('background-image'),\r\n\t\t\t'background-position': (this.options.directionV == 'top' ? '0 -'+(this.slider.image1.height()\/2) : '0 -'+(this.slider.image1.height()))+'px',\r\n\t\t\t'background-size': '100% auto',\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '100%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: '0',\r\n\t\t\tleft: '0',\r\n\t\t\t'-moz-transform': 'translateZ(1px)'\r\n\t\t  }).css3({\r\n\t\t\t'backface-visibility': 'hidden'\r\n\t\t  }),\r\n\r\n\t\tback = $('<div><\/div>').appendTo(tab).css({\r\n\t\t\t'background-image': this.slider.image2.css('background-image'),\r\n\t\t\t'background-position': (this.options.directionV == 'top' ? '0 -'+(this.slider.image1.height()) : '0 -'+(this.slider.image1.height()\/2))+'px',\r\n\t\t\t'background-size': '100% auto',\r\n\t\t\twidth: '100%',\r\n\t\t\theight: '100%',\r\n\t\t\tposition: 'absolute',\r\n\t\t\ttop: '0',\r\n\t\t\tleft: '0'\r\n\t\t  }).css3({\r\n\t\t\ttransform: flux.browser.rotateX(180),\r\n\t\t\t'backface-visibility': 'hidden'\r\n\t\t  }),\r\n\r\n\t\tcurrent = $('<div><\/div>').css({\r\n\t\t  position: 'absolute',\r\n\t\t  top: this.options.directionV == 'top' ? '0' : '50%',\r\n\t\t  left: '0',\r\n\t\t  width: '100%',\r\n\t\t  height: '50%',\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-position': (this.options.directionV == 'top' ? '0 -'+(this.slider.image1.height()) : '0 -'+(this.slider.image1.height()\/2))+'px',\r\n\t\t  'background-size': '100% auto',\r\n\t\t  'z-index':100\r\n\t\t}),\r\n\r\n\t\toverlay = $('<div class=\"overlay\"><\/div>').css({\r\n\t\t  position: 'absolute',\r\n\t\t  top: this.options.directionV == 'top' ? '50%' : '0',\r\n\t\t  left: '0',\r\n\t\t  width: '100%',\r\n\t\t  height: '50%',\r\n\t\t  background: '#000',\r\n\t\t  opacity: 1\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '500ms',\r\n\t\t  'transition-timing-function': 'linear',\r\n\t\t  'transition-property': 'opacity'\r\n\t\t}),\r\n\r\n\t\tcontainer = $('<div><\/div>').css3({\r\n\t\t  width: '100%',\r\n\t\t  height: '100%'\r\n\t\t}).css3({\r\n\t\t  'perspective': this.options.perspective,\r\n\t\t  'perspective-origin': '50% 50%'\r\n\t\t}).append(tab).append(current).append(overlay);\r\n\r\n\t\tthis.slider.image1.append(container);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this;\r\n\r\n\t\tthis.slider.image1.find('div.tab').first().transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  _this.slider.image1.find('div.tab').css3({\r\n\t\t\t\/\/ 179 not 180 so that the tab rotates the correct way in Firefox\r\n\t\t\ttransform: flux.browser.rotateX(_this.options.directionV == 'top' ? 179 : -179)\r\n\t\t  });\r\n\t\t  _this.slider.image1.find('div.overlay').css({\r\n\t\t\topacity: 0\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.slide = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  direction: 'left',\r\n\t  setup: function() {\r\n\t\tvar width = this.slider.image1.width(),\r\n\t\t  height = this.slider.image1.height(),\r\n\r\n\t\tcurrentImage = $('<div class=\"current\"><\/div>').css({\r\n\t\t  height: height+'px',\r\n\t\t  width: width+'px',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: '0px',\r\n\t\t  background: this.slider[this.options.direction == 'left' ? 'image1' : 'image2'].css('background-image'),\r\n\t\t  'background-size': '100% auto'  \r\n\t\t}).css3({\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t}),\r\n\r\n\t\tnextImage = $('<div class=\"next\"><\/div>').css({\r\n\t\t  height: height+'px',\r\n\t\t  width: width+'px',\r\n\t\t  position: 'absolute',\r\n\t\t  top: '0px',\r\n\t\t  left: width+'px',\r\n\t\t  background: this.slider[this.options.direction == 'left' ? 'image2' : 'image1'].css('background-image'),\r\n\t\t  'background-size': '100% auto'\r\n\t\t}).css3({\r\n\t\t  'backface-visibility': 'hidden'\r\n\t\t});\r\n\r\n\t\tthis.slideContainer = $('<div class=\"slide\"><\/div>').css({\r\n\t\t  width: (2*width)+'px',\r\n\t\t  height: height+'px',\r\n\t\t  position: 'relative',\r\n\t\t  left: this.options.direction == 'left' ? '0px' : -width+'px',\r\n\t\t  'z-index': 101\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '600ms',\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all'\r\n\t\t});\r\n\r\n\t\tthis.slideContainer.append(currentImage).append(nextImage);\r\n\r\n\t\tthis.slider.image1.append(this.slideContainer);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this,\r\n\t\t  delta = this.slider.image1.width();\r\n\r\n\t\tif(this.options.direction == 'left')\r\n\t\t  delta = -delta;\r\n\r\n\t\tthis.slideContainer.transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\t\t\r\n\t\tsetTimeout(function(){\r\n\t\t  _this.slideContainer.css3({\r\n\t\t\t'transform' : flux.browser.translate(delta)\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));  \r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.swipe = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  setup: function() {\r\n\t\tvar img = $('<div><\/div>').css({\r\n\t\t  width: '100%',\r\n\t\t  height: '100%',\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-size' : '100% auto'\r\n\t\t}).css3({\r\n\t\t  'transition-duration': '1600ms',\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'all',\r\n\t\t  'mask-image': '-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%)',\r\n\t\t  'mask-position': '70%',\r\n\t\t  'mask-size': '400%'\r\n\t\t});\r\n\t\t\r\n\t\tthis.slider.image1.append(img);\r\n\t  },\r\n\t  execute: function() {\r\n\t\t\/\/return;\r\n\t\tvar _this = this,\r\n\t\t  img = this.slider.image1.find('div');\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\t$(img).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\r\n\t\tsetTimeout(function(){\r\n\t\t  $(img).css3({\r\n\t\t\t'mask-position': '30%'\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  },\r\n\t  compatibilityCheck: function() {\r\n\t\treturn flux.browser.supportsCSSProperty('MaskImage');\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\n(function($) {\r\n  flux.transitions.dissolve = function(fluxslider, opts) {\r\n\treturn new flux.transition(fluxslider, $.extend({\r\n\t  setup: function() {\r\n\t\tvar img = $('<div class=\"image\"><\/div>').css({\r\n\t\t  width: '100%',\r\n\t\t  height: '100%',\r\n\t\t  'background-image': this.slider.image1.css('background-image'),\r\n\t\t  'background-size': 'auto 100%'  \r\n\t\t}).css3({\r\n\t\t  'transition-duration': '600ms',\r\n\t\t  'transition-timing-function': 'ease-in',\r\n\t\t  'transition-property': 'opacity'\r\n\t\t});\r\n\t\t\r\n\t\tthis.slider.image1.append(img);\r\n\t  },\r\n\t  execute: function() {\r\n\t\tvar _this = this,\r\n\t\t  img = this.slider.image1.find('div.image');\r\n\r\n\t\t\/\/ Get notified when the last transition has completed\r\n\t\t$(img).transitionEnd(function(){\r\n\t\t  _this.finished();\r\n\t\t});\r\n\r\n\t\tsetTimeout(function(){\r\n\t\t  $(img).css({\r\n\t\t\t'opacity': '0.0'\r\n\t\t  });\r\n\t\t}, 50);\r\n\t  }\r\n\t}, opts));\r\n  };\r\n})(window.jQuery || window.Zepto);\r\n\r\nfunction detectIE() {\r\n\tvar ua = window.navigator.userAgent;\r\n\r\n\tvar msie = ua.indexOf('MSIE ');\r\n\tif (msie > 0) {\r\n\t\t\/\/ IE 10 or older => return version number\r\n\t\treturn parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);\r\n\t}\r\n\r\n\tvar trident = ua.indexOf('Trident\/');\r\n\tif (trident > 0) {\r\n\t\t\/\/ IE 11 => return version number\r\n\t\tvar rv = ua.indexOf('rv:');\r\n\t\treturn parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);\r\n\t}\r\n\r\n\tvar edge = ua.indexOf('Edge\/');\r\n\tif (edge > 0) {\r\n\t   \/\/ IE 12 => return version number\r\n\t   return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);\r\n\t}\r\n\r\n\t\/\/ other browser\r\n\treturn false;\r\n}\r\n\/\/-->\r\n<\/script>\r\n\r\n<div class=\"fluxslider-main-184\">\r\n\t<div id=\"fluxslider-184\" class=\"fluxslider_container\">\r\n\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Logan-Basic-Technique-Treatments.jpg\" alt=\"\" title=\"Logan Basic Technique Treatments\" description=\"A chiropractic adjustment using this procedure is a very common technique. It is universally taught to students early in their learning process. It\u2019s a hands-on technique for diagnosing and fixing specific issues. The focus is to address the problem areas as specifically as possible.\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Activator-Treatments.jpg\" alt=\"\" title=\"Activator Treatments\" description=\"Activator adjusting involves the use of a hand-held mechanical instrument, also known as the activator adjusting instrument. The chiropractor uses the activator to deliver a gentle impulsive force onto the vertebral segments of the spine, restoring motion to a targeted spinal vertebra or joint.\r\n\r\n\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Diversified-Technique-Treatments.jpg\" alt=\"\" title=\"Diversified Technique Treatments\" description=\"Chiropractors commonly use this adjustment technique. It\u2019s also known as the direct thrust technique. Using their hands, the chiropractor applies a rapid thrust to different parts of the spine at a time. This relieves tension around the area and allows issues and fluids to restore proper movement, circulation, and spine alignment.\r\n\r\n\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Soft-Tissue-Therapy-Treatments.jpg\" alt=\"\" title=\"Soft Tissue Therapy Treatments\" description=\"This is a complex targeted clinical massage that focuses mainly on the soft tissues of the body, which include muscles, joints, tendons, ligaments, and connective tissues. A fully-trained soft tissue therapist uses different techniques and tools for the task. The therapy helps to release toxins and improve blood flow and circulation. It\u2019s used to relieve discomfort associated with stress, chronic pain, and muscle overuse.\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Flexion-Distraction-Treatments.jpg\" alt=\"\" title=\"Flexion-Distraction Treatments\" description=\"Flexion-distraction is a low force, safe, and gentle chiropractic technique designed to alleviate pressure from spinal nerves that may be injured or dysfunctional. This technique is performed on a segmented table that moves as the chiropractor gently manipulates your spine. These movements stretch and decompress the spine.\r\n\r\n\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Thompson-Technique-Treatments.jpg\" alt=\"\" title=\"Thompson Technique Treatments\" description=\"The drop technique is a full-spine adjusting method. It involves special treatment tables with drop mechanisms to provide low-amplitude, high-velocity, and low-force adjustments. The table drops slightly as the doctor applies thrusts during the adjustments.\r\n\r\n\" class=\"img-fluid\">\r\n\t\t\t\t\t<img decoding=\"async\" style=\"display:none;\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Gonstead-Adjustment-Treatments.jpg\" alt=\"\" title=\"Gonstead Adjustment Treatments\" description=\"Basic adjustments apply pressure to a leverage point on the sacrum; hence the name. The chiropractor focuses on holding the pressure at the base of the spine while simultaneously rubbing the back muscles to release tension. The pressure treats back and pelvis muscles and realigns the spine bones.\r\n\r\n\" class=\"img-fluid\">\r\n\t\t\t<\/div>\r\n<\/div>\r\n<script type=\"text\/javascript\">\r\njQuery(window).load(function(){\r\n  jQuery(function(){\r\n\t   window.myFlux = new flux.slider('#fluxslider-184', {\r\n\t\t  autoplay: false,\r\n\t\t \/\/ pagination: 0,\r\n\t\t  controls: true,\r\n\t\t  captions: true,\r\n\t\t  \t\t  transitions:['zip'], \/\/'bars','blinds','blocks','blocks2','concentric','dissolve','slide','warp','zip','swipe','bars3d','cube','tiles3d','blinds3d','turn'\r\n\t\t  \t\t  delay: 10000     });\r\n  });\r\n});\r\n<\/script>\r\n\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text css=&#8221;.vc_custom_1631087761011{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #efedf0 !important;}&#8221;]<\/p>\n<p style=\"text-align: center;\"><strong>Settings Used In This slideshow<\/strong><\/p>\n<p>Auto Play \u2013 ON, Autoplay Speed \u201310000ms, Show Controls \u2013SHOW, Show Captions \u2013 SHOW, Animation FX Effect \u2013 Zip &amp; Custom CSS.<\/p>\n<p>[\/vc_column_text][vc_tta_pageable][vc_tta_section title=&#8221;Section 2&#8243; tab_id=&#8221;1631086813878-6053f1f1-b90d&#8221;][\/vc_tta_section][\/vc_tta_pageable][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text css=&#8221;.vc_custom_1631087761011{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #efedf0 !important;}&#8221;] Settings Used In This slideshow Auto Play \u2013 ON, Autoplay Speed \u201310000ms, Show Controls \u2013SHOW, Show Captions \u2013 SHOW, Animation FX Effect \u2013 Zip &amp; Custom CSS. [\/vc_column_text][vc_tta_pageable][vc_tta_section title=&#8221;Section 2&#8243; tab_id=&#8221;1631086813878-6053f1f1-b90d&#8221;][\/vc_tta_section][\/vc_tta_pageable][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4925","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":13,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4925\/revisions"}],"predecessor-version":[{"id":5088,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4925\/revisions\/5088"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}