pauljamesw
18 Jun 2010, 02:27 AM
I have a jquery galleria slideshow which i got to work until I placed the code into my web page. i think that hte 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 invisible 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 in a div tag that is invisible when the page loads.
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>
I believe it's this line: $('ul.gallery_demo').galleria({
that is supposed to load images into the un ordered list in a div tag that is invisible when the page loads.
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>