2015-01-11 7 views
5

की लाइन 1070 पर अपरिभाषित की 'केंद्र' को पढ़ नहीं सकता है, मैं सिर्फ फोटोवाइप के साथ डबिंग कर रहा हूं, और अब तक मैंने कुछ शुरू करने वाले डेमो की प्रतिलिपि को लागू करने से कहीं अधिक उन्नत नहीं किया है बहुत छोटा (और सैद्धांतिक रूप से महत्वहीन tweaks)।Photoswipe photoswipe.js

मेरे चित्रशाला ठीक ऊपर आता है, और मैं इसे में 4 आइटम की कुल राशि के रूप में मैं सिर्फ यह परीक्षण करने के लिए कोशिश कर रहा हूँ। पहली तस्वीर ज़ूम और पैन करेगा और यह सब ठीक है। हालांकि, जिस क्षण मैं चित्रों को स्विच करता हूं, मुझे इस पोस्ट शीर्षक में जावास्क्रिप्ट त्रुटि मिलती है।

मैं अपने आइटम के रूप में निम्नलिखित का उपयोग कर रहा: उन का उपयोग करने की कोशिश करने के

var items =[{"src":"/Images/Portfolio/Pieces/PhoenixFury.jpg","thumbnail":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","msrc":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","w":765,"h":1201,"title":"Phoenix\u0027s Fury","caption":"Illustration used for the cover of Lifeweaver","key":"Phoenix"},{"src":"/Images/Portfolio/Pieces/EnoreTower.jpg","thumbnail":"/Images/Portfolio/Thumbs/EnoreTower.jpg","msrc":"/Images/Portfolio/Thumbs/EnoreTower.jpg","w":765,"h":1200,"title":"Enore\u0027s Tower","caption":"Illustration used for the cover of Guardian\u0027s Peril","key":"Enore"},{"src":"/Images/Portfolio/Pieces/KenpoLogo.jpg","thumbnail":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","msrc":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","w":800,"h":966,"title":"Kenpo Karate Logo","caption":"Commissioned karate team logo for a team in Mexico with central american themes on the traditional Kenpo notion of a dragon and a tiger.","key":"Kenpo"},{"src":"/Images/Portfolio/Pieces/Quetzalcoatl.jpg","thumbnail":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","msrc":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","w":1600,"h":967,"title":"Quetzalcoatl","caption":"Central American ancient deity Quetzalcoatl, the feathered serpent.","key":"Quetzalcoatl"}]; 

मैं कुछ कस्टम विशेषताओं को शामिल किया है, लेकिन मैं कुछ भी अभी तक photoswipe साथ ऐसा नहीं किया है, इसलिए नहीं मुझे क्या करना कल्पना करो कि समस्या है।

मैं अपने विकल्प के रूप में निम्नलिखित का उपयोग कर रहा:

 var options = { 

      history: false, 
      focus: false, 
      index: 0,//I can verify that 0,1,2,3 all load up correctly for an initial load 
      showAnimationDuration: 0, 
      hideAnimationDuration: 0 

     }; 

तो फिर मैं सिर्फ निम्न कार्य करें:

var photoswipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
     photoswipe.init(); 

मैं pswpElement है, और बस photoswipe से उस के लिए मार्कअप coppied साइट, तो यह भी लाइन में होना चाहिए। मैं वास्तव में जानना चाहता हूं कि इसे बनाने के लिए मुझे क्या करना है ताकि जब मैं एक नई छवि में बदल जाऊं तो यह काम करता है।

मैंने यह भी सत्यापित किया कि यदि मैं शीर्षक से u207 (एन्कोडेड ') को हटा देता हूं, तो यह चीजों को पूरी तरह से करने की कोशिश करने के लिए समस्या को ठीक नहीं करता है।

+0

कृपया एक [कम परीक्षण केस] (http://css-tricks.com/reduced-test-cases/) (पृथक उदाहरण) प्रदान करें जो समस्या को पुन: उत्पन्न करता है। आप इसे फोटोस्वाइप दस्तावेज़ में कोडपेंस के आधार पर बना सकते हैं: [कच्ची गैलरी] (http://codepen.io/dimsemenov/pen/gbadPv), [थंबनेल के साथ गैलरी] (http://codepen.io/dimsemenov/pen/ZYbPJM), [स्लाइड में कस्टम HTML सामग्री] (http://codepen.io/dimsemenov/pen/MYexrm)। यदि आप कोडपेन के साथ सहज नहीं हैं, तो आप 'शेयर -> निर्यात। ज़िप' के माध्यम से कोड निर्यात कर सकते हैं, और अपने सर्वर पर टेस्ट केस अपलोड कर सकते हैं। –

+0

यहां एक कोड कलम है जो लगभग मेरे वास्तविक परिदृश्य के समान है। मुझे इस में समस्या हो रही है। http://codepen.io/anon/pen/dPvOzy मेरे पास शो में भद्दा मूल्य हैं और इस कांटा में अवधि छुपाएं क्योंकि मैंने कुछ कोड कॉपी किए हैं जहां मैं उन मूल्यों के साथ थोड़ा सा प्रयोग कर रहा था। – Danny

+0

तो इस मुद्दे को पुन: उत्पन्न कैसे करें? मैं, codepen कि आप लिंक के साथ किसी भी त्रुटि नहीं दिख रहा है एनीमेशन अवधि 0. –

उत्तर

7

सुनिश्चित करें कि index विकल्प मान एक इंटीजर है, स्ट्रिंग नहीं है। parseInt(... , 10)

+0

शानदार! उसने ऐसा किया धन्यवाद! – Danny

+0

मुझे भी! धन्यवाद दिमित्री .. और इस शानदार स्लाइडर पर आपके सभी काम के लिए धन्यवाद! –