using Jquery: need help loading elements on page
I have a jquery galleria slideshow which i got to work until I placed the code into my web page. I think that the problem is that the javascript element isn't loading the images the way it's supposed to because the code is now burried within a a div tag that is not visible when the page is loaded . I believe it's this line: $('ul.gallery_demo').galleria({ that is supposed to load images into the un ordered list . gallery demo
i am pretty new to javascript and very new to jquerry so I don't know were to start to find this solution. What worries me is that my site plan calls for other instances of this similar slide shows to be hidden and revealed.
this is the site as it stand right now:http://www.pauljameswilliams.com/portfolio.html here's my code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <title>Galleria Demo 2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <link href="galleria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.galleria.pack.js"></script> <script type="text/javascript"> jQuery(function($) { $('gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability $('.nav').css('display','none'); // hides the nav initially $('ul.gallery_demo').galleria({ history : false, // deactivates the history object for bookmarking, back-button etc. clickNext : false, // helper for making the image clickable. Let's not have that in this example. insert : undefined, // the containing selector for our main image. // If not found or undefined (like here), galleria will create a container // before the ul with the class .galleria_container (see CSS) onImage : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing }); }); </script> <style media="screen,projection" type="text/css"> /* BEGIN DEMO STYLE */ *{margin:0;padding:0} body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;} h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} a{color:#348;text-decoration:none;outline:none;} a:hover{color:#67a;} .caption{color:#888;position:absolute;top:250px;left:3px;width:200px;} .demo{position:relative;margin-top:2em;} .gallery_demo{width:200px;float:left;} .gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;} .gallery_demo li.hover{border-color:#bbb;} .gallery_demo li.active{border-style:solid;border-color:#222;} .gallery_demo li div{left:240px} .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} .img {width: 50px; height: auto;} .galleria_container{ margin:0 auto 600px auto;height:313px;width:500px;float:left;} .nav{padding-top:15px;clear:both;} .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;} .info p{margin-top:1.6em;} .nav{position:absolute;top:410px;left:0;} </style> </head> <body> <h1>Galleria Demo 02</h1> <div class="demo"> <ul class="gallery_demo"> <li><img src="images/portfolio01.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li> <li><img src="images/portfolio02.jpg" alt="Stones" title="Stones - from Aple images"></li> <li><img src="images/portfolio03.jpg" alt="Grass Blades" title="Apple nature desktop images"></li> <li><img src="images/portfolio04.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li> <li><img src="images/portfolio05.jpg" alt="Lightning" title="Black & White"></li> <li><img src="images/portfolio06.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li> <li><img src="images/portfolio07.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li> <li><img src="images/portfolio08.jpg" alt="Pier" title="Proin erat nisi"></li> <li><img src="images/portfolio09.jpg" alt="Sea Mist" title="Caption text from title"></li> </ul> <div class="galleria_container"></div> <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p> </div> </body> </html>