<ion-slide> with json image request

1

Hello,
I’m having a problem with the <ion-slide>, if i use a local image like this -

<ion-slide>
<div >
     <img src="img/propertyslide1.jpg" width="426" height="320" alt=""/>
</div>
</ion-slide>

I don’t have any problem, but when i use a image from a json request it don’t work

My code whit json -

var _data = data.property.images_slide;
for(var index in _data) {
console.log(index);

var newLiElement = angular.element('<ion-slide>' + '<div>' + '<img src="' + _data[index] + '" width="426" height="320" alt=""/>' + '</div>' + '</ion-slide>');
                    newULElement.append(newLiElement);
                    }

This request is working, the problem is to make it work whit the <ion-slide> tag.
Thanks for the help!!

2

this will not work…
ion-slide is an ionic directive, if you add this afterwards you have to compile this snippet of code (using angularjs $compile).

but why do you not use img with ng-src attribute?

like in your controller:

$scope.images = data;

in your template:

<ion-slide ng-repeat="image in images"><div><img ng-src="image" /></div></ion-slide>

Maybe you have to consider … reading some basic angularjs tutorials…

2 Likes
3

Thank you for the quick response @bengtler !!!

I’m using right now as you suggested the ng-repeat and ng-src .
And is putting the pictures right, but the slide still does not work I can see at the inspector in chrome I’m getting all the images well and is repeating the <ion-slide> it is supposed to be, but only shows me the last image from my array and the slide does not work.

Many thanks for the help !!

My current code -

<ion-slide-box on-slide-changed="slideHasChanged($index)">
    <ion-slide ng-repeat="image in images">
        <div>
            <img ng-src="{{image}}" width="426" height="320" alt="">
        </div>
    </ion-slide>

$http.jsonp(url)
   .success(function(data, status, headers, config) {
        console.log(data);

        var _data = data.property.images_slide;
        for(var index in _data) {
            console.log(index);
                                
                $scope.images = _data;
        }
    })
4


here a little codepen for you

Maybe you have to set the ion-slide-box/slide height via css?

5

I had tried this hypothesis but remains the same, I tested again now but still with the same problem.
I have one more slider in my app but is working with local pictures, i don’t have any problem whit that one, only in this specific case.

There was one time I woke up my android and the app was open and strangely it worked well, it was the strangest thing that has happened so far…

Every time i resize the chrome window after it have every image loaded it works fine…

Thank you @bengtler!

7

I wan’t to load my

$http.jsonp(http://www.example.com/view?id=1471&json=1&callback=JSON_CALLBACK")

before the html… But i’m stuck here i do not know how to solve this problem, it seems to be the only solution for my case, i think so…

Thanks for the precious help!

8

You’ll have to load it as a service in angular.

On the service factory, you should define how to load the json as a promise (so you can load a ‘Loading data’ overlay, for example), and it will have the json content ready for you to retrieve.
These videos should help you out - https://egghead.io/lessons/angularjs-http and https://egghead.io/lessons/angularjs-chained-promises

Then, on your controller you must inject the service established previously.
Now, your $scope can access the json object, which contains the data you want. Just call the service and get the object.

SERVICENAME.list().then( function (d) { 
//list() is a function of mine, defined on the service to return my data the way I want. it's nice when you don't want to send all the data at the same time.
    $scope.images = d; 
    //$scope.images now contains the json object, and you can use it on the view.
});

Hope it helps.

9

@tcn
you are hanging in the ion-slide-box in your dom -> without any image (because your image request is async) -> thatwhy the height, width and scrolling calculation is not correct.

I added an ng-if to the ion-slide-box to add the whole slide-box only if there is something on $scope.images.

I cleaned up your code… removing the unnecessary timeout.
Keep in mind if you are sending a http-request you have the success and error callback -> you should hide your loading indicator only if the request has finished (and you should hide it in both cases, because if not and your request fails… the user sees the loading indicator the whole time)

you can find the link to my code pen in a private message.

Greetz.

@urbgimtam
that was not the question :wink:

1 Like
10

Hello,
Finally I think I clarified my doubts :smile:

Thank you @bengtler for the precious help !!

11

I got the same problem. Could you please send the code in code pen, thanks.

12

I got the same problem. Could you please send the code in code pen, thanks

13

I got the same problem. Could you please send the code in code pen, thanks please