2013-11-08 4 views
0

Я построил это на основе онлайн-руководств и документации Photoswipe. http://sfrunningtours.com/photoswipetest.htmlPhotoswipe - No Gallery View - No Nav Buttons

Он просматривает одинаково во всех браузерах (Safari, FF, Chrome). Но есть 2 вопроса.

Во-первых, пикс уложены и не вставляется в вид галереи как брошюры

Второй вопрос есть нет кнопок нав. В противном случае фотографии будут хорошо прорисовываться.

Мой код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 

<link href="css/photoswipe.css" type="text/css" rel="stylesheet" /> 

<script type="text/javascript" src="js/klass.min.js"></script> 
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script> 

<script> 
     (function(window, PhotoSwipe){ 
      document.addEventListener('DOMContentLoaded', function(){ 
       var 
        options = {}, 
        instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 
      }, false); 
     }(window, window.Code.PhotoSwipe)); 
</script> 

</head> 

<body> 

<div data-role="page" id="Home"> 

    <div data-role="header"> 
     <h1>PhotoSwipe Test</h1> 
    </div> 

<div data-role="content" >  
    <ul id="Gallery" style="list-style:none"> 
     <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li> 
     <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li> 
     <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li> 
     <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li> 
     <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li> 
     <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li> 
    </ul> 
</div> 

</body> 
</html> 

Я попытался с помощью версии JQuery, но не радость там. Также добавили/заменили разные css, которые я нашел как в нескольких версиях, так и в онлайн-учебниках. Ничего. Файлы JS и CSS загружались с сайта Photoswipe и были помещены на мой сервер в каталоге js и css под основной. Я подтвердил, что их называют.

Где я ошибся?

+0

Это не может решить вашу проблему, но объясняет, как работает JavaScript: http://stackoverflow.com/questions/10212087/understanding-obscure-javascript-code – usefulcat

+0

Полезный кусок. Это было на самом деле * полезно * спасибо :) В конечном итоге я отказался от Photoswipe для более легкого, чистого слайдера. Спасибо за указатели, хотя они помогают! – user2969747

ответ

0

У меня также были проблемы с отображением галереи при внесении изменений в скрипт. Попробуйте это без изменений.

Photo Swipe настроен для отображения миниатюр ваших изображений. Когда вы нажимаете на изображение, он должен открыть представление галереи. Убедитесь, что ваши div имеют правильные атрибуты класса, как в примере html, если вы используете образец CSS. Например:

<div id="Gallery"> 
    <div class="gallery-list"> 
     <div class="gallery-item"><a href="[your image file]/></div> 
     <div class="gallery-item"><a href="[your image file]/></div> 
     <div class="gallery-item"><a href="[your image file]/></div> 
    </div> 
</div> 

вместо использования списка

Смежные вопросы