PDA

View Full Version : Image Slideshow - help with code


celho
29 Nov 2011, 05:54 PM
Hi Everyone,

I'm trying to recreate this image slideshow (http://www.sohtanaka.com/web-design/examples/image-rotator/), and I'm having trouble getting the comments to show, and the images under the div main_image are not populating when the thumbnail is clicked. Perhaps there's something wrong with the scripting. Can anyone help?

Here's the HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head><title>mock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<link href="./html/reset.css" rel="stylesheet" type="text/css">
<link href="./html/main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

<!--START Adding Class Selectors-->
function slide_switch() {
var $active=$('#main_image img.active');
var $next=#active.next();

$next.addClass('active');
$active.removeClass('active');
}

$(function() {
setInterval("slide_switch()",2000);
});
<!--END Adding Class Selectors-->

<!--START Image Fade In-->
function slide_switch(){
$active.addClass('last-active');
$next.css({opacity:0.0})
.addClass('active');
.animate({opacity:1.0}, 1000, function(){
$active.removeClass('active last-active');
});
}

$(function(){
setInterval("slide_switch()",2000);
});
<!--END Image Fade In-->

</script>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">logo</div>

<div id="nav">
<ul>
<li><a href="#" class="current">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div><!--#nav ends-->

</div><!--#header ends-->

<div id="images_container">

<div class="main_image">
<img src="./images/image1.jpg" alt="screenshot" class="active"/>
<img src="./images/image1.jpg" alt="screenshot" class="active"/>
<img src="./images/image1.jpg" alt="screenshot" class="active"/>

<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="write_caption_here">
<h2>Title goes here</h2>
<small>Date goes here</small>
<p>Description goes here</p>
</div><!--ends .write_caption_here-->
</div><!--ends .desc-->
</div> <!--ends .main_image"-->

<div class="image_thumb">
<ul>
<li>
<a href="#"><img src="./images/image1_cropped.jpg" alt="image1_cropped"/></a>
</li>

<li>
<a href="#"><img src="./images/image1_cropped.jpg" alt="image1_cropped"/></a>
</li>

<li>
<a href="#"><img src="./images/image1_cropped.jpg" alt="image1_cropped"/></a>
</li>

</ul>
</div><!-- ends .image_thumb -->

</div><!-- ends #image_container -->

<div id="footer"> © 2011 </div>

</div> <!--container ends -->
</body>
</html>


Here's the CSS:


#images_container{
position: relative;
float: left;
background-color: #14414a;
width: 100%;
height: auto; /*365px;*/
padding: 20px 10px;
margin: 0px auto;
}
.main_image {
width: 598px;
height: 456px;
float: left;
position: relative;
overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
color: #fff;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;

box-shadow: inset 0px 0px 2px 2px #666; /* top, left,blur,color */
-moz-box-shadow: inset 0px 0px 2px 2px #666;
-webkit-box-shadow: inset 0px 0px 2px 2px #666;
}
.main_image img{
position: absolute;
z-index: 8;
}
.main_image img.active{
z-index: 10;
}
.main_image img.last-active{
z-index: 9;
}
.main_image .desc{
position: absolute;
bottom: 0;
left: 0; /*--Stick the desc class to the bottom of our main image container--*/
width: 100%;
display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.write_caption_here small { /*--We'll be using this same style on our thumbnail list--*/
font-size: 1em;
padding: 0 0 0 20px;
background: #555;
}
.main_image .write_caption_here{
width: 100%;
background: #111;
border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
background: yellow;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show {background-position: left bottom;}
.image_thumb {
float: left;
width: 310px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
background: #fff;
float: left;
padding: 5px;
}
.image_thumb ul {list-style: none;}
.image_thumb ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { /*--Hover State--*/
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
background: #fff;
cursor: default;
}