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

Supervisor

New Member
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:\[code\]$(function(){ $('#myGallery').galleryView({ panel_scale: 'fit',});});\[/code\]Here is the code for the side bar:\[code\] $(document).ready(function(){ $('.options a').click(function(){ $('#contents').load('galleries.html #' + $(this).attr('href')); return false; }); });\[/code\]HTML:\[code\]<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="http://stackoverflow.com/questions/15629374/galleries">Nature</a><br /> <a href="http://stackoverflow.com/questions/15629374/galleries2">Quest</a><br /> <a href="http://stackoverflow.com/questions/15629374/galleries3">Forgotten</a><br /> <a href="http://stackoverflow.com/questions/15629374/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="http://stackoverflow.com/questions/15629374/contact1.html">Optical</a><br /> <a href="http://stackoverflow.com/questions/15629374/index1.html">Stacking</a><br /> <a href="http://stackoverflow.com/questions/15629374/works1.html">Lin</a><br /> <a href="http://stackoverflow.com/questions/15629374/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="http://stackoverflow.com/questions/15629374/contact1.html">First</a><br /> <a href="http://stackoverflow.com/questions/15629374/index1.html">Apartment</a><br /> <a href="http://stackoverflow.com/questions/15629374/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="http://stackoverflow.com/questions/15629374/contact1.html">Voice</a><br /> <a href="http://stackoverflow.com/questions/15629374/index1.html">Blocks</a><br /> <a href="http://stackoverflow.com/questions/15629374/works1.html">Design requests</a><br /> </div> </li> </ul> </div> </div> <div id="contents"><div class="gallerycontent"> <ul id="myGallery"> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p1.jpg" alt="Lone Tree Yellowstone" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p2.jpg" alt="Is He Still There?!" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p3.jpg" alt="Noni Nectar For Green Gecko" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p4.jpg" alt="Flight of an Eagle Owl" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p5.jpg" alt="Winter Lollipops" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p6.jpg" alt="Day of Youth" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p7.jpg" alt="Sunbathing Underwater" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p8.jpg" alt="Untitled" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p9.jpg" alt="New Orleans Streetcar" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/p10.jpg" alt="By The Wind of Chance" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/o1.jpg" alt="Fishing on the Cloud" /></li> <li><img src="http://stackoverflow.com/questions/Web Design (jp)/design final/img/photos/o4.jpg" alt="Blue Lagoon" /></li> <li><img src="http://stackoverflow.com/questions/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> \[/code\]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.
 
Back
Top