Search code examples
jqueryajaxjsonlocal-storagephotoswipe

PhotoSwipe: populate / switch image gallery from localStorage?

I have been hacking at this problem for two days and just can't get it to work. You can find all files referenced here in this ZIP file: http://mtiaz.com/help/help.zip

In the "./js/custom.photos.js" file, I call Ajax to retrieve JSON data from a wordpress site. In the success function I do several things:

  1. Loop through all data received and store all attachments per post returned in the JSON object in localStorage through the variable "attachments_gallery" (between 14 - 17 attachments per post).

  2. Append one image per post (which represents each photoSwipe gallery)

  3. A #overlay div element, which holds dynamically generated galleries, is hidden by default. When a user clicks one of the gallery thumbnails, it should display on top of everything, and include a the gallery images in an unordered list. This list is derived from previous localStorage transactions.

Now, the problem starts with getting this following error in the console.log:

Uncaught TypeError: Cannot read property 'Util' of undefined code.photoswipe.noutil.jquery-3.0.5.js:26

Whether I use the minified or the original script, I receive this error. Despite this, the initial thumbnails load into view through AJAX. However, when I click on any of them, I get this following error:

Uncaught TypeError: Object [object Object] has no method 'photoSwipe' custom.photos.js:157

I just can't get past these two problems. Can someone help me out? Thanks!

JS FIDDLE UPDATE

http://jsfiddle.net/Z6V4p/8/

photoSwipe
Solution

  • Please try the below fiddle.. I have changed that as per your requirement.. use ajax call to get images and display using photoswipe.

    Style it accordingly as you needed. For simplicity, I have not applied any styles.

    http://jsfiddle.net/Purus/vBvLK/3/

    The simple below code will do magic.

    var $s = $("#gridView a").photoSwipe();