EzDevInfo.com

New page is open with full image when I click on particular image using PhotoSwipe Jquery

I am sucess to display images from sdcard in grid view using PhotoSwipe. Now I want to click on any image from the grid view and that image is shown in next page with full display. But I have problem that I have no fix image so that I cant use direct image name in "href" and "src" tag, it is dynamic. So how I do this using PhotoSwipe, its urgent. In previous post I find out the solution as Click here to view image, but I have no particular image, my image is dynamic came from sdcard.

Thanks in advance....

Prevent photoswipe from ever hiding the toolbar

I'm using PhotoSwipe 3.0.4 with jQueryMobile 1.1-rc1.

I'm trying to prevent PhotoSwipe from hiding it's toolbar.

I tried setting the captionAndToolbarAutoHideDelay paramater to 0 hoping this would prevent the toolbar from hiding but this just seems to prevent it from hiding automatically.

I also set the captionAndToolbarHide to false hoping this would prevent it from hiding but this didn't help.

I would like to prevent the toolbar from hiding when then user taps and swipes images, as on some handsets it is a little difficult to get the toolbar to show again.

Has anyone had any luck with this?

Photoswipe open photo directly full screen

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 rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 001" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 002" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 003" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 004" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 005" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 006" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 007" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 008" /></a></li>
         <li><a rel='nofollow' href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 009" /></a></li>
         <li><a rel='nofollow' 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?

Photoswipe Cannot read property 'center' of undefined at line 1070 of photoswipe.js

I am just dabbling with photoswipe, and so far I haven't done anything more advanced than simply implementing a copy of the get started demo with a few very small (and theoretically insignificant tweaks).

My picture gallery comes up just fine, and I have a total of 4 items in it as I am just trying to test it. The first picture will zoom and pan and all of that just great. However, the moment I switch pictures, I get the javascript error in this post title.

I am using the following as my items:

var items =[{"src":"/Images/Portfolio/Pieces/PhoenixFury.jpg","thumbnail":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","msrc":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","w":765,"h":1201,"title":"Phoenix\u0027s Fury","caption":"Illustration used for the cover of Lifeweaver","key":"Phoenix"},{"src":"/Images/Portfolio/Pieces/EnoreTower.jpg","thumbnail":"/Images/Portfolio/Thumbs/EnoreTower.jpg","msrc":"/Images/Portfolio/Thumbs/EnoreTower.jpg","w":765,"h":1200,"title":"Enore\u0027s Tower","caption":"Illustration used for the cover of Guardian\u0027s Peril","key":"Enore"},{"src":"/Images/Portfolio/Pieces/KenpoLogo.jpg","thumbnail":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","msrc":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","w":800,"h":966,"title":"Kenpo Karate Logo","caption":"Commissioned karate team logo for a team in Mexico with central american themes on the traditional Kenpo notion of a dragon and a tiger.","key":"Kenpo"},{"src":"/Images/Portfolio/Pieces/Quetzalcoatl.jpg","thumbnail":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","msrc":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","w":1600,"h":967,"title":"Quetzalcoatl","caption":"Central American ancient deity Quetzalcoatl, the feathered serpent.","key":"Quetzalcoatl"}];

I have added a few custom attributes, but I haven't done anything yet with the photoswipe to try to utilize those, so I don't imagine that is the problem.

I am using the following as my options:

        var options = {

            history: false,
            focus: false,
            index: 0,//I can verify that 0,1,2,3 all load up correctly for an initial load
            showAnimationDuration: 0,
            hideAnimationDuration: 0

        };

So then I just do the following:

   var photoswipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        photoswipe.init();

I have the pswpElement, and simply coppied the markup for that from the photoswipe site, so it should also be in line. I would really like to know what I need to do to make it so that it works when I swap to a new image.

I also verified that if I remove the u207 (encoded ') from the titles, it doesn't fix the problem just to try to be thorough about things.

Phonegap + Photoswipe with remote images

I have been struggling with Phonegap and Photoswipe. Here is what I have:

1) Currently I am requesting remote images via a php JSON call (working)

2) JSON images are returned and store locally to the Android device(working)

3) All images show up on Photswipe thumbnail gallery page (working)

problem is here 4) when I click on a thumbnail image, I'm not getting the Photoswipe gallery format, it just loads an the image to a blank page.

My guess is the photoswipe script is loading before I have completely passed all the images to the <#gallery

My question is how to re-initialize Photoswipe to read all the images or how to attached the Photoswipe function to the images that are appended to the

I'm trying to post the code I have working now, having trouble with the formatting here.

//Global instance of DirectoryEntry for our data
var DATADIR;
var knownfiles = [];    

//Loaded my file system, now let's get a directory entry for where I'll store my   crap    
function onFSSuccess(fileSystem) {
fileSystem.root.getDirectory("Android/data/com.moto.photoloader",create:true,exclusive:false},gotDir,onError);
}

