Content of a <div> changes with a link- Javascript code conflict?

Question

I have a side navigation bar that changes the content of a div that houses my image gallery that uses JavaScript. In this div is also a paragraph description of the current gallery set.

My problem is not that the JavaScript for side bar does not change the content of the div, but rather that the gallery does not show up, but only the paragraph. This is how I know that my code is working.

I think that there may be a conflict between the JS for the side bar and the JS for the gallery.

Here is the code for the gallery:

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

Here is the code for the side bar:

    $(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>     

Thank you for taking a look for me. I do not really know JS very well so I am appreciative to be able to take this question to the experts. Please let me know if you need more information like more code or clarification on some point.

EDIT: Ok here is the entire JS section. Maybe this is more useful?

<!--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>

Here is a shot of the page before clicking the link. The gallery is there along with the paragraph.

http://postimg.org/image/c8ejwcv0x/

Then after clicking the link, the new div information is loaded, but the only the paragraph is visible and not the gallery.

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

Answer 1

There's a syntax error here. Remove the additional comma beside 'fit'. panel_scale is the only property here so you shouldn't add a comma after it. The comma is used to separate multiple properties.

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

EDIT

OK I got it.

You should add a callback in load() to call galleryView again because the old content has been removed after you click on the link.

$('#contents').load('galleries.html #' + $(this).attr('href'), '', function(){              
                $('#' + $(this).attr('href')).galleryView({panel_scale: 'fit'});
            });