Photoswipe open photo directly full screen

Question

I would like to open the Photoswipe gallery with jQuery Mobile directly in full screen instead the default <ul> <li> list. I saw the example page on the
package downloaded from the plugin site (08-exclusive-mode.html) but I can't get it to work on my site.

I tryed this javascript code:

$(document).on('pageshow','#photo', function() {
  (function(window, PhotoSwipe) {
    document.addEventListener('DOMContentLoaded', function() {
    var options = {
     preventHide: true },
     instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
     instance.show(0);
   }, false);
  } (window, window.Code.PhotoSwipe));
});

this is html page:

<div data-role="page" id="photo">
    <div data-role="header">
        <h1>Second</h1>
    </div><!-- /header -->
    <div data-role="content">
       <ul id="Gallery" class="gallery">
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 001" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 002" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 003" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 004" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 005" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 006" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 007" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 008" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 009" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 010" /></a></li>
       </ul>
     </div><!-- /content -->
     <div data-role="footer">
       <h4>Page Footer</h4>
    </div><!-- /footer -->
</div>

Can you help me?

score 4 · Accepted Answer · answered Jul 02 '13 at 15:14

4

Working example: http://jsfiddle.net/Gajotres/PFqVs/

Javascript:

This is more then enough to run Photoswipe with jQuery Mobile 1.3.1.

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

answered Jul 02 '13 at 15:14

Gajotres

57,309
16
102
130

I tried that example in Google Chrome and Firefox and it works fine. But when I try that very example in my device, it just doesn't work, and it seems like it's a css issue! Any ideas? – Agustín Nov 21 '13 at 12:25
@gajotres can u give your view on this question http://stackoverflow.com/questions/21629963/dynamically-loading-content-for-photoswipe – Priya Feb 16 '14 at 10:48

score 0 · Answer 2 · answered Mar 13 '14 at 12:07

if you dont know the item's key, you can loop "instance.originalImages" and search a keyword in image's path.

for(var i=0; i<instance.originalImages.length; i++){
  if(instance.originalImages[i].pathname.search(keyword)!= -1){
     instance.show(i);  
  }
}

Photoswipe open photo directly full screen

2 Answers2