JavaScriptを使用する画像ギャラリーを格納するdivのコンテンツを変更するサイドナビゲーションバーがあります。このdivには、現在のギャラリーセットの段落の説明もあります。
私の問題は、サイドバーのJavaScriptがdivのコンテンツを変更しないことではなく、ギャラリーが表示されず、段落のみが表示されることです。これは、私のコードが機能していることを私が知る方法です。
サイドバーのJSとギャラリーのJSの間に矛盾があるのではないかと思います。
ギャラリーのコードは次のとおりです。
$(function(){
$('#myGallery').galleryView({
panel_scale: 'fit',});
});
サイドバーのコードは次のとおりです。
$(document).ready(function(){
$('.options a').click(function(){
$('#contents').load('galleries.html #' + $(this).attr('href'));
return false;
});
});
HTML：
<div id="sidenav">
<div>
<ul class="ca-menu">
<li>
<span class="ca-icon">P
</span>
<div class="ca-content">
<h2 class="ca-main">Photography</h2>
</div>
<div class="options">
<a href="galleries">Nature</a><br />
<a href="galleries2">Quest</a><br />
<a href="galleries3">Forgotten</a><br />
<a href="galleries4">Society</a><br />
</div>
</li>
<li>
<span class="ca-icon">Y
</span>
<div class="ca-content">
<h2 class="ca-main">Animation</h2>
</div>
<div class="options">
<a href="contact1.html">Optical</a><br />
<a href="index1.html">Stacking</a><br />
<a href="works1.html">Lin</a><br />
<a href="works1.html">Other</a><br />
</div>
</li>
<li>
<span class="ca-icon">G
</span>
<div class="ca-content">
<h2 class="ca-main">Modeling</h2>
</div>
<div class="options">
<a href="contact1.html">First</a><br />
<a href="index1.html">Apartment</a><br />
<a href="works1.html">Still lifes</a><br />
</div>
</li>
<li>
<span class="ca-icon">O
</span>
<div class="ca-content">
<h2 class="ca-main">Illustration<br />Design</h2>
</div>
<div class="options">
<a href="contact1.html">Voice</a><br />
<a href="index1.html">Blocks</a><br />
<a href="works1.html">Design requests</a><br />
</div>
</li>
</ul>
</div>
</div>
<div id="contents">
<div class="gallerycontent">
<ul id="myGallery">
<li><img src="../Web Design (jp)/design final/img/photos/p1.jpg" alt="Lone Tree Yellowstone" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p2.jpg" alt="Is He Still There?!" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p3.jpg" alt="Noni Nectar For Green Gecko" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p4.jpg" alt="Flight of an Eagle Owl" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p5.jpg" alt="Winter Lollipops" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p6.jpg" alt="Day of Youth" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p7.jpg" alt="Sunbathing Underwater" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p8.jpg" alt="Untitled" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p9.jpg" alt="New Orleans Streetcar" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/p10.jpg" alt="By The Wind of Chance" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/o1.jpg" alt="Fishing on the Cloud" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/o4.jpg" alt="Blue Lagoon" /></li>
<li><img src="../Web Design (jp)/design final/img/photos/o8.jpg" alt="Time" /></li>
</ul>
<p>
Here will be all the info about the current album displayed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et diam eros. Nullam venenatis, augue in gravida egestas, sapien dui ornare lorem, et elementum libero libero eu lorem. Cras sollicitudin dictum massa, eu egestas dui porttitor eu.
</p>
</div>
</div>
ご覧いただきありがとうございます。私はJSをあまりよく知らないので、この質問を専門家に伝えることができて感謝しています。ある時点で、より多くのコードや説明など、より多くの情報が必要な場合はお知らせください。
編集：OKここにJSセクション全体があります。多分これはもっと便利ですか？
<!--GalleryView include scripts-->
<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" />
<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<script type="text/javascript">
$(function(){
$('#myGallery').galleryView({
panel_scale: 'fit'});
});
</script>
<!--------.Load function for Gallery Navigation Bar--------->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.options a').click(function(){
$('#contents').load('galleries.html #' + $(this).attr('href'));
return false;
});
});
</script>
リンクをクリックする前のページのショットを次に示します。ギャラリーは段落と一緒にあります。
http://postimg.org/image/c8ejwcv0x/
次に、リンクをクリックすると、新しいdiv情報が読み込まれますが、段落のみが表示され、ギャラリーは表示されません。