Bir angularjs projemde zuck.js kullanmaya çalışıyorum ama bir türlü stabil çalışmadı. Hata veriyor. Hatayı düzeltsem bu seferde story açılmıyor. Bunu directive ile birlikte aşağıdaki json dosyasına göre uyarlanması gerek. Zuck sitesindeki alternatif yöntemi kullanıyorum. Kullanım şeklim:
<div id="stories" ng-init="initStories(options)"> <!-- story --> <div class="story seen" data-id="{{item.id}}" data-last-updated="{{item.lastUpdated}}" data-photo="{{item.photo}}" ng-repeat="item in storiesss"> <a class="item-link" href="{{item.link}}"> <span class="item-preview"> <img src="{{item.photo}}" /> </span> <span class="info" itemProp="author" itemScope="" itemType="http://schema.org/Person"> <strong class="name" itemProp="name">{{item.name}}</strong> <span class="time">{{item.lastUpdated}}</span> </span> </a> <ul class="items"> <!-- story item --> <li data-id="{{sub.id}}" data-time="{{sub.time}}" class="" ng-repeat="sub in item.items"> <a href="{{sub.src}}" data-type="{{sub.type}}" data-length="{{sub.length}}" data-link="{{sub.link}}" data-linkText="{{sub.linkText}}" data-custom-key="{{sub.customkey}}" data-another-custom-key="{{sub.anothercustomkey}}"> <img src="{{sub.preview}}" /> </a> </li> <!--/ story item --> </ul> </div> <!--/ story --></div>$scope.options = { skin: 'snapgram', // container class avatars: true, // shows user photo instead of last story item preview list: false, // displays a timeline instead of carousel openEffect: true, // enables effect when opening story cubeEffect: false, // enables the 3d cube effect when sliding story autoFullScreen: false, // enables fullscreen on mobile browsers backButton: true, // adds a back button to close the story viewer backNative: false, // uses window history to enable back button on browsers/android previousTap: true, // use 1/3 of the screen to navigate to previous item when tap the story localStorage: true, // set true to save "seen" position. Element must have a id to save properly. reactive: true, // set true if you use frameworks like React to control the timeline (see react.sample.html) rtl: false, // enable/disable RTL callbacks: { onOpen (storyId, callback) { callback(); // on open story viewer }, onView (storyId) { // on view story }, onEnd (storyId, callback) { callback(); // on end story }, onClose (storyId, callback) { callback(); // on close story viewer }, onNavigateItem (storyId, nextStoryId, callback) { callback(); // on navigate item of story }, onDataUpdate (currentState, callback) { callback(); // use to update state on your reactive framework } }, template: { // use these functions to render custom templates // see src/zuck.js for more details timelineItem (itemData) { return ``; }, timelineStoryItem (itemData) { return ``; }, viewerItem (storyData, currentStoryItem) { return ``; }, viewerItemPointer (index, currentIndex, item) { return ``; }, viewerItemBody (index, currentIndex, item) { return ``; } }, language: { // if you need to translate :) unmute: 'Touch to unmute', keyboardTip: 'Press space to see next', visitLink: 'Visit link', time: { ago:'ago', hour:'hour', hours:'hours', minute:'minute', minutes:'minutes', fromnow: 'from now', seconds:'seconds', yesterday: 'yesterday', tomorrow: 'tomorrow', days:'days' } }};$scope.initStories = function (options) { let stories = new Zuck('stories',options);}Buda json kullanım örneğim; https://prnt.sc/uj1wr5Arkadaşlar işim acil. İlk yapana 100 TL atabilirim.