//The directory entry callback
function gotDir(d){
console.log("got dir");
DATADIR = d;
var reader = DATADIR.createReader();
reader.readEntries(function(d){
    gotFiles(d);
    appReady();
},onError);
}


//Result of reading my directory
function gotFiles(entries) {
console.log("The dir has "+entries.length+" entries.");
for (var i=0; i<entries.length; i++) {
console.log(entries[i].name+' dir? '+entries[i].isDirectory);
    knownfiles.push(entries[i].name);
    renderPicture(entries[i].fullPath);
}
}

function renderPicture(path){
$("#Gallery").append("<li><a rel='nofollow' href='"http://myurltofullimages"'><img src='"+path+"' alt=\"Image 018\"/></a></li>");
console.log("<li><a rel='nofollow' href='"/myurltofullimages"'><img src='"+path+"' alt=\"Image 018\"/></a></li>");

}

function onError(e){
console.log("ERROR");
console.log(JSON.stringify(e));
}

function onDeviceReady() {
//what do we have in cache already?
$("#status").html("Checking your local cache....");    
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, null);    
}

function appReady(){
$("#status").html("Ready to check remote files...");
$.get("http://myurltojsonphp/photo_upload/json.php", {}, function(res) {
    if (res.length > 0) {
        $("#status").html("Going to sync some images...");
        for (var i = 0; i < res.length; i++) {
            if (knownfiles.indexOf(res[i]) == -1) {
                console.log("need to download " + res[i]);
                var ft = new FileTransfer();
                var dlPath = DATADIR.fullPath + "/" + res[i];
console.log("downloading crap to " + dlPath);
ft.download("http://myurl/photo_upload/am/woman/thumb/" + escape(res[i]), dlPath, function(){
renderPicture(e.fullPath);
console.log("Successful download of "+e.fullPath);
}, onError);         

            }
        }
    }
    $("#status").html("");
}, "json");

}

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

}
</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>   

How to integrate photoswipe inside jquerymobile pages?

I am trying to implement photoswipe inside my jquerymobile application. I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages. Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.

On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts) I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages. So I need to know how to setup the code for photoswipe before page load.

The code below is from the itemPage level( I put the code from the photoswipe demo inside)

<!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 rel='nofollow' href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
    <link rel='nofollow' href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
    <link rel='nofollow' href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>


</head>
<body>

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

    <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>



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


    <div data-role="content" >  

        <p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>        

        <ul data-role="listview" data-inset="true">
            <li><a rel='nofollow' href="#Gallery1">First Gallery</a></li> 

        </ul> 

        <p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>

        <ul data-role="listview" data-inset="true">
            <li><a rel='nofollow' href="01-default.html" target="_blank">Code Computerlove</a></li> 
        </ul> 

    </div>

    <div data-role="footer">
        <h4>&copy; 2011 Code Computerlove</h4>
    </div>

</div>


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

    <div data-role="header">
        <h1>First Gallery</h1>
    </div>

    <div data-role="content">   

        <ul class="gallery">

            <li><a rel='nofollow' href="{{ STATIC_URL }}images/chichen1.jpg" rel="external"><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/002.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/003.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/004.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/005.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/006.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/007.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/008.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></a></li>
            <li><a rel='nofollow' href="{{ STATIC_URL }}images/009.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></a></li>

        </ul>

    </div>

    <div data-role="footer">
        <h4>&copy; 2011 Code Computerlove</h4>
    </div>

</div>

</div>

</body>
</html>

I put the script to handle the gallery inside <div data-role="page" id="Home"> since If I put the code in the head is never executed for the ajax call. However when I executed the code above, the page doesn't show the last level(itempage never appears) I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">

$( document ).delegate("#Home", "pagebeforecreate", function() {
             alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
          });

but how I can call the photoswipe script, If I replaced the code from alert function with

(function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {},
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

            }, false);


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

it doesn't work? the page doesn't load Hope you can help me!

Thanks

photoswipe get images from flickr or other feed?

I am working with photoswipe and seen the examples available but there's nothing dynamic there.

Has anyone managed to get photoswipe grabbing images from Flickr or other feed or know of any examples anywhere?

Here's the examples url:

[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]

PhoneGap/Cordova Error: Miss a drag as we are waiting for WebCore's response for touch down

I'm making an app for IOS, Android and WP. I'm using PhoneGap 2.7.0, testing for Android. I get the following error in emulator Android 2.2:

Miss a drag as we are waiting for WebCore's response for touch down

When I swipe photos, I'm using PhotoSwipe.

No problems over there, app is working.

But in emulator Android 3.1, 4.0 or 4.0.3 I get the same error, together with:

Stale touch event ACTION_DOWN received from webcore; ignoring

The swiping doesn't work normal, and my photos sometimes disappear. When I do a few swipes the PhotoSwipe Gallery stops working at all.

I've searched this issue on Google and found a lot of people struggling with this. All solutions provided in these discussions don't do the trick for me. I've updated all the libraries, cleaned my code, tried deleting the 'e.preventDefault()', added extra code, ... But all without effect, or with effect but worse issues like not starting the app...

I hope someone can help me, I'm trying for days to fix this!

swipe gesture with mouse on desktop, like Photoswipe, but animate a div

I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures. Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!

Navigate images in photoswipe manually on click of image(previous and next)

I am using photoswipe in my mobile application.

We are showing the images in a target div, we are not using the full screen view.

A requirement came in to not have the built in toolbar visible and have an arrow image on the left and right of the div to move to the previous and next images and also allow swiping. How do I call the JavaScript in photoswipe.js to do this manually on the click of an image.

Replace images in PhotoSwipe gallery

I have a PhotoSwipe gallery on my page which is created programatically like this:

var instance = window.Code.PhotoSwipe.attach(image, options)

Now I want to update the images in the gallery, or put a new gallery in the same spot.

Creating a new gallery for the same DOM Element omits the following error:

Code.PhotoSwipe.activateInstance:
Unable to active instance as another instance is already active for this target

Detaching the instance from the Element using Code.PhotoSwipe.detatch(instance) didn't help either.

Any ideas how to fill the gallery with new images, or remove it, so I can create a new one in the same place?

Going back to previous page works in simulator not on iOS device jquerymobile

I am changing the page with this method

$.mobile.changePage("Preview.html", {
        transition : "slide",
        role : "page",
        changeHash:true                            
    });

this is how my preview page looks like

    <div data-role="page"  data-name="preview" class="prew">
        <div data-role="content">
            //content
       </div>
    </div>

now when i touch the screen i have to go back to previous page.

so i created this function

$('.prew').live('tap', function() {
         alert('clicked');
         history.go(-1);//<--this works in simulator not in device.
         //window.history.back() ;//<--this also works in simulator not on device.
         //navigator.app.backHistory();<--this works fine on android not on iOS.
    });

edit: i have used a plugin called photoswipe which causes the issue . the history.go(-1),history.back() or data-rel="back" works fine on other pages.

photoswipe is preventing from getting back to previous page.

photoswipe custom toolbar with jquery mobile

I am new in jquery mobile and jquery also. I am working on a project with phonegap and jquery mobile. I am using PhotoSwipe for image gallery. It is working nice and show the images. But I want to make a custom toolbar for photoswipe for my gallery. I saw their given custom-toolbar sample and almost made it. But though I am new in this sector so I failed to integrate it with jquery mobile. And my custom button does not work at all. Here is my code sample.

for (var i = 0; i < photo_len; i++) {
    $('.GalleryAccessories').append('<li><a rel='nofollow' href="' + image_item[i].original + '" rel="external"><img src="' + image_item[i].original + '" alt=""/></a></li>');
}

$('.GalleryAccessories').trigger("create");

var myPhotoSwipe = $(".GalleryAccessories a").photoSwipe({
    getToolbar: function(){
        return '<div class="ps-toolbar-close" style="padding-top: 12px;">Back</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="ps-toolbar-close" style="padding-top: 12px;">View All</div>';
    },
    jQueryMobile: true,
    loop: false,
    enableMouseWheel: false,
    enableKeyboard: false
});

myPhotoSwipe.show(0);

View All button doesn't work at all. I have tried their given code but no luck. I even tried just what i do now but still it doesn't work. Sorry for my poor english. Please help me... Thanks in advance.

How do I get Photoswipe to recognize entire gallery from list of thumbnail images

I've set up my Photoswipe 4 thumbnails using Zurb Foundation 5 block grid format, but when a thumb is clicked on, only that one images loads in photoswipe. Is there a way to get photoswipe to recognize that the gallery of images is all of those contained within the ul grid of thumbnails?

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
<li>
    <figure itemscope itemtype="http://schema.org/ImageObject">
    <a rel='nofollow' href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" /></a>
    <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>
</li>
<li>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a rel='nofollow' href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" /></a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
</li>
</ul>

Detaching slideshow instance

Any ideas on why this isn't detaching my "homeSlider" instance of photoswipe on page change? I think I'm following the Photoswipe docs, but it doesn't seem to detach the instance. I'm using Jquery mobile hence the "pageshow"/"pagehide". It's throwing this error when I come back to the page and the slideshow freezes: "Code.PhotoSwipe.activateInstance: Unable to active instance as another instance is already active for this target"

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

        $('#home').live('pageshow', function(e){    

                var 
                currentPage = $(e.target),
                homeSlider;
                homeSlider = PhotoSwipe.attach(
                window.document.querySelectorAll('#slider a'),
                {
                    target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
                    loop: true,
                    preventHide: true,
                    autoStartSlideshow: true,
                    captionAndToolbarHide: true,
                    margin: 0,
                }
                ); // PhotoSwipe.attach         
                homeSlider.show(0);     
                return true;    

            });
            $('#home').live('pagehide', function(e){

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

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

                return true;

            }); 

        }); // $(document).ready(function(e){
    }(window, window.Code.Util, window.Code.PhotoSwipe)); // function(window, util, PhotoSwipe)