Search code examples
htmlslideshowjssorimgur

How to set up JSsor on an eBay auction properly?

I know the very basics of HTML and am trying to post an image slideshow on my ebay listings. I have tried the following in order to get Jssor to function:

  1. Downloaded slider-19.0.1 from Jssor slider GitHub.

  2. Tried following the ebay/blog post guide on jssor's website several times with both photobucket and imgur. The final result, as displayed on my ebay listing, was either a display of raw code or one static image that did not slide anywhere. Yes, I did compress it with the Jssor.Compress.exe tool successfully.I have installed and reinstalled the tool via the GitHub.

  3. I have also tried downloading the example source files from the GitHub, from the "examples-no-jQuery" folder as instructed. Yes, I did insert my own links from imgur. Namely, vertical-slider.source.html, and simple-slider.source.html. When compressed, they both appeared as a long string of code in the description of my ebay auction. Yes, I used the HTML editor on ebay, not the plain text description box. However, when directly opened with my web browser (Firefox) the first image was actually displayed (!), But it never slid anywhere and none of the other images were displayed.

I am probably missing one critical step somewhere and I would appreciate it if you could point me in the right direction. Below are the compressed versions, originating from the source examples directly from your website, with my photo links patched in, run with the most recent compressor tool, and they don't work for me They are definitely compressed because they are about 50% shorter than the source files:

  1. The vertical example, from here on the jssor github: (before compression >100 lines)

/*Jssor*/

.jssora08l,
.jssora08r {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url(../img/a08.png) no-repeat;
  overflow: hidden;
  opacity: .4;
  filter: alpha(opacity=40)
}

.jssora08l {
  background-position: -5px -35px
}

.jssora08r {
  background-position: -65px -35px
}

.jssora08l:hover {
  background-position: -5px -35px;
  opacity: .8;
  filter: alpha(opacity=80)
}

.jssora08r:hover {
  background-position: -65px -35px;
  opacity: .8;
  filter: alpha(opacity=80)
}

.jssora08l.jssora08ldn {
  background-position: -5px -35px;
  opacity: .3;
  filter: alpha(opacity=30)
}

.jssora08r.jssora08rdn {
  background-position: -65px -35px;
  opacity: .3;
  filter: alpha(opacity=30)
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Slider - Jssor Slider, Carousel, Slideshow</title>
</head>

<body style="font-family:Arial, Verdana;background-color:#fff;">
  <script type="text/javascript" src="../js/jssor.slider.min.js"></script>

  <script>
    jssor_slider1_starter = function(containerId) {
      var options = {
        $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
        $DragOrientation: 2, //[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)
        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
          $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
          $AutoCenter: 1, //[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
        }
      };
      var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
  </script>
  <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
    <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:#000000;top:0px;left:0px;width:100%;height:100%;">
      </div>
      <div style="position:absolute;display:block;background:url(../img/loading.gif) no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
      </div>
    </div>
    <div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">

      <div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
    </div>
    <span u="arrowleft" class="jssora08l" style="top:8px;left:8px;">
</span>
    <span u="arrowright" class="jssora08r" style="bottom:8px;left:8px;">
</span>
    <a style="display:none" href="http://www.jssor.com">Image Slider</a>
    <script>
      jssor_slider1_starter('slider1_container');
    </script>
  </div>
</body>

</html>

The "simple slider" example from here on the jssor website:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
</head>

<body style="font-family:Arial, Verdana;background-color:#fff;">
  <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
  <script>
    jssor_slider1_starter = function(containerId) {
      var options = {
        $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
        $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)
      };
      var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
  </script>
  <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
    <div u="slides" style="cursor:move;position:absolute;left:0px;top:0px;width:600px;height:300px;overflow:hidden;">
      <div><img u="image" src="http://i.imgur.com/FM6Tcksl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/Ni4NO8ol.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/JMBy1VVl.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/FWXXCV5l.jpg"></div>
      <div><img u="image" src="http://i.imgur.com/YfblQEJl.jpg"></div>
    </div>
    <a style="display:none" href="http://www.jssor.com">Image Slider</a>
    <script>
      jssor_slider1_starter('slider1_container');
    </script>
  </div>
</body>

</html>

All editing was done with vim. I am probably missing something really simple, but I don't understand how it isn't working because I followed the guides to a T and then used example sources off of the website. I feel like I have eliminated anything that could be a source of error.

Solution

  • Please run vertical-slider.compress.bat, you will get vertical-slider.html.

    Open it, the code between <body></body> is what you need.

    In addition, with jssor slider maker you can generate code by one click, see export slider code.