Photoswipe - без просмотра галереи - без кнопок навигации

Question

Photoswipe - без просмотра галереи - без кнопок навигации

0

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

Он просматривается одинаково во всех браузерах (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 под основной. Я подтвердил, что их называют.

Где я неправ?

user2969747 08 нояб. 2013, в 18:29

Источник

0

Это может не решить вашу проблему, но объясняет, как работает JavaScript: stackoverflow.com/questions/10212087/…
usefulcat 08 нояб. 2013, в 17:02
0

Usefulcat. Это было на самом деле полезно, спасибо :) В конечном итоге я отказался от Photoswipe для более легкого и чистого слайдера. Спасибо за указатели, хотя, они помогают!
user2969747 09 нояб. 2013, в 07:53

Теги:

javascript

html

css

photoswipe

1 ответ

Ещё вопросы

Это может не решить вашу проблему, но объясняет, как работает JavaScript: stackoverflow.com/questions/10212087/…
Usefulcat. Это было на самом деле полезно, спасибо :) В конечном итоге я отказался от Photoswipe для более легкого и чистого слайдера. Спасибо за указатели, хотя, они помогают!

motorbaby · Answer 1 · 2014-07-25T21-04-00.000Z

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

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>

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