elliottbenzle
asked on
get images to fade using javascript
I am using code called Galleria. In the example it says to use :
$('#gallery').galleria({
transition: 'fade'
});
For a fading transition. I've tried this but there is no change. MY code is below, can anyone se what I am doing wrong?
Thanks
<!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="files/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="files/jquery.min.js"> </script>
<script type="text/javascript" src="files/jquery.galleria .js"></scr ipt>
<script type="text/javascript">
$(document).ready(function (){
$('.gallery_demo_unstyled' ).addClass ('gallery_ demo'); // adds new class name to maintain degradability
$('.nav').css('display','n one'); // hides the nav initially
$('ul.gallery_demo').galle ria({
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','b lock'); } // shows the nav when the image is showing
});
});
// use a fading transition:
$('.gallery_demo_unstyled' ).galleria ({
transition: 'fade'
});
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;backgrou nd:white;b ackground: white;colo r:#555;fon t:80%/140% 'helvetica neue',sans-serif;width:900 px;margin: 0 auto;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-sp acing:3px; text-trans form:upper case;}
a{color:#348;text-decorati on:none;ou tline:none ;}
a:hover{color:#67a;}
.caption{color:#888;positi on:absolut e;top:450p x;left:3px ;width:200 px;}
.demo{position:relative;ma rgin-top:2 em;}
.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:sol id;border- color:#222 ;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
.galleria_container{margin :0 auto 60px auto;height:438px;width:70 0px;float: right;}
.nav{padding-top:15px;clea r:both;}
.info{text-align:left;marg in:30px 0;border-top:1px dotted #221;padding-top:30px;clea r:both;}
.info p{margin-top:1.6em;}
.nav{position:absolute;top :410px;lef t:0;}
</style>
</head>
<body>
<h1>Galleria Demo 02</h1>
<div class="demo">
<ul class="gallery_demo_unstyl ed">
<li><img src="files/flowing-rock.jp g" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="files/stones.jpg" alt="Stones" title="Stones - from Aple images"></li>
<li><img src="files/grass-blades.jp g" alt="Grass Blades" title="Apple nature desktop images"></li>
<li><img class="noscale" src="files/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="files/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="files/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="files/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="files/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<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>
$('#gallery').galleria({
transition: 'fade'
});
For a fading transition. I've tried this but there is no change. MY code is below, can anyone se what I am doing wrong?
Thanks
<!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="files/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="files/jquery.min.js">
<script type="text/javascript" src="files/jquery.galleria
<script type="text/javascript">
$(document).ready(function
$('.gallery_demo_unstyled'
$('.nav').css('display','n
$('ul.gallery_demo').galle
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','b
});
});
// use a fading transition:
$('.gallery_demo_unstyled'
transition: 'fade'
});
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;backgrou
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-sp
a{color:#348;text-decorati
a:hover{color:#67a;}
.caption{color:#888;positi
.demo{position:relative;ma
.gallery_demo{width:200px;
.gallery_demo li{width:55px;height:70px;
.gallery_demo li.hover{border-color:#bbb
.gallery_demo li.active{border-style:sol
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
.galleria_container{margin
.nav{padding-top:15px;clea
.info{text-align:left;marg
.info p{margin-top:1.6em;}
.nav{position:absolute;top
</style>
</head>
<body>
<h1>Galleria Demo 02</h1>
<div class="demo">
<ul class="gallery_demo_unstyl
<li><img src="files/flowing-rock.jp
<li><img src="files/stones.jpg" alt="Stones" title="Stones - from Aple images"></li>
<li><img src="files/grass-blades.jp
<li><img class="noscale" src="files/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
<li><img src="files/lightning.jpg" alt="Lightning" title="Black & White"></li>
<li><img src="files/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
<li><img src="files/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
<li><img src="files/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
<li><img src="files/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev()
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.