Struggling with a difficult code method to import images from an API directly into a gallery or lightbox... Unfortunately, I couldn't find any helpful tutorials, but stumbled upon this example:
https://stackblitz.com/edit/ngx-gallery-imageviewer
After attempting to adapt it to my own code, I successfully retrieved images in arrays, but I'm stuck on how to pass them to a property similar to the one used by the developer in the example.
I am currently at a roadblock where I need to pass my images to a variable with specific properties:
https://i.sstatic.net/ywzXW.jpg
This is the snippet of my code:
allImages: PostG[] = [];
fetch(this.apiKey)
.then(response => {
if (response.ok) {
return response.json();
};
})
.then((j: any) => {
const image = [...j.data.post.map(item => item.images)];
image.forEach((image: PostG[]) => {
var obj = {
image:image,
}
this.allImages = [...image];
return{
type: "imageViewer",
imagesGallery: {
srcUrl: console.log(this.allImages),
previewUrl: console.log(this.allImages)
}
}
});
});
The current output of this code is displayed below.
https://i.sstatic.net/6eEXm.jpg
If you take a look at the stackblitz example, you'll see that local images are used. In my case, how can I effectively incorporate my photos? I aim to *ngFor every gallery for each post obtained with their respective images.
Here's the HTML implementation I've attempted:
<ion-col class="ion-no-padding" size-md="12" size-lg="12" size-sm="12" size-xs="12" *ngFor="let post of allPosts | sortPipe">
//followed by embedding the gallery:
<div class="basic-container">
<h2>Basic Example</h2>
<gallery id="basic-test" fluid [items]="items" [itemTemplate]="itemTemplate" [gestures]="false"></gallery>
</div>
<!-- create a template to use the imageviewer -->
<ng-template #itemTemplate let-index="index" let-type="type" let-data="{{this.allImages}}" let-currIndex="currIndex">
<ng-container *ngIf="type === 'imageViewer' && index === currIndex" >
<ngx-imageviewer [src]="this.allImages"></ngx-imageviewer>
</ng-container>
</ng-template>
Please bear with me if this question seems lengthy, I want to provide all necessary information for your assistance. This project holds great importance for me. Thank you!