Combining two cycle plugin effects - HELP PLEASE!
Hi Guys,
This is my first post, I am really stuck with some simple JQuery. (I am a
complete beginner)
I am working on a site which requires the following effect...
The user clicks on a link in a right hand sided #div and the images in the
left #div shuffle and the relative info for each dress will fade into the
#div on the right hand side.
See this image for a clearer idea of what I mean -
http://img254.imageshack.us/img254/8895 ... pture7.jpg
I have tried the following
code to no great luck, can anyone help me?
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
<!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked
$("a.linkclass").click(function()
{
//check weather the visible block and clicked link's block is same or different
if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
{
//reduces the z-index and margin of left side increased and decreased by 400px and hide
$(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
//increase the z-index of the new visible block
$($(this).attr("href")).css("z-index","10").fadeIn(400);
}
});
});
</script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#dresses').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2' ,
});
</script>
<style type="text/css">
.container {
width:312px;
margin-top:20px;
}
.msg_body {
padding: 5px;
width: 300px;
text-align:justify;
position:absolute;
}
.linkclass
{
font-weight:bold;
color:#006699;
}
#wrap{width:900px; margin:0 auto;}
#left{width:400px; height:600px; margin-right:20px; border:2px solid #cccccc; float:left; padding:10px;}
#right{width:400px; height:600px; border:2px solid #cccccc; float:left;}
</style>
</head>
<body>
<div id="left">
<div id="home" class="msg_body">
<img src="img/1.png"/>
</div>
<div id="about_us" class="msg_body">
<img src="img/2.png"/>
</div>
</div>
<div id="right">
<div id="dresses">
<div class="dress"> <b>Home</b><br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet<br/>
<a href="#about_us" class="linkclass" id="next2">next dress</a> </div>
<br/>
<div class="dress"> <b>About US</b><br /> consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet <br/><a href="#home" class="linkclass" id="next2">next dress</a> </div>
<div class="dress"> <b>test</b><br /> consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elitlorem ipsum dolor sit amet <br/><a href="#home" class="linkclass" id="next2">next dress</a> </div>
</div>
</div>
</body>
</html>
It is probably something really simple but I will learn from my mistakes.
Thanks in advance
Dan
