1 Reply Latest reply on Jan 28, 2013 11:35 AM by TimJaramillo

    Implementing /modifying photoswipe code to work in Edge

    RussMSN

      Hey all,

       

      I am trying to implement photoswipe (http://www.photoswipe.com/) into Edge, specifically linking it into a div, so that I can have pinch/zoom control over images within the div.  The problem I have is that I'm not JQuery savvy, so I just can't work out how to modify the code so that it works within Edge.  I've loaded the external JS files via yepnope, but I can't work out how to modify the code so that it targets a div created in edge, rather than the array it currently is trying to target?

       

      The code I found within one of the example html's is:

      (function(window, Util, PhotoSwipe){

       

                                    Util.Events.domReady(function(e){

       

                                              var instance;

       

                                              instance = PhotoSwipe.attach(

                                                        [

                                                                  { url: 'images/full/001.jpg', caption: 'Image 001'},

                                                                  { url: 'images/full/002.jpg', caption: 'Image 002'},

                                                                  { url: 'images/full/003.jpg', caption: 'Image 003'},

                                                                  { url: 'images/full/004.jpg', caption: 'Image 004'},

                                                                  { url: 'images/full/005.jpg', caption: 'Image 005'},

                                                                  { url: 'images/full/006.jpg', caption: 'Image 006'},

                                                                  { url: 'images/full/007.jpg', caption: 'Image 007'},

                                                                  { url: 'images/full/008.jpg', caption: 'Image 008'},

                                                                  { url: 'images/full/009.jpg', caption: 'Image 009'},

                                                                  { url: 'images/full/009.jpg', caption: 'Image 009'},

                                                                  { url: 'images/full/010.jpg', caption: 'Image 010'},

                                                                  { url: 'images/full/011.jpg', caption: 'Image 011'},

                                                                  { url: 'images/full/012.jpg', caption: 'Image 012'},

                                                                  { url: 'images/full/013.jpg', caption: 'Image 013'},

                                                                  { url: 'images/full/014.jpg', caption: 'Image 014'},

                                                                  { url: 'images/full/015.jpg', caption: 'Image 015'},

                                                                  { url: 'images/full/016.jpg', caption: 'Image 016'},

                                                                  { url: 'images/full/017.jpg', caption: 'Image 017'},

                                                                  { url: 'images/full/018.jpg', caption: 'Image 018'}

                                                        ],

                                                        {

                                                                  target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],

                                                                  preventHide: true,

                                                                  getImageSource: function(obj){

                                                                            return obj.url;

                                                                  },

                                                                  getImageCaption: function(obj){

                                                                            return obj.caption;

                                                                  }

                                                        }

                                              );

                                              instance.show(0);

       

                                    });

       

       

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

       

      I tried adding that into the yepnope init function, and modifying the "target" to pic up the div name, but it aint working.

       

      Anyone know what to do/change so that it functions the way I want it to?

       

      huge thanks to anyone who can offer some help

       

      R