Combing two JQuery cycle plugin effects

• • Reply

  11 years ago

  by designshuffle

  dan collins

  Manchester, United Kingdom

  Joined 11 years ago

  Hi Guys,

  This is my first post, I am really stuck with some simple JQuery. (Im 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/screencapture7.jpg

  I have tried the following code to no great luck, can anyone help me?

  It is probably something really simple but I will learn from my mistakes.

  $(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); } }); }); $('#dresses').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' , }); </script> -------------------------------------------- <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>
  Report abuse