I'm trying to install JQuery Cycle plugin ( http://jquery.malsup.com/cycle/ ), and add text to the left of each photo. Here's the code I have so far:
and for css"
I've left some of the code out, but basically this should give you an idea of what I have right now for the slideshow. At this point I'm stuck. I'm trying to get a <h1> to go on the left of the image, and <p> right under it. The <h1> would have a link, while the paragraph under it wouldn't. Each time the page fades, the text in <h1> and <p> would change accordingly to photo's content, and would also have a link in the heading. I've tried inserting the code around img tag, but it ends up coming up on top instead of left. Anyone have any suggestions?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="box">
<div class="slideshow">
<img src="images/photo_01.jpg" width="500" height="300" />
<img src="images/photo_02.jpg" width="500" height="300" />
<img src="images/photo_03.jpg" width="500" height="300" />
<img src="images/photo_04.jpg" width="500" height="300" />
</div>
</div>
</body>
</html>and for css"
Code:
body {
background-color: #000;
}
img {
border-style: none;
}
.box {
width: 940px;
height:100%;
overflow:hidden;
position: relative;
margin: 0 auto;
}
.slideshow {
height: 300px;
width: 500px;
margin: auto;
float: right;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
}I've left some of the code out, but basically this should give you an idea of what I have right now for the slideshow. At this point I'm stuck. I'm trying to get a <h1> to go on the left of the image, and <p> right under it. The <h1> would have a link, while the paragraph under it wouldn't. Each time the page fades, the text in <h1> and <p> would change accordingly to photo's content, and would also have a link in the heading. I've tried inserting the code around img tag, but it ends up coming up on top instead of left. Anyone have any suggestions?