Question

我正在使用javascript在我的应用中实现滑动功能，在演示中跟随此链接http://www.photoswipe.com/latest/examples/01-default.html，代码完美无缺，但在将其添加到我的项目后，图像的滑动无法正常工作。请帮帮我..

<!DOCTYPE html>
<html>
 <head>
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove -   http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />

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

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


<script type="text/javascript">

    (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 id="Header">
<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />   </a>
  </div>

   <div id="MainContent">

<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>

<ul id="Gallery" class="gallery">

    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg"   alt="Image 001" /></a></li>
    <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
    <li><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
    <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
    <li><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
    <li><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
    <li><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
    <li><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
    <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
    <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
    <li><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
    <li><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
    <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>           
</ul>

  </div>    

   </body>
   </html>

Answer 1

以下应该这样做。我在多个项目中使用它。

<script type="text/javascript">
    // other functions

    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady() {
       // related functions

       $("#Gallery a").photoSwipe();
    }

</script>

在javascript中使用图像滑动的问题

1 个答案: