こんにちは、私は自分のウェブサイトの写真スワイプの例に従っていますが、写真スワイプで何かを修正することはできません。ギャラリーは正常に機能していますが、ギャラリーの写真を 1 つ選択しても何も起こらず、スライドショーは表示されず、写真; これは私のコードの一部です:
<!-- 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>
一部輸入。
<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>
体。
(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));
スクリプト。
coda の mi ビュー http://img844.imageshack.us/img844/5346/r6m.png
coda でファイルを取得する方法 (写真のスワイプ画像をどこに置くべきかわかりません。別の場所で試しました)
私が間違っていることについての手がかりはありますか？
私はあなたが私に与えることができるすべての助けに本当に感謝しています!
編集：
デバッグ中
私は写真スワイプの例のスクリプトを使用しており、例ではローカルで完璧に動作しますが、ファイルをサーバーとアプリコードにアップロードするとき、何かを変更する必要があるかどうか、または私の表現エンジンをサポートしていないものはわかりませんジャバスクリプトコード。