{"id":4781,"date":"2021-08-16T11:21:20","date_gmt":"2021-08-16T11:21:20","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=4781"},"modified":"2021-12-07T12:18:26","modified_gmt":"2021-12-07T12:18:26","slug":"layout-21","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-21\/","title":{"rendered":"Layout 21"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\r\n<h2 class=\"has-text-align-center wp-block-heading\">Example 1<\/h2>\r\n\r\n<p><style>\r\n.fluxslider-main-178 {\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<\/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-178\">\r\n\t<div id=\"fluxslider-178\" 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\/07\/Green-Grass-Field-Under-Gray-Skies.jpg\" alt=\"\" title=\"Gray Skies\" description=\"Green Grass Field Under Gray Skies\" 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\/07\/Landscape-Photography-of-Mountains-and-River.jpg\" alt=\"\" title=\"Mountains and River\" description=\"Landscape Photography of Mountains and River\" 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\/07\/Landscape-Photography-of-Sunflower-Field-during-Sunset.jpg\" alt=\"\" title=\"Sunset\" description=\"Landscape Photography of Sunflower Field during Sunset\" 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\/07\/White-Boat-on-Body-of-Water-during-Golden-Hour.jpg\" alt=\"\" title=\"White Boat\" description=\"White Boat on Body of Water during Golden Hour\" 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\/07\/Photo-Taken-Near-Body-of-Water-With-Golden-Hour-Background.jpg\" alt=\"\" title=\"Golden Hour\" description=\"Photo Taken Near Body of Water With Golden Hour Background\" 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\/07\/Grand-Canyon.jpg\" alt=\"\" title=\"Grand Canyon\" description=\"The Grand Canyon\" 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\/07\/Rear-View-of-Man-on-Mountain-Road-Against-Sky.jpg\" alt=\"\" title=\"Road Against Sky\" description=\"Rear View of Man on Mountain Road Against Sky\" 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\/07\/Seashore.jpg\" alt=\"\" title=\"Sea Shore\" description=\"Sea Shore with Blue Water\" 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\/07\/Vintage-Black-Windmill-during-Sunset.jpg\" alt=\"\" title=\"Windmill\" description=\"Vintage Black Windmill during Sunset\" 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\/07\/Road-Amidst-Trees-in-Forest-Against-Sky.jpg\" alt=\"\" title=\"Road Amidst Trees\" description=\"Road Amidst Trees in Forest Against Sky\" 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\/07\/Photo-of-Houses-on-Green-Grass-Field.jpg\" alt=\"\" title=\"Green Grass Field\" description=\"Photo of Houses on Green Grass Field\" 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\/07\/Man-Standing-Beside-Brown-House.jpg\" alt=\"\" title=\"Brown House\" description=\"Man Standing Beside Brown House\" 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\/07\/Gray-Road-Surrounded-With-Purple-Flower-Field.jpg\" alt=\"\" title=\"Flower Field\" description=\"Gray Road Surrounded With Purple Flower Field\" 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\/07\/Photo-of-a-Person-Standing-on-Rice-Terraces.jpg\" alt=\"\" title=\"Rice Terraces\" description=\"Photo of a Person Standing on Rice Terraces\" 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\/07\/Sea-shore-in-evening.jpg\" alt=\"\" title=\"Sea Shore\" description=\"Sea shore in evening\" 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-178', {\r\n\t\t  autoplay: true,\r\n\t\t \/\/ pagination: 0,\r\n\t\t  controls: true,\r\n\t\t  captions: true,\r\n\t\t  \t\t  delay: 3000     });\r\n  });\r\n});\r\n<\/script>\r\n\n<\/p>\r\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_raw_html]JTNDZGl2JTIwaWQlM0QlMjJ0cmFuc2l0aW9ucyUyMiUyMGNsYXNzJTNEJTIydGV4dC1jZW50ZXIlMjIlM0UlMEElMjAlM0NoMiUzRTJEJTIwVHJhbnNpdGlvbnMlM0MlMkZoMiUzRSUwQSUyMCUzQ2RpdiUyMGlkJTNEJTIydHJhbnMyRCUyMiUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzYmFycyUyMiUzRUJhcnMlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjN6aXAlMjIlM0VaaXAlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibGluZHMlMjIlM0VCbGluZHMlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibG9ja3MlMjIlM0VCbG9ja3MlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNjb25jZW50cmljJTIyJTNFQ29uY2VudHJpYyUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM3dhcnAlMjIlM0VXYXJwJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzc2xpZGUlMjIlM0VTbGlkZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM3N3aXBlJTIyJTIwY2xhc3MlM0QlMjJuZXclMjIlM0VTd2lwZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2Rpc3NvbHZlJTIyJTIwY2xhc3MlM0QlMjJuZXclMjIlM0VEaXNzb2x2ZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2Jsb2NrczIlMjIlMjBjbGFzcyUzRCUyMm5ldyUyMiUzRUJsb2NrczIlM0MlMkZhJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTNDaDIlMjBjbGFzcyUzRCUyMm10LTMlMjIlM0UzRCUyMFRyYW5zaXRpb25zJTNDJTJGaDIlM0UlMEElMjAlM0NkaXYlMjBpZCUzRCUyMnRyYW5zM2QlMjIlM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2JhcnMzZCUyMiUzRUJhcnMzRCUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2N1YmUlMjIlM0VDdWJlJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzdGlsZXMzZCUyMiUzRVRpbGVzM0QlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibGluZHMzZCUyMiUzRUJsaW5kczNEJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzdHVybiUyMiUzRVR1cm4lM0MlMkZhJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGZGl2JTNF[\/vc_raw_html][\/vc_column][\/vc_row][vc_row][vc_column][vc_raw_js]JTNDc2NyaXB0JTNFJTIwalF1ZXJ5JTI4JTI3ZGl2JTIzdHJhbnNpdGlvbnMlMjclMjkuYmluZCUyOCUyN2NsaWNrJTI3JTJDJTIwZnVuY3Rpb24lMjhldmVudCUyOSU3QiUwQSUwOSUwOSUwOSUwOSUwOWV2ZW50LnByZXZlbnREZWZhdWx0JTI4JTI5JTNCJTBBJTBBJTA5JTA5JTA5JTA5JTA5JTJGJTJGJTIwSWYlMjB0aGlzJTIwaXMlMjBhJTIwM0QlMjB0cmFuc2Zvcm0lMjBhbmQlMjB0aGUlMjBicm93c2VyJTIwZG9lc24lMjd0JTIwc3VwcG9ydCUyMDNEJTIwdGhlbiUyMGluZm9ybSUyMHRoZSUyMHVzZXIlMEElMDklMDklMDklMDklMDlpZiUyOGpRdWVyeSUyOGV2ZW50LnRhcmdldCUyOS5jbG9zZXN0JTI4JTI3dWwlMjclMjkuaXMlMjglMjd1bCUyM3RyYW5zM2QlMjclMjklMjAlMjYlMjYlMjAlMjFmbHV4LmJyb3dzZXIuc3VwcG9ydHMzZCUyOSUwQSUwOSUwOSUwOSUwOSUwOSU3QiUwQSUwOSUwOSUwOSUwOSUwOSUwOWFsZXJ0JTI4JTIyVGhlJTIwJTI3JTIyJTJCZXZlbnQudGFyZ2V0LmlubmVySFRNTCUyQiUyMiUyNyUyMHRyYW5zaXRpb24lMjByZXF1aXJlcyUyMGElMjBicm93c2VyJTIwdGhhdCUyMHN1cHBvcnRzJTIwM0QlMjB0cmFuc2Zvcm1zJTIyJTI5JTNCJTBBJTA5JTA5JTA5JTA5JTA5JTA5cmV0dXJuJTNCJTBBJTA5JTA5JTA5JTA5JTA5JTdEJTBBJTBBJTA5JTA5JTA5JTA5JTA5d2luZG93Lm15Rmx1eC5uZXh0JTI4ZXZlbnQudGFyZ2V0LmhyZWYuc3BsaXQlMjglMjclMjMlMjclMjklNUIxJTVEJTI5JTNCJTBBJTA5JTA5JTA5JTA5JTdEJTI5JTNCJTBBJTA5JTA5JTA5JTIwJTNDJTJGc2NyaXB0JTNF[\/vc_raw_js][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\r\n<h4 style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/h4>\r\n<p>[\/vc_column_text][vc_video link=&#8221;https:\/\/www.youtube.com\/watch?v=45hw3rvlD6s&#8221;][\/vc_column][\/vc_row]<\/p>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] Example 1 [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_raw_html]JTNDZGl2JTIwaWQlM0QlMjJ0cmFuc2l0aW9ucyUyMiUyMGNsYXNzJTNEJTIydGV4dC1jZW50ZXIlMjIlM0UlMEElMjAlM0NoMiUzRTJEJTIwVHJhbnNpdGlvbnMlM0MlMkZoMiUzRSUwQSUyMCUzQ2RpdiUyMGlkJTNEJTIydHJhbnMyRCUyMiUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzYmFycyUyMiUzRUJhcnMlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjN6aXAlMjIlM0VaaXAlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibGluZHMlMjIlM0VCbGluZHMlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibG9ja3MlMjIlM0VCbG9ja3MlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNjb25jZW50cmljJTIyJTNFQ29uY2VudHJpYyUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM3dhcnAlMjIlM0VXYXJwJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzc2xpZGUlMjIlM0VTbGlkZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM3N3aXBlJTIyJTIwY2xhc3MlM0QlMjJuZXclMjIlM0VTd2lwZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2Rpc3NvbHZlJTIyJTIwY2xhc3MlM0QlMjJuZXclMjIlM0VEaXNzb2x2ZSUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2Jsb2NrczIlMjIlMjBjbGFzcyUzRCUyMm5ldyUyMiUzRUJsb2NrczIlM0MlMkZhJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTIwJTNDaDIlMjBjbGFzcyUzRCUyMm10LTMlMjIlM0UzRCUyMFRyYW5zaXRpb25zJTNDJTJGaDIlM0UlMEElMjAlM0NkaXYlMjBpZCUzRCUyMnRyYW5zM2QlMjIlM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2JhcnMzZCUyMiUzRUJhcnMzRCUzQyUyRmElM0UlMEElMjAlMjAlM0NhJTIwY2xhc3MlM0QlMjJidG4lMjBidG4tc20lMjBtbC0wJTIyJTIwaHJlZiUzRCUyMiUyM2N1YmUlMjIlM0VDdWJlJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzdGlsZXMzZCUyMiUzRVRpbGVzM0QlM0MlMkZhJTNFJTBBJTIwJTIwJTNDYSUyMGNsYXNzJTNEJTIyYnRuJTIwYnRuLXNtJTIwbWwtMCUyMiUyMGhyZWYlM0QlMjIlMjNibGluZHMzZCUyMiUzRUJsaW5kczNEJTNDJTJGYSUzRSUwQSUyMCUyMCUzQ2ElMjBjbGFzcyUzRCUyMmJ0biUyMGJ0bi1zbSUyMG1sLTAlMjIlMjBocmVmJTNEJTIyJTIzdHVybiUyMiUzRVR1cm4lM0MlMkZhJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTNDJTJGZGl2JTNF[\/vc_raw_html][\/vc_column][\/vc_row][vc_row][vc_column][vc_raw_js]JTNDc2NyaXB0JTNFJTIwalF1ZXJ5JTI4JTI3ZGl2JTIzdHJhbnNpdGlvbnMlMjclMjkuYmluZCUyOCUyN2NsaWNrJTI3JTJDJTIwZnVuY3Rpb24lMjhldmVudCUyOSU3QiUwQSUwOSUwOSUwOSUwOSUwOWV2ZW50LnByZXZlbnREZWZhdWx0JTI4JTI5JTNCJTBBJTBBJTA5JTA5JTA5JTA5JTA5JTJGJTJGJTIwSWYlMjB0aGlzJTIwaXMlMjBhJTIwM0QlMjB0cmFuc2Zvcm0lMjBhbmQlMjB0aGUlMjBicm93c2VyJTIwZG9lc24lMjd0JTIwc3VwcG9ydCUyMDNEJTIwdGhlbiUyMGluZm9ybSUyMHRoZSUyMHVzZXIlMEElMDklMDklMDklMDklMDlpZiUyOGpRdWVyeSUyOGV2ZW50LnRhcmdldCUyOS5jbG9zZXN0JTI4JTI3dWwlMjclMjkuaXMlMjglMjd1bCUyM3RyYW5zM2QlMjclMjklMjAlMjYlMjYlMjAlMjFmbHV4LmJyb3dzZXIuc3VwcG9ydHMzZCUyOSUwQSUwOSUwOSUwOSUwOSUwOSU3QiUwQSUwOSUwOSUwOSUwOSUwOSUwOWFsZXJ0JTI4JTIyVGhlJTIwJTI3JTIyJTJCZXZlbnQudGFyZ2V0LmlubmVySFRNTCUyQiUyMiUyNyUyMHRyYW5zaXRpb24lMjByZXF1aXJlcyUyMGElMjBicm93c2VyJTIwdGhhdCUyMHN1cHBvcnRzJTIwM0QlMjB0cmFuc2Zvcm1zJTIyJTI5JTNCJTBBJTA5JTA5JTA5JTA5JTA5JTA5cmV0dXJuJTNCJTBBJTA5JTA5JTA5JTA5JTA5JTdEJTBBJTBBJTA5JTA5JTA5JTA5JTA5d2luZG93Lm15Rmx1eC5uZXh0JTI4ZXZlbnQudGFyZ2V0LmhyZWYuc3BsaXQlMjglMjclMjMlMjclMjklNUIxJTVEJTI5JTNCJTBBJTA5JTA5JTA5JTA5JTdEJTI5JTNCJTBBJTA5JTA5JTA5JTIwJTNDJTJGc2NyaXB0JTNF[\/vc_raw_js][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text] Video Tutorial [\/vc_column_text][vc_video link=&#8221;https:\/\/www.youtube.com\/watch?v=45hw3rvlD6s&#8221;][\/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-4781","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4781","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=4781"}],"version-history":[{"count":7,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4781\/revisions"}],"predecessor-version":[{"id":4899,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/4781\/revisions\/4899"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=4781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}