jTinder Library is Not Working Properly With AngularJS

Question

Were you able to solve this issue. I am having the same problem. I think jTinder is a great JS library, but the way their css library was built is not scalable. I've been trying to integrate this library into my AngularJS app, but it is not working the way I want it to work. Here is my HTML code for looping through my item list:

    <li  ng-repeat="item in items | orderBy:'-likes'" ui-sref="feeds">
         <div  style="background: url('{{item.picture}}') no-repeat scroll center center; background-size: cover;"></div>
         <div>{{item.productName}}</div>
         <span class="pull-right fa fa-star" style="color:#3685B0"></span>
         <div class="like"></div>
         <div class="dislike"></div>
   </li>

If you look closely at jTinder's CSS file (The last section of the stylesheet where images are loaded using CSS classes #tinderslide .pane5 .img{...} ), you'll see that I am trying to replicate the code that actually adds the image to the view using AngularJS ng-repeat directive. I am also adding inline CSS. But it is not working. My product Name is getting loaded properly, but the Image is not being loaded.

Here is my sample data

 {
    "_id": "5702bdbce518778bbc5add77",
    "index": 1,
    "guid": "694aafa9-b641-478a-a258-c2f0989f20dc",
    "isOnsale": true,
    "price": "$439.53",
    "saleprice": "$22.73",
    "picture": "https://s-media-cache-ak0.pinimg.com/564x/d7/24/f2/d724f20fb401e010d601842584b5419f.jpg",
    "review": 4,
    "size": "L",
    "brand": "GUESS",
    "productType": "BEAUTY",
    "category": "SWEATERS",
    "productName": "Guess Men's Grey Sweater Two-Tones",
    "company": "LUXURIA",
    "phone": "+1 (842) 527-3928",
    "address": "674 Autumn Avenue, Haena, Massachusetts, 471",
    "likes": 34,
    "comment_count": 6,
    "description": "Eu exercitation labore sint laborum nisi consequat pariatur sunt. Ullamco sit dolor velit ea excepteur cupidatat amet id Lorem anim enim consectetur ipsum eu. Laboris Lorem id exercitation occaecat irure aliquip veniam in ut. Esse velit occaecat cillum fugiat mollit ullamco do non cupidatat nulla ea esse aliquip cupidatat. Consectetur duis laborum fugiat laboris. Adipisicing fugiat dolor velit incididunt. Fugiat nisi dolor consequat amet et sint et aliquip qui consectetur.",
    "comments": "Non et elit ullamco est officia in. Velit ut nisi sunt mollit. Adipisicing est amet ipsum anim. Sunt aliquip irure aliqua non labore ut nulla.\n\nIrure fugiat ullamco enim elit sunt exercitation nisi. Ex consequat amet velit do ea veniam Lorem anim ipsum dolore ipsum aliqua culpa irure. Mollit irure aliquip ad elit ut consectetur proident amet et veniam nulla deserunt cupidatat culpa. Do duis sit elit voluptate fugiat anim ad id irure. Deserunt amet veniam nisi non.",
    "registered": "Sunday, November 2, 2014 12:41 PM",
    "latitude": "-6.226487",
    "longitude": "-111.623657"
}

I am using an AngularJS Service to pull the data from a JSON file and load it into my controller.

Please help me solve this. Thanks

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

Your background urls get resolved just fine, the problem is that the div you are using to display the image has 0 width and height and thus no background is displayed.

Depending on what you want the result to look like, you could either add some additional styling to the div (like in this other SO question) or you could just wrap all the other elements in the div with the background like

<li  ng-repeat="item in items | orderBy:'-likes'" ui-sref="feeds">
     <div  style="background: url('{{item.picture}}') no-repeat scroll center center; background-size: cover;">
         <div>{{item.productName}}</div>
         <span class="pull-right fa fa-star" style="color:#3685B0"></span>
         <div class="like"></div>
         <div class="dislike"></div>
     </div>
</li>

As a side note, you might want to look into the ngStyle directive instead of adding the expression in regular style-attribute which may cause the browser to start loading image from some random urls if the data is not immediately ready for angular to use. So perhaps it'd be better to write:

<div ng-style="{ background: 'url(\'' + item.picture + '\')' }" style="no-repeat scroll center center; background-size: cover;">

edited May 23 '17 at 12:19

Community

1
1

answered Apr 16 '16 at 20:57

noppa

3,947
21
22

Hey Noppa. Thanks for your contribution. Your solution helped me solve the issue of the image not displaying, but now that the images are displaying, the swiping feature doesnt work now. Its probably because of the order with which I am loading my JS files – AllJs Apr 17 '16 at 09:27
@AllJs how are you initializing jTinder on the element? With `$("#tinderslide").jTinder();`? That will probably get executed way too soon as angular is often quite slow to render the templates, so your `#tinderslide` element might not be present when needed. I recommend you create a directive and call jTinder from there. See [this SO question](http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs) for more info. – noppa Apr 17 '16 at 21:25
Hey Noppa, I have initialized jTinder on the page itself. Could you write a directive for me? I have been having issues writing a directive that works, because of its complexity. – AllJs Apr 18 '16 at 00:16
I should also add that the unlike/like buttons don't work on mobile devices for reasons I don't comprehend. When I open the site on my desktop it works just fine. – AllJs Apr 18 '16 at 01:47
@AIIJs hi am experiancing the same issue , have you solved it? – ArUn Nov 08 '16 at 02:21

jTinder Library is Not Working Properly With AngularJS

1 Answers1