dinopacha Posted April 3, 2016 Share Posted April 3, 2016 I got an jssor slider made for the bootstrap version.if you like it you can take it.its very easy you don't have to overide anything just copy the files into your bootstrap.you have to make the following files and folders: catalog/ext/jssor download the following file: https://www.jsdelivr.com/projects/jssor.slider unrar it and put the (jssor.slider.mini.js) in catalog/ext/jssor catalog/includes/template_top.php put the following file just before the </head> <script type="text/javascript" src="ext/jssor/jssor.slider.mini.js"></script> catalog/includes/modules/content/header/cm_header_jssor.php <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2014 osCommerce Released under the GNU General Public License */ class cm_header_jssor { var $code; var $group; var $title; var $description; var $sort_order; var $enabled = false; function cm_header_jssor() { $this->code = get_class($this); $this->group = basename(dirname(__FILE__)); $this->title = MODULE_CONTENT_HEADER_JSSOR_TITLE; $this->description = MODULE_CONTENT_HEADER_JSSOR_DESCRIPTION; $this->description .= '<div class="secWarning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>'; if ( defined('MODULE_CONTENT_HEADER_JSSOR_STATUS') ) { $this->sort_order = MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER; $this->enabled = (MODULE_CONTENT_HEADER_JSSOR_STATUS == 'True'); } } function execute() { global $oscTemplate, $header_tags_array; $content_width = (int)MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH; ob_start(); include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/jssor.php'); $template = ob_get_clean(); $oscTemplate->addContent($template, $this->group); } /* function isEnabled() { return $this->enabled; } */ function isEnabled() { global $cPath, $PHP_SELF; if(($PHP_SELF != FILENAME_DEFAULT) || tep_not_null($cPath)){ $this->enabled = false; }else{ return $this->enabled; } } function check() { return defined('MODULE_CONTENT_HEADER_JSSOR_STATUS'); } function install() { tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Header Jssor Module', 'MODULE_CONTENT_HEADER_JSSOR_STATUS', 'True', 'Do you want to enable the Jssor content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH', '4', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())"); } function remove() { tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')"); } function keys() { return array('MODULE_CONTENT_HEADER_JSSOR_STATUS', 'MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER'); } } catalog/includes/modules/content/header/templates/jssor.php <div class="jssorwrapper col-sm-<?php echo $content_width; ?>"> <!-- Jssor Slider Begin --> <div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;"> <!-- Loading Screen --> <div u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;"> </div> <div style="position: absolute; display: block; background: url(images/jssor/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"> </div> </div> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px; overflow: hidden;"> <div> <a href="#"><img u="image" src2="images/jssor/01.jpg" /></a> </div> <div> <a href="#"><img u="image" src2="images/jssor/02.jpg" /></a> </div> <div> <a href="#"><img u="image" src2="images/jssor/03.jpg" /></a> </div> <div> <a href="#"><img u="image" src2="images/jssor/04.jpg" /></a> </div> </div> <!-- underneath is css for the bullets --> <style> /* jssor slider bullet navigator skin 05 css */ /* .jssorb05 div (normal) .jssorb05 div:hover (normal mouseover) .jssorb05 .av (active) .jssorb05 .av:hover (active mouseover) .jssorb05 .dn (mousedown) */ .jssorb05 { position: absolute; } .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av { position: absolute; /* size of bullet elment */ width: 16px; height: 16px; background: url(images/jssor/b05.png) no-repeat; overflow: hidden; cursor: pointer; } .jssorb05 div { background-position: -7px -7px; } .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; } .jssorb05 .av { background-position: -67px -7px; } .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; } </style> <!-- bullet navigator container --> <div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;"> <!-- bullet navigator item prototype --> <div u="prototype"></div> </div> <!-- end of the bullets --> <!-- ========================================================================================================================== --> <!-- underneath is for the arrows left and right --> <!--#region Arrow Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --> <style> /* jssor slider arrow navigator skin 11 css */ /* .jssora11l (normal) .jssora11r (normal) .jssora11l:hover (normal mouseover) .jssora11r:hover (normal mouseover) .jssora11l.jssora11ldn (mousedown) .jssora11r.jssora11rdn (mousedown) */ .jssora11l, .jssora11r { display: block; position: absolute; /* size of arrow element */ width: 37px; height: 37px; cursor: pointer; background: url(images/jssor/a11.png) no-repeat; overflow: hidden; } .jssora11l { background-position: -11px -41px; } .jssora11r { background-position: -71px -41px; } .jssora11l:hover { background-position: -131px -41px; } .jssora11r:hover { background-position: -191px -41px; } .jssora11l.jssora11ldn { background-position: -251px -41px; } .jssora11r.jssora11rdn { background-position: -311px -41px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;"> </span> <!--#endregion Arrow Navigator Skin End --> </div> <!-- Jssor Slider End --> <!-- end of the arrows left and right --> <!-- ========================================================================================================================== --> <!-- begin of the transitions --> <script> jQuery(document).ready(function ($) { var _SlideshowTransitions = [ /* begin vanaf hier kun je de transitions aanpassen */ {$Duration:1400,x:0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1400,x:-0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10}}, {$Duration:1200,x:4,$Zoom:11,$Rotate:1,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad,$Rotate:$JssorEasing$.$EaseInCubic},$Opacity:2,$Round:{$Rotate:0.7}}, {$Duration:1000,$Delay:30,$Cols:8,$Rows:4,$Clip:15,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:$JssorEasing$.$EaseInQuad,$Assembly:2050} /* end of the transitions */ ]; var options = { $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: _SlideshowTransitions, $TransitionsOrder: 1, $ShowLink: true}, $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 $Idle: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 $PauseOnHover: 1, //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false $SlideEasing: $JssorEasing$.$EaseOutQuint, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad $SlideDuration: 800, //[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 $Cols: 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, arrow navigator container, thumbnail navigator container etc). $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, 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 $Cols is greater than 1, or parking position is not 0) $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Scale: false //Scales bullets navigator or not while slider scale }, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 $Scale: false //Scales bullets navigator or not while slider scale } }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); //responsive code begin //you can remove responsive code if you don't want the slider scales while window resizing function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth) { jssor_slider1.$ScaleWidth(parentWidth - 30); } else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); //responsive code end }); </script> <!-- Jssor Slider end --> </div> catalog/includes/languages/english/modules/content/header/cm_header_jssor.php <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2014 osCommerce Released under the GNU General Public License */ define('MODULE_CONTENT_HEADER_JSSOR_TITLE', 'jssor slider'); define('MODULE_CONTENT_HEADER_JSSOR_DESCRIPTION', 'this is for your jssor slider.'); catalog/user.css (you don't have to do this one it's only got an shadowbox if you like). .jssorwrapper { margin-top: 10px; padding: 0px; } #slider1_container { box-shadow: 2px 4px 6px rgba(0,0,0,0.5); } and at last the images. (see the attchment) you can change the image files in (catalog/includes/modules/content/header/cm_header_jssor.php) catalog/images/jssor/ Have fun .... :thumbsup: Link to comment Share on other sites More sharing options...
♥Gyakutsuki Posted April 3, 2016 Share Posted April 3, 2016 :thumbsup: Regards ----------------------------------------- Loïc Contact me by skype for business Contact me @gyakutsuki for an answer on the forum Link to comment Share on other sites More sharing options...
dinopacha Posted April 3, 2016 Author Share Posted April 3, 2016 forgot to mention. in admin / modules / content (install jssor) and you can put the slider on and off. Also there are 350 different transitions to use. http://www.jssor.com/development/tool-slideshow-transition-viewer.html You can select an transition. if you like it copy the transition code and put it in (catalog/includes/modules/content/header/templates/jssor.php) Link to comment Share on other sites More sharing options...
♥Gyakutsuki Posted April 3, 2016 Share Posted April 3, 2016 @@dinopacha You can improve you script with this in catalog/includes/modules/content/header/cm_header_jssor.php after insert this global $oscTemplate, $header_tags_array; $footer_tag .= '<script type="text/javascript" src="ext/jssor/jssor.slider.mini.js"></script>';$oscTemplate->addBlock($footer_tag, 'footer_scripts'); it should work. Regards ----------------------------------------- Loïc Contact me by skype for business Contact me @gyakutsuki for an answer on the forum Link to comment Share on other sites More sharing options...
dinopacha Posted April 3, 2016 Author Share Posted April 3, 2016 @@Gyakutsuki Thanks. Tommorow I will try it out. Improvements are always good. Link to comment Share on other sites More sharing options...
CGhoST Posted May 19, 2016 Share Posted May 19, 2016 Thank you for this post. I am having a little problem with the display of the images. Everything seems to be working fine except the images are distorted. Even if i move the modules to the header the result is the same. Please see attached image as to what i mean. All help is much appreciated. Link to comment Share on other sites More sharing options...
dinopacha Posted May 19, 2016 Author Share Posted May 19, 2016 @@CGhoST Do you turn on the module in the admin??? You have to put the content width on 12. Link to comment Share on other sites More sharing options...
CGhoST Posted May 20, 2016 Share Posted May 20, 2016 Hi dinopacha Yes i did enable it in admin and i changed it to 12 now. I changed the images and everything works good now. Good Addon .. Thanks dinopacha Link to comment Share on other sites More sharing options...
Jack_mcs Posted May 20, 2016 Share Posted May 20, 2016 @@dinopacha Providing this code was a good start. But without it being an addon, it will be overlooked since no one would know of it unless they just happened upon this thread, as I did. You may want to consider packaging it up as an addon. I've made some changes to the includes/modules/content/header/cm_header_jssor.php and includes/modules/content/header/templates/jssor.php files. This adds a setting to allow naming a banner group. The images can then be controlled via the banner manager, which removes the need of the shop owner to edit the file to change an image. There are other changes that can be made, like adding text to an image, but I think this change makes it more useful. <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright (c) 2014 osCommerce Released under the GNU General Public License */ class cm_header_jssor { var $code; var $group; var $title; var $description; var $sort_order; var $enabled = false; function cm_header_jssor() { $this->code = get_class($this); $this->group = basename(dirname(__FILE__)); $this->title = MODULE_CONTENT_HEADER_JSSOR_TITLE; $this->description = MODULE_CONTENT_HEADER_JSSOR_DESCRIPTION; $this->description .= '<div class="secWarning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>'; if ( defined('MODULE_CONTENT_HEADER_JSSOR_STATUS') ) { $this->sort_order = MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER; $this->enabled = (MODULE_CONTENT_HEADER_JSSOR_STATUS == 'True'); } } function execute() { global $oscTemplate, $header_tags_array; $content_width = (int)MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH; ob_start(); include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/jssor.php'); $template = ob_get_clean(); $oscTemplate->addContent($template, $this->group); } /* function isEnabled() { return $this->enabled; } */ function isEnabled() { global $cPath, $PHP_SELF; if((basename($PHP_SELF) != FILENAME_DEFAULT) || tep_not_null($cPath)){ $this->enabled = false; }else{ return $this->enabled; } } function check() { return defined('MODULE_CONTENT_HEADER_JSSOR_STATUS'); } function install() { tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Header Jssor Module', 'MODULE_CONTENT_HEADER_JSSOR_STATUS', 'True', 'Do you want to enable the Jssor content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH', '12', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())"); tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Group', 'MODULE_CONTENT_HEADER_JSSOR_SLIDER_GROUP', 'slider', 'Name of the banner group that Jssor uses images.', '6', '3', now())"); } function remove() { tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')"); } function keys() { return array('MODULE_CONTENT_HEADER_JSSOR_STATUS', 'MODULE_CONTENT_HEADER_JSSOR_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_JSSOR_SORT_ORDER', 'MODULE_CONTENT_HEADER_JSSOR_SLIDER_GROUP'); } } <?php $imgArray = array(); $urlArray = array(); $banner_query = tep_db_query("select banners_id, banners_url, banners_image, banners_html_text from banners where banners_group = '" . MODULE_CONTENT_HEADER_JSSOR_SLIDER_GROUP . "' and status = 1"); if (($cnt = tep_db_num_rows($banner_query)) > 0) { while ($banner = tep_db_fetch_array($banner_query)) { $imgArray[] = tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text'], '','','u="image"'); $urlArray[] = tep_href_link($banner['banners_url']); } } ?> <div class="jssorwrapper col-sm-<?php echo $content_width; ?>"> <!-- Jssor Slider Begin --> <div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;"> <!-- Loading Screen --> <div u="loading" style="position: absolute; top: 0px; left: 0px;"> <div style="filter: alpha(opacity=70); opacity:0.7; position:absolute; display:block; background-color:#000; top: 0px; left: 0px;width:100%; height:100%;"></div> <div style="position:absolute; display:block; background:url(images/jssor/loading.gif) no-repeat center center; top:0px; left: 0px;width:100%; height:100%;"></div> </div> <!-- Slides Container --> <div u="slides" style="cursor: move; position:absolute; left:0px; top:0px; width:1140px; height:442px; overflow:hidden;"> <?php for ($i = 0; $i < $cnt; ++$i) { echo '<div><a href="' . $urlArray[$i] . '">' . $imgArray[$i] . '</a></div>'; } ?> </div> <!-- underneath is css for the bullets --> <style> /* jssor slider bullet navigator skin 05 css */ /* .jssorb05 div (normal) .jssorb05 div:hover (normal mouseover) .jssorb05 .av (active) .jssorb05 .av:hover (active mouseover) .jssorb05 .dn (mousedown) */ .jssorb05 { position: absolute; } .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av { position: absolute; /* size of bullet elment */ width: 16px; height: 16px; background: url(images/jssor/b05.png) no-repeat; overflow: hidden; cursor: pointer; } .jssorb05 div { background-position: -7px -7px; } .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; } .jssorb05 .av { background-position: -67px -7px; } .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; } </style> <!-- bullet navigator container --> <div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;"> <!-- bullet navigator item prototype --> <div u="prototype"></div> </div> <!-- end of the bullets --> <!-- ========================================================================================================================== --> <!-- underneath is for the arrows left and right --> <!--#region Arrow Navigator Skin Begin --> <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --> <style> /* jssor slider arrow navigator skin 11 css */ /* .jssora11l (normal) .jssora11r (normal) .jssora11l:hover (normal mouseover) .jssora11r:hover (normal mouseover) .jssora11l.jssora11ldn (mousedown) .jssora11r.jssora11rdn (mousedown) */ .jssora11l, .jssora11r { display: block; position: absolute; /* size of arrow element */ width: 37px; height: 37px; cursor: pointer; background: url(images/jssor/a11.png) no-repeat; overflow: hidden; } .jssora11l { background-position: -11px -41px; } .jssora11r { background-position: -71px -41px; } .jssora11l:hover { background-position: -131px -41px; } .jssora11r:hover { background-position: -191px -41px; } .jssora11l.jssora11ldn { background-position: -251px -41px; } .jssora11r.jssora11rdn { background-position: -311px -41px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;"> </span> <!--#endregion Arrow Navigator Skin End --> </div> <!-- Jssor Slider End --> <!-- end of the arrows left and right --> <!-- ========================================================================================================================== --> <!-- begin of the transitions --> <script> jQuery(document).ready(function ($) { var _SlideshowTransitions = [ /* begin vanaf hier kun je de transitions aanpassen */ {$Duration:1400,x:0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1400,x:-0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10}}, {$Duration:1200,x:4,$Zoom:11,$Rotate:1,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad,$Rotate:$JssorEasing$.$EaseInCubic},$Opacity:2,$Round:{$Rotate:0.7}}, {$Duration:1000,$Delay:30,$Cols:8,$Rows:4,$Clip:15,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:$JssorEasing$.$EaseInQuad,$Assembly:2050} /* end of the transitions */ ]; var options = { $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: _SlideshowTransitions, $TransitionsOrder: 1, $ShowLink: true}, $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1 $Idle: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 $PauseOnHover: 1, //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false $SlideEasing: $JssorEasing$.$EaseOutQuint, //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad $SlideDuration: 800, //[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 $Cols: 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, arrow navigator container, thumbnail navigator container etc). $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, 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 $Cols is greater than 1, or parking position is not 0) $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Scale: false //Scales bullets navigator or not while slider scale }, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: 1, //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 $Scale: false //Scales bullets navigator or not while slider scale } }; var jssor_slider1 = new $JssorSlider$("slider1_container", options); //responsive code begin //you can remove responsive code if you don't want the slider scales while window resizing function ScaleSlider() { var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; if (parentWidth) { jssor_slider1.$ScaleWidth(parentWidth - 30); } else window.setTimeout(ScaleSlider, 30); } ScaleSlider(); $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); //responsive code end }); </script> <!-- Jssor Slider end --> </div> Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
dinopacha Posted May 20, 2016 Author Share Posted May 20, 2016 @@Jack_mcs Hi Jack, thank you I gonna try to make an addon of it, but first I have to read how to do it haha. Have a nica day, Link to comment Share on other sites More sharing options...
valquiria23 Posted June 8, 2016 Share Posted June 8, 2016 Dear @@dinopacha could you did the addon ? It seems an excellent idea !! Best regards Valqui Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
Guest Posted June 9, 2016 Share Posted June 9, 2016 @@dinopacha Hi This is interesting. I have found for whatever reason that the slider seems to work OK without <script type="text/javascript" src="ext/jssor/jssor.slider.mini.js" ></script> in catalog/includes/template_top.php or catalog/includes/footer.php I have used the carousel within the bootstrap but found that GTmetix although giving a slightly lower Y_speed the page loads quicker whne using jssor.At the moment Im trying to figure out how to defer parsing the Javascript from jssor. Look forward to any comments I can PM you the site its working on. Cheers Grandp Link to comment Share on other sites More sharing options...
sahins Posted June 21, 2016 Share Posted June 21, 2016 and at last the images. (see the attchment) you can change the image files in (catalog/includes/modules/content/header/cm_header_jssor.php) catalog/images/jssor/ Have fun .... :thumbsup: Hi, I did these but nothing happened, why ? Home page has no any changing. Also, what is your atch.files real names ? Link to comment Share on other sites More sharing options...
Fiber Posted December 5, 2016 Share Posted December 5, 2016 Question how can I make the slider multilanguage? I have two languages Dutch and English if the client puts the shop on English that he will see a English slider? Link to comment Share on other sites More sharing options...
ecommunlimited Posted December 6, 2016 Share Posted December 6, 2016 @@dinopacha I'm running v2.3.4 BSr. The images are not showing on the homepage. Do you know why? The links and images info shows up on testing sites like Pingdom so I can tell it's trying to work. I do have Add Block installed but it's turned of for my site and the images are NOT being blocked. Take care Bill Link to comment Share on other sites More sharing options...
Jack_mcs Posted December 6, 2016 Share Posted December 6, 2016 I'm not sure jssor is compatible with jquery 3, which is what the latest BS uses. I just tried it in a test shop with the latest version and it didn't work and that is the only difference that would cause that, that I can see. Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
ecommunlimited Posted December 6, 2016 Share Posted December 6, 2016 @@Jack_mcs Thank you, that's what I needed to know. Take care Bill Link to comment Share on other sites More sharing options...
Jack_mcs Posted December 7, 2016 Share Posted December 7, 2016 I stand corrected on this. I had some time to play around with it and it is working here in my test shop that is running jquery 3. The following change is needed. Find this line: <!-- begin of the transitions --> And add the following after it (adjust the location if yours is different). <script src="ext/jssor/jssor.slider.mini.js"></script> Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
vampirehunter Posted December 23, 2016 Share Posted December 23, 2016 whats performance like with the jssor vs the standard bootstrap carousel? Link to comment Share on other sites More sharing options...
Jack_mcs Posted December 23, 2016 Share Posted December 23, 2016 I haven't used the bootstrap carousel so I can't say. But I have installed Jessor into a few shops and don't see any issues with them. Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
CGhoST Posted June 27, 2018 Share Posted June 27, 2018 I am trying to get this to work with Bootstrap CE but what is happening is the whole website is blank. If i disable the image in Banner Manager then the main page shows. Can anyone assist to fix this please. Thanks Link to comment Share on other sites More sharing options...
Jack_mcs Posted June 27, 2018 Share Posted June 27, 2018 If the whole page is blank, then you've probably made a mistake in the installation. Maybe you overwrote a php delimiter? Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
CGhoST Posted June 28, 2018 Share Posted June 28, 2018 Without the images it works fine. Please see attached image. The blank area in the middle is supposed to be the images. If i enable the image in Banner Manager he whole page is blank. So my understanding would be the addon is working but some problem with displaying images. Link to comment Share on other sites More sharing options...
Jack_mcs Posted June 28, 2018 Share Posted June 28, 2018 Your terminology is confusing me. If you enable the module and a white space appears on the page, which it sounds like is the case, then the problem has to do with the module. But if the "whole" page is blank, that is something else. Assuming the former, that can happen if the javascript file can't be found. Maybe it didn't get uploaded. Or the banners are not using the correct group name. I don't recall how the group is assigned in this addon (I use a variation of it) but you have to be sure to use the correct name for the banner group. Support Links: For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc. Get the latest versions of my addons Recommended SEO Addons Link to comment Share on other sites More sharing options...
CGhoST Posted June 28, 2018 Share Posted June 28, 2018 After further investigation i hardcoded the images in the /includes/modules/content/index/templates/jssor.php and everything worked fine. @Jack_mcs Can you please kindly look at the code for the images and banner manager implementation. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.