I have a test page that I’m trying to develop on our new mobile site (which is within a mobile host). I previously had this same code on a test page in our production site and it worked fine (the code can be found here: http://pastebin.com/VkiKPHY2 ). The images I’m trying to display are also stored on our production site host.
I’m not sure what the problem is with things not working, in the mobile host. In Firefox there are no apparent javascript errors when on the test page within our production site, but when I go to the test page in our mobile host site I am getting javascript errors. Like this:
d is not a function
https://www.stchas.edu/global/js-widgets/photoswipe/code.photoswipe.jquery.3.0.5.min.js
$(‘#Gallery a’).photoSwipe is not a function
https://www.stchas.edu/home/test/news-detail.html?mainFrame=true&livePage=0&language=1&host_id=7e5bc65b-cc7f-461b-9b3a-670f47094dbd& id=e3faead9-999a-4e46-8fb7-2673e4f76965
So I’m guessing that there’s some kind of javascript or JQuery conflict in our mobile site’s environment that isn’t there in our production site, because it looks like Photoswipe is either not being found or not being successfully accessed to be recognized by Firefox as a legitimate JQuery function based on the error messages above.
I’m currently to using PhotoSwipe version 3.0.5 along with jquery-1.7.1.min.js. All of the CSS document references are in the templates used by both pages. I'm also working within a dotcms content management system environment as well which accounts for the "${esc.d}" and "${esc.h}" character strings that appear the code, to distinguish them from velocity code where the dollar-sign always starts a variable name and the pound-sign or hash mark always starts a directive or command.
Any help would be greatly appreciated. Thanks.