search

pedroabreu / ion-gallery

Ionic gallery directive
MIT License
124 stars 61 forks source link

Thumbnails are not used in final html, the resulted thumbnail is 14px height #32

Open amreladawy opened 8 years ago

amreladawy commented 8 years ago

Hi there,

Nice plugin. I tried to use but the final HTML discards the thumb image I passed to it

<ion-gallery ion-gallery-items="galleryData" ion-gallery-actionLabel="{{'CLOSE'|translate}}" ></ion-gallery>

The final results looks like this


<div class="gallery-view" ion-gallery-items="galleryData" ion-gallery-actionlabel="Close">
  <!-- ngRepeat: item in items track by $index --><div class="row" ng-repeat="item in items track by $index" ion-row-height="" style="height: 0px;">
    <!-- ngRepeat: photo in item track by $index --><div ng-repeat="photo in item track by $index" class="col col-33 image-container">

      <img ion-image-scale="" ng-src="http://d1c7z8qwf20y92.cloudfront.net/thumb/65/500x500/2147483647/5475.jpg" ng-click="showImage(0,0)" src="http://d1c7z8qwf20y92.cloudfront.net/thumb/65/500x500/2147483647/5475.jpg" height="14px" data-pin-nopin="true" class="">

    </div><!-- end ngRepeat: photo in item track by $index -->
  </div><!-- end ngRepeat: item in items track by $index -->
  <div ion-slider=""></div>
</div>
pedroabreu commented 8 years ago

What's the structure of the object your passing ?

Is the issue that the thumbnail becomes too small ?

nnavnyko commented 8 years ago

Hello. The same issue. Natural size is 200x200 px. I think there is something wrong in line

element.css('height',element[0].offsetWidth * parseInt(scope.$parent.responsiveGrid)/100 + 'px');

https://github.com/pedroabreu/ion-gallery/blob/master/dist/ion-gallery.js#L209

gallery_small_images

pedroabreu commented 8 years ago

Is this still an issue ?

nnavnyko commented 8 years ago

I think it is. I've tried newest version, height is 0 (maybe I've made wrong structure of items, the structure is [{"src":"http://gallerytest.easybusy.net/media/galleries/2d379ed60f329caa7e05f925c004312a_S7Uxfmz.png?md5=1e62a108e93fa31a98f3747449b325df","thumb":null,"sub":null},{"src":"http://gallerytest.easybusy.net/media/galleries/22beb51c16be835a2322e7d1654d0a0b_AAUK1zS.jpg?md5=5c5a3c849d0ac16d298f149ac453922b","thumb":null,"sub":null},{"src":"http://gallerytest.easybusy.net/media/galleries/ea2b707f4802a823712ac7293d82ec64_6hrJ5Xx.jpg?md5=8e573106c153fecb4e48a3e6624abdfc","thumb":null,"sub":null},{"src":"http://gallerytest.easybusy.net/media/galleries/edb8f55f01029aeb2daab759310c6702_f6dIeAg.gif?md5=6750559bfe9644a877a62eb62ebef180","thumb":null,"sub":null}] ). Temporary I replaced with natural height element.attr('height',element.parent()[0].offsetHeight+'px');

Testing in newest version

ion-gallery01 ion-gallery02 ion-gallery-03

pedroabreu commented 8 years ago

You're getting 0 because you're passing the thumb property as null (And that's the image rendered as the item in the gallery). That's why you don't have src attribute on the image.

As it is, either you don't define the property at all (just remove it from the object) or you need to define it's value.

It's a bit silly as it is, I'll fix it in the next days