0

我有一个侧边导航栏,可以更改包含我使用 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,所以我很高兴能够将这个问题带给专家。如果您需要更多信息,例如更多代码或在某些方面进行说明,请告诉我。

编辑:好的,这是整个 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 信息被加载,但只有段落是可见的,而不是画廊。

http://postimg.org/image/uyc06bdzf/

4

1 回答 1

0

这里有语法错误。删除旁边的附加逗号'fit'panel_scale是这里唯一的属性,因此您不应在其后添加逗号。逗号用于分隔多个属性。

$(function(){
    $('#myGallery').galleryView({
        panel_scale: 'fit',});
});

编辑

好,我知道了。

您应该在 load() 中添加回调以再次调用 galleryView,因为单击链接后旧内容已被删除。

$('#contents').load('galleries.html #' + $(this).attr('href'), '', function(){              
                $('#' + $(this).attr('href')).galleryView({panel_scale: 'fit'});
            });
于 2013-03-26T04:59:18.270 回答