Combing two JQuery cycle plugin effects

javascript , jquery , cycle plugin Manchester, United Kingdom
  • 8 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>

Post a reply

No one has replied yet! Why not be the first?

Sign in or Join us (it's free).

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“It is practically impossible to teach good programming style to students that have had prior exposure to BASIC. As potential programmers, they are mentally mutilated beyond hope of regeneration.” - E. W. Dijkstra