search

fancyapps / fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
http://fancyapps.com/
7.28k stars 1.78k forks source link

Fancybox in Angular 11 slide auto starting #2600

Open dogaanismail opened 3 years ago

dogaanismail commented 3 years ago

I am working on fancybox gallery images in Angular 11. I have managed to view my images using fancybox, but I want slides to play automatically. How can I do it? Is there any way to do it by adding a html attribute like autostart="true" ?

Here is my story feed implementations.

  `<div class="stories-feed">
  <div class="columns is-multiline">

<div class="column is-4 is-half-tablet" *ngFor="let story of stories | orderBy : '-createdDate'">

    <!--Feed item-->
    <div class="story-feed-item" id="story-item">
        <a href="{{story.imageUrl}}" title="{{story.description}}" data-demo-href="{{story.imageUrl}}"
            data-fancybox="images" attr.data-caption="{{story.description}}">
            <img class="featured-image" src="{{story.imageUrl}}" data-demo-src="{{story.imageUrl}}"
                alt="{{story.description}}" data-caption="{{story.description}}">
        </a>
        <a class="item-meta">
            <div class="user-info">
                <div class="small-avatar">
                    <img class="avatar" src="{{story.createdByUserPhoto}}"
                        data-demo-src="{{story.createdByUserPhoto}}" data-user-popover="10" alt=""
                        title="{{story.createdByUserName}}">
                </div>
                <span>{{story.createdByUserName}}</span>
            </div>
            <div class="item-stats">
                <div class="stat-item">
                    <mat-icon>favorite_border</mat-icon>
                    <span>99</span>
                </div>
                <div class="stat-item">
                    <mat-icon>chat_bubble_outline</mat-icon>
                    <span>23</span>
                </div>
            </div>
        </a>
    </div>

</div>

`

   `import { Component, Input, OnInit } from '@angular/core';
declare var jQuery: any

/* Models */
import { Story } from '../../../models/story/story';

@Component({
selector: 'app-story-feed',
templateUrl: './story-feed.component.html',
styleUrls: ['./story-feed.component.scss']
})

export class StoryFeedComponent implements OnInit {

constructor() { }

@Input() stories: Story[];

ngOnInit() {
        jQuery('[data-fancybox="images"],[data-fancybox="gallery"]').fancybox({
         slideShow : {
         autoStart : true
        }
 });
 }
}
 `

Example screenshot

mjcampagna commented 3 years ago

I’m not familiar with Angular, but in React you’d have to kick off the Fancybox slideshow on component mount via useEffect or in the componentDidMount lifecycle method. I reckon you’d need to do something similar with Angular.