adebisi-fa / dang-jssor Goto Github PK

View Code? Open in Web Editor NEW

17.0 2.0 5.0 903 KB

An AngularJS directive for the powerful JSSOR slider plugin, jssor.com

License: MIT License

JavaScript 100.00%

dang-jssor's Introduction

dang-jssor

An AngularJS directive for the powerful JSSOR slider plugin, jssor.com

##Why?

dang-jssor was created to make it easy to use the powerful jssor slider in angular applications.

This component depends on the official jssor distribution, available on both jssor.com and the bower repository, bower.io, where it is known as jssor-slider.

##Usage

Add a slides-container class to your jssor slides container.
Add the enable-jssor directive to the container.
Add a jssor-options attribute to the container. The attribute's value must be a scope variable initialized with an object that represents your slider options.
Add a jssor-trigger attribute to the container. The value of this attribute must be 'true' or 'false'. A value of 'true' activates the jssor directive. Otherwise, it remains deactivated.

Example:

<div class="slides-container" enable-jssor jssor-options="scope-object-variable" jssor-trigger='true'>
    <div u="slides">
        <div> ... </div>
        <!-- Other slides here -->
    </div>
    <!-- Other slider configuration UI definition here -->
</div>

See the demo page hosted here. The source of this demo is available here in this repository.

##Build

The build system depends on Node.js, and bower npm package. Install this before running the following commands:

Install grunt and its dependencies

npm install
Install bower dependencies

bower install
Build

grunt

##License

MIT License

dang-jssor's People

Contributors

Stargazers

Watchers

Forkers

dimroc k0t0d4m4 mickro andriah91 ducphanrm

dang-jssor's Issues

thumbnails

Hi! First of all, sorry for my english, I'm brazilian guy ^^.
I'm trying to use a jssor image gallery with thumbnails, but it does not display the thumbnail. The browser inspector shows that the angular tag ''{{image.thumb}}" is not interpreted.

The HTML Code:

<div class="slides-container"
     style="position: relative; top: 0px; left: 0px; height: 300px; width: 600px">
  <div u="slides"
       style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
    <div ng-repeat="packageImage in images" enable-jssor
         jssor-options="sliderWithArrowOptions"
         jssor-trigger="{{$last}}">
      <img u="image" src="{{packageImage.img}}"/>
      <img u="thumb" src="{{packageImage.thumb}}"/>
    </div>
  </div>
  <style>
    .jssora05l, .jssora05r {
      display: block;
      position: absolute;
      /* size of arrow element */
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: url(bower_components/jssor-slider/img/a17.png) no-repeat;
      overflow: hidden;
    }

    .jssora05l {
      background-position: -10px -40px;
    }

    .jssora05r {
      background-position: -70px -40px;
    }

    .jssora05l:hover {
      background-position: -130px -40px;
    }

    .jssora05r:hover {
      background-position: -190px -40px;
    }

    .jssora05l.jssora05ldn {
      background-position: -250px -40px;
    }

    .jssora05r.jssora05rdn {
      background-position: -310px -40px;
    }
  </style>
        <span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;">
        </span>
        <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px">
        </span>
  <style>
    .jssort01 {
      position: absolute;
      /* size of thumbnail navigator container */
      width: 600px;
      height: 100px;
    }
    .jssort01 .p {
      position: absolute;
      top: 0;
      left: 0;
      width: 72px;
      height: 72px;
    }
    .jssort01 .t {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    .jssort01 .w {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }

    .jssort01 .c {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 68px;
      height: 68px;
      border: #000 2px solid;
      box-sizing: content-box;
      background: url(bower_components/jssor-slider/img/t01.png) -800px -800px no-repeat;
      _background: none;
    }
    .jssort01 .pav .c {
      top: 2px;
      _top: 0px;
      left: 2px;
      _left: 0px;
      width: 68px;
      height: 68px;
      border: #000 0px solid;
      _border: #fff 2px solid;
      background-position: 50% 50%;
    }
    .jssort01 .p:hover .c {
      top: 0px;
      left: 0px;
      width: 70px;
      height: 70px;
      border: #fff 1px solid;
      background-position: 50% 50%;
    }
    .jssort01 .p.pdn .c {
      background-position: 50% 50%;
      width: 68px;
      height: 68px;
      border: #000 2px solid;
    }
    * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
      width: 72px;
      height: 72px;
    }
  </style>
  <div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
    <div u="slides" style="cursor: default;">
      <div u="prototype" class="p">
        <div class=w>
          <div u="thumbnailtemplate" class="t"></div>
        </div>
        <div class=c></div>
      </div>
    </div>
  </div>
