var $JQry = jQuery.noConflict(); $JQry(document).ready(function ($) { if (document.getElementById("slider_container") != null) { var slideshowTransitions = [ // Fade Fly in R { $Duration : 1200, $During : { $Left : [ 0.3, 0.7 ] }, $FlyDirection : 2, $Easing : { $Left : $JssorEasing$.$EaseInCubic, $Opacity : $JssorEasing$.$EaseLinear }, $ScaleHorizontal : 0.3, $Opacity : 2, $Outside : true } // Fade Fly out L , { $Duration : 1200, $SlideOut : true, $FlyDirection : 1, $Easing : { $Left : $JssorEasing$.$EaseInCubic, $Opacity : $JssorEasing$.$EaseLinear }, $ScaleHorizontal : 0.3, $Opacity : 2, $Outside : true } ]; var captionTransitions = []; captionTransitions["L"] = { $Duration: 800, $FlyDirection: 1, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["R"] = { $Duration: 800, $FlyDirection: 2, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["T"] = { $Duration: 800, $FlyDirection: 4, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["B"] = { $Duration: 800, $FlyDirection: 8, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["TL"] = { $Duration: 800, $FlyDirection: 5, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["TR"] = { $Duration: 800, $FlyDirection: 6, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["BL"] = { $Duration: 800, $FlyDirection: 9, $Easing: $JssorEasing$.$EaseInCubic }; captionTransitions["BR"] = { $Duration: 800, $FlyDirection: 10, $Easing: $JssorEasing$.$EaseInCubic }; var options = { $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 $AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 $PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3 $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false $SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20 $SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container $SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0 $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0. $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, direction navigator container, thumbnail navigator container etc). $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1 $DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0) // $SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not // $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow // $Transitions: slideshowTransitions, //[Required] An array of slideshow transitions to play slideshow // $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random // $ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false // }, $CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption $CaptionTransitions: captionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder $PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1 $PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1 }, $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $ActionMode: 0, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 $DisableDrag: true, //[Optional] Disable drag or not, default value is false $Orientation: 2 //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1 }, $NavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorNavigator$, //[Required] Class to create navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 $Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: 0 //[Optional] Vertical space between each item in pixel, default value is 0 }, $DirectionNavigatorOptions: { $Class: $JssorDirectionNavigator$, //[Requried] Class to create direction navigator instance $ChanceToShow: 1 //[Required] 0 Never, 1 Mouse Over, 2 Always } }; var jssor_slider = new $JssorSlider$('slider_container', options); // You can remove responsive code if you don't want the slider scales while window resizes function ScaleSlider() { var parentWidth = jssor_slider.$Elmt.parentNode.clientWidth; if (parentWidth) jssor_slider.$SetScaleWidth(Math.min(parentWidth, 600)); else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) { $(window).bind('resize', ScaleSlider); } } }); function loadSlide() { var slide = $JQry(".slide")[0]; if (slide != null) { var ul = slide.parentNode; if (ul.getAttribute("u") == null) { ul.setAttribute("u", "slides"); ul.setAttribute("style", "cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 200px; overflow: hidden;"); var div = ul.parentNode; div.setAttribute("id", "slider_container"); div.setAttribute("style", "position: relative; top: 0px; left: 0px; width: 600px; height: 200px;"); // // ThumbnailNavigator Skin // var thumbnavigator = document.createElement("div"); // thumbnavigator.setAttribute("u", "thumbnavigator"); // thumbnavigator.setAttribute("class", "slider1-T"); // thumbnavigator.setAttribute("style", "position: absolute; bottom: 0px; left: 0px; height:60px; width:600px;"); // div.appendChild(thumbnavigator); // // Thumbnail filter // var filter = document.createElement("div"); // filter.setAttribute("style", "filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block; background-color: #ffffff; top: 0px; left: 0px; width: 100%; height: 100%;"); // thumbnavigator.appendChild(filter); // // Thumbnail Item Skin // var slides = document.createElement("div"); // slides.setAttribute("u", "slides"); // thumbnavigator.appendChild(slides); // var slidesPrototype = document.createElement("div"); // slidesPrototype.setAttribute("u", "prototype"); // slidesPrototype.setAttribute("style", "position: absolute; width: 600px; height: 60px; top: 0; left: 0;"); // slides.appendChild(slidesPrototype); // var thumbnailtemplate = document.createElement("thumbnailtemplate"); // thumbnailtemplate.setAttribute("style", "font-family: verdana; font-weight: normal; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color:#000; line-height: 60px; font-size:20px; padding-left:10px;"); // slidesPrototype.appendChild(thumbnailtemplate); // Navigator container var navigator = document.createElement("div"); navigator.setAttribute("u", "navigator"); navigator.setAttribute("class", "jssorn01"); navigator.setAttribute("style", "position: absolute; bottom: 16px; right: 10px;"); div.appendChild(navigator); var navigatorPrototype = document.createElement("div"); navigatorPrototype.setAttribute("u", "prototype"); navigatorPrototype.setAttribute("style", "position: absolute; width: 12px; height: 12px;"); navigator.appendChild(navigatorPrototype); // Arrow Left var arrowLeft = document.createElement("span"); arrowLeft.setAttribute("u", "arrowleft"); arrowLeft.setAttribute("class", "jssord05l"); arrowLeft.setAttribute("style", "width: 40px; height: 40px; top: 90px; left: 8px;"); div.appendChild(arrowLeft); // Arrow Right var arrowRight = document.createElement("span"); arrowRight.setAttribute("u", "arrowright"); arrowRight.setAttribute("class", "jssord05r"); arrowRight.setAttribute("style", "width: 40px; height: 40px; top: 90px; right: 8px"); div.appendChild(arrowRight); } } }