Zuck.js In Angular

In this article, we will figure it out how to utilize Zuck.js in the Angular 11 application. Zuck.js is used to display a Facebook, Instagram like story feature in angular.

Let’s start the code

  • Create an Angular application using the following command
ng new zuck-js
cd zuck-js
  • Add the following package to your application
npm i zuck.js
  • Add below code in your app. component.ts file
import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, ActivatedRouteSnapshot, Router } from '@angular/router'
declare var getCurrentSkin: any
declare var Zuck: any
declare var timestamp: any
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'zuck-demo'

  ngOnInit(): void {
    this.initZuck()
      ; (window as any).globalApp = this
    setTimeout(() => {
      (document.querySelector(`[data-id="ramon"]`) as any)?.click()
    }, 500)
  }

  constructor(private route: Router, private activatedRoute: ActivatedRoute) {

  }

  initZuck() {
    var currentSkin = getCurrentSkin()
    var stories = new Zuck('stories', {
      backNative: true,
      previousTap: true,
      skin: currentSkin['name'],
      autoFullScreen: currentSkin['params']['autoFullScreen'],
      avatars: currentSkin['params']['avatars'],
      paginationArrows: currentSkin['params']['paginationArrows'],
      list: currentSkin['params']['list'],
      cubeEffect: currentSkin['params']['cubeEffect'],
      localStorage: true,
      stories: [
        Zuck.buildTimelineItem(
          'ramon',
          'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg',
          'Ramon',
          'https://ramon.codes',
          timestamp(),
          [
            [
              'ramon-1',
              'photo',
              3,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
            [
              'ramon-2',
              'video',
              0,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
            [
              'ramon-3',
              'photo',
              3,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png',
              'https://ramon.codes',
              'Visit my Portfolio',
              false,
              timestamp(),
            ],
          ],
        ),
        Zuck.buildTimelineItem(
          'gorillaz',
          'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/2.jpg',
          'Gorillaz',
          '',
          timestamp(),
          [
            [
              'gorillaz-1',
              'video',
              0,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.mp4',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
            [
              'gorillaz-2',
              'photo',
              3,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
          ],
        ),
        Zuck.buildTimelineItem(
          'ladygaga',
          'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/3.jpg',
          'Lady Gaga',
          '',
          timestamp(),
          [
            [
              'ladygaga-1',
              'photo',
              5,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
            [
              'ladygaga-2',
              'photo',
              3,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg',
              'http://ladygaga.com',
              false,
              false,
              timestamp(),
            ],
          ],
        ),
        Zuck.buildTimelineItem(
          'starboy',
          'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/4.jpg',
          'The Weeknd',
          '',
          timestamp(),
          [
            [
              'starboy-1',
              'photo',
              5,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
          ],
        ),
        Zuck.buildTimelineItem(
          'riversquomo',
          'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/5.jpg',
          'Rivers Cuomo',
          '',
          timestamp(),
          [
            [
              'riverscuomo',
              'photo',
              10,
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg',
              'https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg',
              '',
              false,
              false,
              timestamp(),
            ],
          ],
        ),
      ],
      callbacks: {
        onClose(storyId: any, callback: any) {
          document.getElementById('zuck-modal')?.classList.add('closed')
          callback() // on close story viewer
        },
        onOpen(storyId: any, callback: any) {
          document.getElementById('zuck-modal')?.classList.remove('closed')
          callback() // on open story viewer
        }
      },
    })
  }
}
  • Add below code in your app. component.html file
<h1 id="header" class="Snapgram"></h1>

<a
  href="https://ramon.codes/projects/zuck.js"
  target="_blank"
>
</a>

<div id="stories"></div>
  • Add below code in your app-routing.module.ts file
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  {path: '',component:AppComponent },
  {path: 'story',component:AppComponent },
  {path: 'story/:id',component:AppComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  • Add the below code in your index.html file
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ZuckDemo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <!-- demo styles -->
    <link rel="stylesheet" href="./assets/zuck_files/style.css" />

    <!-- lib styles -->
    <link rel="stylesheet" href="./assets/zuck_files/zuck.min.css" />

    <!-- lib skins -->
    <link rel="stylesheet" href="./assets/zuck_files/snapgram.css" />
    <link rel="stylesheet" href="./assets/zuck_files/vemdezap.css" />
    <link rel="stylesheet" href="./assets/zuck_files/facesnap.css" />
    <link rel="stylesheet" href="./assets/zuck_files/snapssenger.css" />

    <script src="./assets/zuck_files/zuck.min.js"></script>
    <script src="./assets/zuck_files/script.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>
  • Run Your Application
npm start

Output:

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories