{"id":2903,"date":"2014-03-10T12:21:01","date_gmt":"2014-03-10T12:21:01","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/10\/problem-about-photoswipe-collection-of-common-programming-errors\/"},"modified":"2014-03-10T12:21:01","modified_gmt":"2014-03-10T12:21:01","slug":"problem-about-photoswipe-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/10\/problem-about-photoswipe-collection-of-common-programming-errors\/","title":{"rendered":"problem about photoswipe-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/5a45e4eedb370f858b855d302d862583?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nDizzy Bryan High<br \/>\njquery json photoswipe<br \/>\nHi there am hoping someone can point me in the right direction.I have a listing on my page with buttons that have some json data attached to them using a data-images tag:data-images=&#8221;[{&#8220;id&#8221;:&#8221;1067&#8243;,&#8221;ithumb&#8221;:&#8221;\\\/uploads\\\/images\\\/ithumbs\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;thumb&#8221;:&#8221;\\\/uploads\\\/images\\\/thumbs\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;mini&#8221;:&#8221;\\\/uploads\\\/images\\\/minidisplay\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;full&#8221;:&#8221;\\\/uploads\\\/images\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;iPortrait&#8221;:&#8221;\\\/uploads\\\/images\\\/iPortr<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/48a7eb616b5d185305fb9aed9a653dce?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nBrian<br \/>\njquery-plugins jquery-mobile phonegap-plugins photoswipe<br \/>\nI&#8217;m trying to do some image manipulation stuff depending on arbitrary data i&#8217;ve assocaied with my gallery.gallery.html(&#8221;);$.each(data.photos, function(key, photo) {var item = &#8220;&lt;li&gt;&lt;a href=&#8217;http:\/\/stage.domain.com\/assets\/img\/user\/&#8221;+photo.full+&#8221;&#8216;&gt;&lt;img src=&#8217;http:\/\/stage.domain.com\/assets\/img\/user\/&#8221;+photo.med+&#8221;&#8216;\/&gt;&lt;\/a&gt;&lt;\/li&gt;&#8221;;gallery.append(item);});gallery.trigger(&#8216;create&#8217;);var options = {enableMouseWheel: false , enableKeyboard: false ,captionAndToolbarAutoHideDelay:0,<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/SCXLS.jpg?s=32&amp;g=1\" \/><br \/>\nSilentKiller<br \/>\njavascript jquery html cordova photoswipe<br \/>\nI need to add images that should be swiped right and left, instead getting this error in logcat 10-28 11:48:25.734: E\/Web Console(5348): Uncaught TypeError: Cannot read property &#8216;PhotoSwipe&#8217; of undefined at file:\/\/\/android_asset\/www\/04-jquery-mobile.html:59where the 59th line is this }(window, window.jQuery, window.Code.PhotoSwipe)); which comes under the below code. i have included swiper file and referenced correctly, still not able to get, please help me. (function(window, $, PhotoSwipe){$(do<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/bc611fbd024d381125a52197f5520648?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\ntesting<br \/>\njquery photoswipe<br \/>\nI want to use photoswipe for the mobile user. My HTML markup looks like this&lt;a class=&#8221;photoswipe&#8221; href=&#8221;__18_.jpg&#8221;&gt;&lt;img class=&#8221;nivo-main-image&#8221; src=&#8221;__18_.jpg&#8221; style=&#8221;display: inline; height: auto;&#8221; data-fancybox-href=&#8221;__18_.jpg&#8221;&gt; &lt;\/a&gt;The link is dynamically wrapped around the image. Photoswipe works fine on the first image but if I update the href on a.photoswipe than photoswipe again shows the first image. So it seems that photoswipe takes the images on initalization and not<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/68ac0d178a3178e10ca2c0ffb4015b37?s=32&amp;d=identicon&amp;r=PG&amp;f=1\" \/><br \/>\nChaverri<br \/>\nwordpress-plugin photoswipe<br \/>\nI have installed WP Photoswipe and just recently installed WP Google Maps.When I disable the Photoswipe plugin then the map shows, when enabled it back I get the following error on the Console:Uncaught TypeError: Cannot call method &#8216;setCenter&#8217; of null (anonymous function) on line 600I also get this error from Photoswipe: Uncaught Code.PhotoSwipe.createInstance: No images to passed.This is the code from WP Google Maps:&lt;script type=&#8221;text\/javascript&#8221;&gt;if (typeof google === &#8216;object&#8217; &amp;&amp;<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/3b64589796806cc8f4356f2af35050c3?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nmichael643<br \/>\njavascript jquery jquery-mobile photoswipe<br \/>\nI have a problem with appending pictures in the list pictures that uses photoswipe. The jquery mobile page uses the class gallery-page that will open it in a nice viewer. I try to add more pictures with the append function to the pictures list. This works fine only the problem is when I click on the image it will NOT open it in the nice viewer. I think this is something to do with the class gallery-page. In some way the added pictures by jquery can&#8217;t find the class gallery-page. What can I do?<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/b1d5d1c930ebc2137bf70a0c1a285ac3?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\ncarlos<br \/>\njavascript jquery ios jquery-mobile photoswipe<br \/>\nI&#8217;m currently working on a mobile site for a client that utilizes jQuery Mobile (http:\/\/jquerymobile.com\/) along with Photoswipe (http:\/\/www.photoswipe.com\/) for the photo gallery.The current issue I&#8217;m trying to resolve as of now is this:Go to the Photo Gallery page Click the &#8220;Back&#8221; button or the Logo to return to the Home page Try clicking on any of the first 3 nav buttons (these link to internal &#8216;pages&#8217; (divs) within the mobile site), and nothing happens. You can see the URL get updated in the<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/435c55f74d24b5489a4fae7597c5af7a?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nuser1916076<br \/>\njquery jquery-mobile photoswipe<br \/>\nI&#8217;ve got a strange behavior when navigating between two photoswipe galleries and using the back button of jquery mobile:The photoswipe &#8220;overview&#8221; page with all the images as thumbnails is linked from two pages, the first page (PageA) is a list of photoswipe galleries sorted by context, the second page (PageB) is a list of the same content, but sorted alphabetically. When I only enter one photoswipe gallery page and press the back button, everything works fine. But when I navigate between the pag<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/fad0186a9ecde6e33958c65c761331d4?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nPaparappa<br \/>\njquery jquery-mobile photoswipe<br \/>\nI&#8217;m creating a website using jquery mobile and almost everything works great. But i have slight problem and it has something to do with Photoswipe (http:\/\/www.photoswipe.com\/).This is what happens:I have several different casepages divided up in categories. When i enter a casesite i can click up the gallery, the images show up and works great. However if I go from this casepage, directly to another casepage and try to open that gallery. Nothing happens. But if i dont go directly to another casep<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/a8a2d7acbe1f07a03c4109cfe59df646?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nToni Michel Caubet<br \/>\njavascript jquery jquery-mobile photoswipe<br \/>\nI am using photoswipe to show my gallery when clicking on a item.My markup:&lt;ul id=&#8221;gallery_mobile_about&#8221;&gt;&lt;li&gt;&lt;a href=&#8221;\/files\/uploads\/Detalle-Magrana.jpg&#8221; style=&#8221;background-image: url(&#8216;\/files\/uploads\/Detalle-Magrana.jpg&#8217;);&#8221; data-iframe=&#8221;&#8221; data-pos=&#8221;0&#8243; data-url=&#8221;\/files\/uploads\/Detalle-Magrana.jpg&#8221; class=&#8221;gallery-item ui-link&#8221;&gt;&lt;\/a&gt;&lt;\/li&gt;&lt;li&gt;&lt;a href=&#8221;\/files\/uploads\/Figues-de-Moro.jpg&#8221; style=&#8221;background-image: url(&#8216;\/files\/uploads\/Figues-de-Moro.jpg&#8217;);&#8221; data-ifram<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/d1a6b5d8a574ee52674f93db93584743?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nV Rodg<br \/>\njquery-mobile hashtag photoswipe jqm<br \/>\nTesting on the desktop with JQM doesn&#8217;t produce this issue, so it&#8217;s difficult to pinpoint.Backstory: I have created server side code (php) to accept a query string and open a gallery straight to a picture. But if a user wants to share a link while surfing a gallery on a mobile device, and in particular a certain photo; most Mobile Browsers share the core link and not the actual photo. It&#8217;s easy in the events when swiping to create a URL hashtag modifier for the URL with the photo id ( For exampl<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/63d880b1c3b5e55b1ab210372d5013e1?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nSeeker<br \/>\njquery-mobile photoswipe<br \/>\nI am using Photoswipe gallery with jQuery Mobile. The first selection, when clicked\/tapped shows just the image with full URL and does not work the gallery way. When I go back and select again, it works fine.Can any one please tell me how can I sort this out?Cheers!<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/35727d8732b87bc6ffa05cfa575a9fad?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nTonymx<br \/>\najax django jquery-mobile photoswipe<br \/>\nI am trying to implement photoswipe inside my jquerymobile application. I am using jquerymobile &amp; 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&#8217;t work as I expected because the content of the page is loaded via ajax ( I have to do<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/95ed1616651dbd1d016428a11adcdfcc?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nnate8684<br \/>\njquery jquery-mobile photoswipe<br \/>\nAny ideas on why this isn&#8217;t detaching my &#8220;homeSlider&#8221; instance of photoswipe on page change? I think I&#8217;m following the Photoswipe docs, but it doesn&#8217;t seem to detach the instance. I&#8217;m using Jquery mobile hence the &#8220;pageshow&#8221;\/&#8221;pagehide&#8221;. It&#8217;s throwing this error when I come back to the page and the slideshow freezes: &#8220;Code.PhotoSwipe.activateInstance: Unable to active instance as another instance is already active for this target&#8221;(function(window, Util, PhotoSwipe){$(document).ready(function(){$(<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/63f437f3ec1718b900b8fb6d56c29a0a?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nAlejandro Hinestrosa<br \/>\njavascript jquery-mobile expressionengine photoswipe<br \/>\nhi everyone im been following the examples of photoswipe for my own website, but i cant fix something with photoswipe, the gallery its working fine, but when i select one picture of the gallery nothing happens, the slideshow doesnt show, it just redirect to the picture; this is part of my code:&lt;!&#8211; CSS Declaration &#8211;&gt;&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221; href=&#8221;{site_url}jquerymobile\/css\/jquery.mobile-1.3.1.css&#8221; \/&gt;&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221; href=&#8221;{site_url}jquerymobile<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/437e0ef25ef9301efb1a1e25aef30be3?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nSperansky Danil<br \/>\njquery ajax jquery-ajax jquery-mobile photoswipe<br \/>\nImages are drawn via $.ajaxPhotoswipe instance is then created inside $.ajaxTried detaching the Photoswipe instances when user click on browser&#8217;s back button but was not able to detach it.Does anyone know any possible solutions to overcome this?<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/ad48569dbf2f0b3b0d72326f45bad433?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nDespicable ME<br \/>\njquery jquery-mobile jsonp photoswipe<br \/>\n$(document).on(&#8220;pagecreate&#8221;, function() {$.jsonp({url: &#8216;URL_TO_GET_JSONP&#8217;,callbackParameter: &#8216;get_photo&#8217;,success: function(json, status) {var photo = [];var path = &#8216;URL_TO_GET_JSONP&#8217;;$.each(json, function(a,b){photo.push(&#8221;);photo.push(&#8221;);photo.push(&#8221;);});$(&#8216;.gallery&#8217;).html(photo.join(&#8221;));var myPhotoSwipe = $(&#8220;.gallery a&#8221;).photoSwipe({ enableMouseWheel: false,})},error: function(){alert(&#8220;Unable to load photos.&#8221;);}});});I am having issues with the gallery and the browser back buttons. Users a<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/29316b99cb8e17101a3d24f4e644cd27?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nHarikrishnan<br \/>\nios jquery-mobile mobile photoswipe<br \/>\nI am using Photoswipe gallery with jQuery Mobile. The first selection, when clicked shows just the image with full URL and does not work the gallery way. When I go back and select again, it works fine.The ps is working after a first failure\/refresh of page.Please check the link below.it&#8217;s my mobile website. http:\/\/w3qatar.info\/aldarmobiWhen we check the link Properties&gt; any property from the list &gt; View more photos &#8230; under this you can find the thumbnails. When we click the thumbnail first it<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/4f97a0e853759e2a73616549d78d2de5?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nBunkered<br \/>\nangularjs angularjs-directive photoswipe<br \/>\nI know this has been asked a thousand time, but I think I&#8217;ve tried every solution I&#8217;ve read and I can&#8217;t seem to get it to work.I have an API from which I&#8217;m getting my images, after pulling the images into the view I want them to use photoswipe for displaying on mobile.I have a directive:&#8217;use strict&#8217;;App.directive(&#8216;photoswipe&#8217;, function () { return {replace: false,restrict: &#8216;A&#8217;,link: function photoSwipeLink(scope, element, attr) {scope.$watch(attr.photoswipe, function(value){angular.element(&#8216;#gal<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/125500ae3fb458bc947f457bc7a5d44e?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nShae<br \/>\njquery-mobile photoswipe<br \/>\nI am having an issue understanding why my jquery mobile photoswipe gallery will only work after I have clicked the first photo in the gallery. I took off rel=&#8221;external&#8221; on the first image link which will display an undefined error. Now when you go back, the photoswipe gallery will work now. See the link belowhttp:\/\/webdiner.com\/mobile\/gallery\/<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/f7b8cc716f1ea20ce8688d36d0ef34ac?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nVishnu Ram<br \/>\njavascript jquery photoswipe<br \/>\nI am using Photo Swipe ( http:\/\/www.photoswipe.com\/ ) in my jQuery Mobile page. I want to show a thumbnail view of the images on load. On click of the thumbnail, takes the user to the swipe enabled gallery which occupies 30% of the screen height. I want to show some other content to the bottom of that. I am using PhotoSwipe version 3.0.5 and tried specifying the TARGET. But is not responding. Below are the js files, code used&lt;head&gt;&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;photoswipe\/klass.min<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/881f0ac966e2f7c2120fe0fbe3ffa884?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nNajeeb K<br \/>\nphonegap jquery-mobile photoswipe<br \/>\ni have a similar problem like thishttp:\/\/forum.jquery.com\/topic\/jqm-1-0a3-dialog-url-state-appears-in-historyi am using photoswipe + jquerymobile + phonegap, the issue is when the gallery loads and i click on any image which takes me to carousel mode now from here if i goto another page and click back button this occures at the end of the url in the browser address bar&amp;ui-state=dialogbut it does not goes back to the carousel mode.so when i click again back button it takes me to the gallery p<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/265f8fef23f99b7192248b37c2c584ac?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nJustin Ohms<br \/>\njavascript photoswipe<br \/>\nIs there a way to add images dynamically to a photoswipe gallery after it is created.The situation is this.I&#8217;m fetching image urls from the sever and showing them in a gallery. As the items are downloaded the anchor and img elements are added to the page. I would like to be able to at that same time append each to the photoswipe gallery.currently in the element callback (after the image has been loaded and elements appended) I have$elements.photoSwipe({ enableMouseWheel: false , enableKeyboard<\/li>\n<\/ul>\n<p>Web site is in building<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dizzy Bryan High jquery json photoswipe Hi there am hoping someone can point me in the right direction.I have a listing on my page with buttons that have some json data attached to them using a data-images tag:data-images=&#8221;[{&#8220;id&#8221;:&#8221;1067&#8243;,&#8221;ithumb&#8221;:&#8221;\\\/uploads\\\/images\\\/ithumbs\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;thumb&#8221;:&#8221;\\\/uploads\\\/images\\\/thumbs\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;mini&#8221;:&#8221;\\\/uploads\\\/images\\\/minidisplay\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;full&#8221;:&#8221;\\\/uploads\\\/images\\\/Watermans Theatre 25 &#8211; 14.jpg&#8221;,&#8221;iPortrait&#8221;:&#8221;\\\/uploads\\\/images\\\/iPortr Brian [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2903","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2903"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2903\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}