thumbnails

[ghost]

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
            }
        };
    });

[adebisi-fa]

Try prefixing your src attributes with ng-, like so:

<img u="image" ng-src="{{packageImage.img}}"/>
<img u="thumb" ng-src="{{packageImage.thumb}}"/>

Hope this helps.

[ghost]

I tried, but with ng-src didn't show any image or thumbnail.

[adebisi-fa]

You may need to specify a width and height for your image elements (image and thumb) like so:

<img u="image" ng-src="{{packageImage.img}}" style="width: 600px; height: 300px;" />
<img u="thumb" ng-src="{{packageImage.thumb}}" style="width: <thumb-width>; height: <thumb-height>" />

Hope this helps.

[ghost]

plunker: http://plnkr.co/edit/EInJum?p=preview