photoswipe slideshow doesnt show using jquery mobile and expression engine
hi 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:
<!-- CSS Declaration -->
<link rel="stylesheet" type="text/css" href="{site_url}jquerymobile/css/jquery.mobile-1.3.1.css" />
<link rel="stylesheet" type="text/css" href="{site_url}jquerymobile/css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" type="text/css" href="{site_url}jquerymobile/css/jquery.mobile.theme-1.3.1.css" />
<link rel="stylesheet" type="text/css" href="{site_url}photoswipe/css/photoswipe.css" />
<link rel="stylesheet" type="text/css" href="{path='styles/m'}" />
<script type="text/javascript" src="{site_url}jquerymobile/js/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="{site_url}photoswipe/js/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript" src="{site_url}photoswipe/js/klass.min.js"></script>
some imports.
<div data-role="page" id="portfolio" >
<div data-role="header" data-theme='a' id="header">
<h1> Portfolio </h1>
</div><!-- /header -->
<div data-role="content" data-theme='c' >
<div class="choice_list">
<p> Our recent portfolio: </p>
<ul data-role="listview" data-inset="true" >
<li>
<a href="#Gallery1" data-transition="slide">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn1"/>
<h3> Project#1</h3>
</a>
</li>
<li>
<a href="#Gallery2" data-transition="slide">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn2"/>
<h3> Project#2</h3>
</a>
</li>
<li>
<a href="#Gallery3" data-transition="slide">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn3"/>
<h3> Project#3</h3>
</a>
</li>
<li>
<a href="#Gallery4" data-transition="slide">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn4"/>
<h3> Project#4</h3>
</a>
</li>
</ul>
</div>
<p>For full view of our projects visit the normal website</p>
<p class="copyright">Copyright © MNT. Designed by <a href="http://www.mntdesign.co" class="ui-link">MNTDesign</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme='a' >
<nav data-role="navbar">
<ul>
<li><a href="{path='m'}" data-icon="home">Home</a></li>
</ul>
</nav>
</div><!-- /Foother -->
</div><!-- /page -->
<div data-role="page" id="Gallery1" class="gallery-page">
<header data-role="header">
<h1>Project #1</h1>
<a href="#portfolio" data-icon="grid" data-iconpos="notext" data-transition="slide">Portfolio</a>
</header>
<!--<img src="" class="fullscreen" alt="projectn1" /> -->
<div data-role="content">
<ul class="gallery">
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn11" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn12" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn13" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn14" /> <!-- 200x130 px image -->
</a>
</li>
</ul>
<p class="copyright">Copyright © MNT. Designed by <a href="http://www.mntdesign.co" class="ui-link">MNTDesign</a></p>
</div>
</div><!-- Page Project #1 -->
<div data-role="page" id="Gallery2" class="gallery-page">
<header data-role="header">
<h1>Project #2</h1>
<a href="#portfolio" data-icon="grid" data-iconpos="notext" data-transition="slide">Portfolio</a>
</header>
<div data-role="content">
<ul class="gallery">
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn21" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn22" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn23" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn24" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn25" /> <!-- 200x130 px image -->
</a>
</li>
<li>
<a href="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" rel="external"> <!-- small picture -->
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="projectn26" /> <!-- 200x130 px image -->
</a>
</li>
</ul>
<p class="copyright">Copyright © MNT. Designed by <a href="http://www.mntdesign.co" class="ui-link">MNTDesign</a></p>
</div>
</div><!-- Page Project #2 -->
<div data-role="page" id="Gallery3" >
<header data-role="header">
<h1>Project #3</h1>
<a href="#portfolio" data-icon="grid" data-iconpos="notext" data-transition="slide">Portfolio</a>
</header>
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" class="fullscreen" alt="projectn3" />
</div><!-- Page Project #3 -->
<div data-role="page" id="Gallery4" >
<header data-role="header">
<h1>Project #4</h1>
<a href="#portfolio" data-icon="grid" data-iconpos="notext" data-transition="slide">Portfolio</a>
</header>
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" class="fullscreen" alt="projectn4" />
</div><!-- Page Project #4 -->
</body>
the body.
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.live('pageshow', function(e){
var currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.live('pagehide', function(e){
var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
the script.
mi view on coda http://img844.imageshack.us/img844/5346/r6m.png
how i have the file on coda (i dont know where should be the photoswipe images, i tried on different places)
any clue on what im doing wrong?
i really apreciate every help u can give me!
Edit:
debuging
im using the script from the photoswipe examples,and locally works perfect on the examples, but when it upload the files to the server and my app code, so i dont know if i need to change something, or what doesnt support expression engine of my javascript code.
Solution
i found the problem, with the last update of jquery .live doesn work, i change it for .on and it works!
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.on('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.on('pagehide', function(e){
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
and the folder images, should be in the same folder with the htmls files.
- Synchronize react state with react router url search params
- Is there a way to prevent a client side JS injection into my website?
- How to disable all div content
- ts-node and ESM: unknown file extension '.ts'
- Javascript ENUM pattern naming convention
- How can I change the default return value of a constructor?
- FastAPI is not loading static files
- Is there a way to add type definition globally in TypeScript 2+?
- Is there any way to copy image to clipboard with pure javascript without libraries?
- Displaying the local machine camera feed in a Blazor Web Assembly app
- Javascript Array of Functions
- remove umlauts or specialchars in javascript string
- Flatten the array of objects and removing duplicate key entry
- Protected Content - How to make the Right-Click and F12 don't work in your website?
- Failed prop type: Invalid prop `onClick` of type `object` supplied to `Button`, expected `function`
- How to find out if the user browser is Chrome?
- How to find loading bottleneck of a slow-loading SAPUI5 app
- How to Download video tag using JS?
- Chart.js — drawing an arbitrary vertical line
- Dynamic nested reactive form: ExpressionChangedAfterItHasBeenCheckedError
- How do I get a date in YYYY-MM-DD format?
- How do I create and read a value from cookie with javascript?
- How to avoid "Synchronous XMLHttpRequest on the main thread" warning in UI5?
- Create object from array
- Next JS router.push not working without page reload
- Validate phone number with Yup?
- How is ESLint integrated into Create React App?
- How to escape a JSON string containing newline characters using JavaScript?
- How to round to at most 2 decimal places, if necessary
- javascript MediaRecorder does not record on stop