asked on
Problem adding slides to Java slide show
I'm working with a java based slide show on this page:
www.sharonfarber.com/demo/index.html
When I try to add a slide in the code view, I get a small empty box or div, as you can see. I'm going to copy the code here. Can you please help me in successfully adding slides?
Thanks.
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>sharon farber</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.2.6.min.j
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-act
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('activ
});
}
$(function() {
setInterval( "slideSwitch()", 7000 );
});
</script>
</head>
<body>
<div id="wrapper">
<!-- header start -->
<header>
<div class="logo_block">
<h1 class="lefts">Sharon Farber composer</h1>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">music</a>
<ul>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
</ul>
</li>
<li><a href="#">video</a></li>
<li><a href="#">bio</a></li>
<li><a href="#">credits</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">press</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">store</a></li>
<li><a href="#">contact</a>
</ul>
</nav>
</div>
</header>
<!-- header end -->
<!-- body start -->
<section id="container">
<div id="slideshow"> <img src="images/01_sfSlideweb.
</section>
<!-- body end -->
<!-- footer start -->
<footer>
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="47%"><span class="copyright lefts">©2012 Sharon Farber • Website design by Richard Stellar / <a href="http://www.interstellar9.com/" target="_blank">Interstell
<td width="31%"><audio controls="controls" autoplay="autoplay">
<source src=
"audio/loufollowsbrewer_Ni
<source src=
"audio/loufollowsbrewer_Ni
</audio></td>
<td width="22%"><span class="rights"> <a href="#" class="social_link"><img src="images/facebook.png" alt=""></a> <a href="#" class="social_link"><img src="images/twitter.png" alt=""></a> <a href="#" class="social_link"><img src="images/you-tube.png" alt=""></a> <a href="#" class="social_link"><img src="images/imdb.png" alt=""></a></span></td>
</tr>
</table>
<p> </p>
<p><span class="copyright lefts"><a href="http://www.interstellar9.com/" target="_blank">
</a>
</span></p>
</footer>
<!-- footer end -->
</div>
</body>
</html>
www.sharonfarber.com/demo/index.html
When I try to add a slide in the code view, I get a small empty box or div, as you can see. I'm going to copy the code here. Can you please help me in successfully adding slides?
Thanks.
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>sharon farber</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.2.6.min.j
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-act
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('activ
});
}
$(function() {
setInterval( "slideSwitch()", 7000 );
});
</script>
</head>
<body>
<div id="wrapper">
<!-- header start -->
<header>
<div class="logo_block">
<h1 class="lefts">Sharon Farber composer</h1>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">music</a>
<ul>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">dropdown</a></li>
</ul>
</li>
<li><a href="#">video</a></li>
<li><a href="#">bio</a></li>
<li><a href="#">credits</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">press</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">store</a></li>
<li><a href="#">contact</a>
</ul>
</nav>
</div>
</header>
<!-- header end -->
<!-- body start -->
<section id="container">
<div id="slideshow"> <img src="images/01_sfSlideweb.
</section>
<!-- body end -->
<!-- footer start -->
<footer>
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="47%"><span class="copyright lefts">©2012 Sharon Farber • Website design by Richard Stellar / <a href="http://www.interstellar9.com/" target="_blank">Interstell
<td width="31%"><audio controls="controls" autoplay="autoplay">
<source src=
"audio/loufollowsbrewer_Ni
<source src=
"audio/loufollowsbrewer_Ni
</audio></td>
<td width="22%"><span class="rights"> <a href="#" class="social_link"><img src="images/facebook.png" alt=""></a> <a href="#" class="social_link"><img src="images/twitter.png" alt=""></a> <a href="#" class="social_link"><img src="images/you-tube.png" alt=""></a> <a href="#" class="social_link"><img src="images/imdb.png" alt=""></a></span></td>
</tr>
</table>
<p> </p>
<p><span class="copyright lefts"><a href="http://www.interstellar9.com/" target="_blank">
</a>
</span></p>
</footer>
<!-- footer end -->
</div>
</body>
</html>
HTMLJavaScriptCSS
Last Comment
Revolution9
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks Chris!