Photo Balayez avec la cible ne fonctionne pas sur jQuery Mobile

J'utilise Photo Swipe (http://www.photoswipe.com/) dans ma page jQuery Mobile. Je souhaite afficher une vignette des images en cours de chargement. Au clic de la vignette, l'utilisateur accède à la galerie permutée qui occupe 30% de la hauteur de l'écran. Je veux montrer un autre contenu à la fin de cela. J'utilise PhotoSwipe version 3.0.5 et j'ai essayé de spécifier le TARGET. Mais ne répond pas. Voici les fichiers js, le code utiliséPhoto Balayez avec la cible ne fonctionne pas sur jQuery Mobile

<head> 

<script type="text/javascript" src="photoswipe/klass.min.js"></script> 
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"><script> 
<script>   
$(document).ready(function(){ 
    var myPhotoSwipe = $("#Gallery a").photoSwipe({ 
    enableMouseWheel: false , 
    enableKeyboard: false 
    }); 
}); 
</script> 

</head> 
<body> 
    <div data-role = "page" data-add-back-btn = "true" id = "mainGallery"> 
     <div data-role = "header" data-theme = "a"> 
      <h1>Gallery</h1>    
     </div> 
     <div data-role = "content" data-theme = "c"> 
      <p>Hi... I am the Photo Gallery</p> 
      <div class = "gallery-wrap"> 
       <ul class = "gallery" id="Gallery" data-role = "listview" data-inset = "true"> 
        <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> 
       </ul> 
      </div> 
     </div> 
     <div data-role="footer" data-theme = "c" data-position="fixed"> 
      <h4>&copy; 2013</h4> 
     </div> 
    </div>  
</body>

Je suis très nouveau à jQuery Mobile.Quelqu'un peut-il me aider avec ce

Merci

Source

2013-07-04 Vishnu Ram

Utiliser cet

(function(window, $, PhotoSwipe){ 
     $(document).ready(function(){ 

      $('div.gallery-page') 
       .live('pageshow', function(e){ 

        var 
         currentPage = $(e.target), 
         options = {}, 
         photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id')); 

        return true; 

       }) 

       .live('pagehide', function(e){ 

        var 
         currentPage = $(e.target), 
         photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id')); 

        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) { 
         PhotoSwipe.detatch(photoSwipeInstance); 
        } 

        return true; 

       }); 

     }); 

    }(window, window.jQuery, window.Code.PhotoSwipe));

Source

2013-07-04 07:01:32

Merci pour la réponse. J'ai modifié mon code actuel utilisé. Pouvez-vous m'aider à modifier cela? J'ai essayé avec votre code et n'ai pas réussi –

Espérons que cela aide à utiliser le script ci-dessous la galerie div

<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

<div data-role = "header" data-theme = "a">

<h1>Gallery</h1>

</div>

<div data-role = "content" data-theme = "c">

<p>Hi... I am the Photo Gallery</p>

<div class = "gallery-wrap">

<ul class="gallery"data-role = "listview" data-inset = "true">

<li><a href="full/001.jpg" rel="external"><img src="full/001.jpg" alt="Image 010" /></a></li>

<li><a href="full/001.jpg" rel="external"><img src="/full/001.jpg" alt="Image 010" /></a></li>

</ul>

</div>

<div data-role="footer" data-theme = "c" data-position="fixed">

</div>

<script>

$('div.gallery-page') .live('pageshow', function(e){

var currentPage = $(e.target),

options = {},

photoSwipeInstance = $("ul.gallery a",

e.target).photoSwipe(options,currentPage.attr('id'));

return true;

})

</script>

</div>

Source

2013-07-04 10:48:36

$('div.gallery-page').on('pagehide', function(e){ 
         PhotoSwipe.unsetActivateInstance(instance); 
         PhotoSwipe.detatch(instance); 
         return true; 

        })

;

Source

2013-10-30 16:27:55 kamal

Photo Balayez avec la cible ne fonctionne pas sur jQuery Mobile

Répondre

Questions connexes