2015-01-11 20 views
5

Ben sadece photoswipe ile dalga geçiyorum, ve bugüne kadar sadece bir şey ile başlayan başlangıç ​​demo bir kopyasını uygulamaktan daha gelişmiş bir şey yapmadım çok küçük (ve teorik olarak önemsiz olmayan tweaks).Photoswipe undefined özelliği 'center' okuyamaz photoswipe.js 1070 of

Resim galerim düzgün görünüyor ve sadece test etmeye çalıştığım için toplamda 4 ürün var. İlk resim yakınlaştırma ve kaydırma ve tüm bunlar sadece harika olacak. Ancak, resimleri değiştirdiğim an, bu başlıktaki javascript hatasını alıyorum.

benim öğeleri olarak aşağıdaki kullanıyorum

: şekilde kullanmak için gerekli denemek için bir kaç özel öznitelikleri eklemiş

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"}]; 

ama photoswipe ile henüz hiçbir şey yapmadık, bu yüzden yapmayacağım sorun olduğunu düşün. Benim seçenekleri olarak aşağıdaki kullanıyorum

:

 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 

     }; 

Öyleyse sadece aşağıdakileri yapın:

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

Ben pswpElement var ve sadece photoswipe gelen bunun için işaretlemeyi coppied site, bu yüzden aynı zamanda olmalıdır. Bunu yapmak için ne yapmam gerektiğini gerçekten bilmek isterim, böylece yeni bir resme geçtiğimde çalışır.

Ayrıca, u207'yi (kodlanmış ') başlıklardan kaldırırsam, yalnızca sorunların üstesinden gelmek için sorunu çözmediğini de doğrularım.

+0

Lütfen sorunu yeniden üreten [azaltılmış bir test durumu] (http://css-tricks.com/reduced-test-cases/) (yalıtılmış örnek) belirtin. PhotoSwipe belgelerinde CodePens'i temel alarak oluşturabilirsiniz: [ham galeri] (http://codepen.io/dimsemenov/pen/gbadPv), [küçük resim galerisi] (http://codepen.io/dimsemenov/pen/ZYbPJM), [slaytlarda özel HTML içeriği] (http://codepen.io/dimsemenov/pen/MYexrm). CodePen ile rahat değilseniz, 'Share -> Export .zip' aracılığıyla kodu dışa aktarabilir ve test vakasını sunucunuza yükleyebilirsiniz. –

+0

İşte gerçek senaryonumun neredeyse aynısı olan bir kod kalemi. Bu problemi alıyorum. http://codepen.io/anon/pen/dPvOzy Bu değerlerle biraz deneme yaptığım bazı kodları kopyaladığım sırada gösterimde kazık değerlerim var ve bu çataldaki süreleri saklıyorum. – Danny

+0

Peki, sorunu nasıl yeniden üreteceksiniz? Animasyon süresi 0 olarak ayarlanmış olsa bile, bağlantı kurduğunuz kod dosyasında herhangi bir hata görmüyorum. –

cevap

7

index seçenek değerinin bir Tamsayı değil, bir Dize olduğundan emin olun. parseInt(... , 10)

+0

Parlak! Bu yaptı. Teşekkürler! – Danny

+0

Bende! Teşekkürler Dmitry .. ve bu muhteşem kaymaktaki tüm çalışmalarınız için teşekkürler! –

İlgili konular