</div>

The Javascript code:

myModule.controller('MyCtrl', function ($scope) {
        //images
        $scope.images = [
            {
                img : 'img/image1.jpg',
                thumb: 'img/image1_thumb.jpg'
            },
            {
                img : 'img/image2.jpg',
                thumb: 'img/image2_thumb.jpg'
            },
            {
                img : 'img/image3.jpg',
                thumb: 'img/image3_thumb.jpg'
            },
        ];
        //slider options
        $scope.sliderWithArrowOptions = {
            name: "sliderWithArrow",
            $DragOrientation: 1,
            $ArrowKeyNavigation: true,
            $SlideDuration: 800,
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 1
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $ChanceToShow: 2,
                $ActionMode: 1,
                $SpacingX: 8,
                $DisplayPieces: 10,
                $ParkingPosition: 360
            }
        };
    });

Full width support

How can i add full width support?

jssor slider using angularjs - almost!

Is there a working sample of the jssor slider using angularjs for the "Image Gallery" -the sample with the thumbnails below the main image - that I can use for a reference? I have managed to create a HTML page with this scenario and I have it working except for these issues:

Using a six image deck, image number 4 is blank when it is its turn to appear and the styling that is applied for that pic is "display = none".
Using a seven image deck, image numbers 4 and 5 are blank when it is its turn to appear and the style for that pic is "display = none".
Using a deck of five images or less all images appear in the slider correctly.
None of the thumbnails show up on the bottom as they are supposed to however clicking on each thumbnail takes you to the correct slider picture.

Theses tests were run using jssor.slider.mini.js. When I use jssor.slider.min.js there is a different behavior, in short, on a seven image slider deck image numbers 3, 4 and 5 appear blank.

I am not able to paste my HTML page here as the code gets all fouled up and unreadable. And since I am not allowed to attach an HTML page to this posting I have instead attached a txt version of my HTML file for those who would like to have a look at what I have done. It can be downloaded and entered into any IDE for perusal I assume.
I have been trouble shooting this for over a day so far. Thank you for your time.

jssorTest.txt

Unable to drag the images to slide on Mobile.

I have created a basic slider with the below options.
$scope.basicUsageOptions = {
$DragOrientation: 1,
$PlayOrientation: 1,
$AutoPlay: true
};

When I try this code on my browser it drags the images to slide. However when I try this on my mobile (Cordova Hybrid App) it fails to drag the images to slide. Kindly help me out.

how add SlideshowTransitions

var jssor_1_SlideshowTransitions = [

{$Duration:600,y:-1,$Cols:8,$Rows:4,$Clip:15,$During:{$Top:[0.5,0.5],$Clip:[0,0.5]},$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Column:12},$ScaleClip:0.5},
]

autoplay and jssor object

your Example 3 " Basic Usage (jQuery) with ng-repeat" is only in autoplay mode.
But how can i make the animation started by an event ?
with Jssor-object attribute , this doesn't work, any example working ?

After installing and running gulp build I get 'jssor-slider is not installed'??

I am trying to use this bower installed jssor-slider in my project. I can run the install and if I look at my folder structure I can see that it has been installed. When I try and do a gulp server after doing a successful gulp build I get an error that jssor-slider is not installed' try running bower install.

Any ideas why this might be happening?

adebisi-fa / dang-jssor Goto Github PK

dang-jssor's Introduction

dang-jssor

dang-jssor's People

Contributors

Stargazers

Watchers

Forkers

dang-jssor's Issues

thumbnails

Full width support

jssor slider using angularjs - almost!

Unable to drag the images to slide on Mobile.

how add SlideshowTransitions

autoplay and jssor object

After installing and running gulp build I get 'jssor-slider is not installed'??

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent