Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

bootstrap jssor slider


Recommended Posts

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:

 

post-336856-0-93367600-1459704016_thumb.jpg

post-336856-0-18918000-1459704022_thumb.jpg

post-336856-0-82360700-1459704028_thumb.jpg

post-336856-0-08266900-1459704039.gif

post-336856-0-66373200-1459704044_thumb.png

post-336856-0-57104200-1459704056_thumb.png

Link to comment
Share on other sites

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

@@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

  • 1 month later...

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.

post-93717-0-09847200-1463642566_thumb.jpg

Link to comment
Share on other sites

@@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

  • 3 weeks later...

@@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

  • 2 weeks later...

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

  • 5 months later...

@@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

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

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

  • 3 weeks later...

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

  • 1 year later...

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

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.

ScreenShot.png

Link to comment
Share on other sites

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...