Tutorial :How to program dynamic preview on site


I'm asking for some orientation and recommendations for developing something similar like the yahoo movies page: http://movies.yahoo.com/

I don't know how the thing at the top with the arrows and different title of movies is called but I've seen it several times.(the one that has 4 options:expendables, yogi bear, etc) I want to add something like this so I'm asking for orientation on what to look for and develop it on java script.



Yes, that's what's called a Carousel, and there are many libraries and plugins for doing it. You might try Yahoo's own YUI Carousel Control or this one for jQuery, but there are plenty of others out there--just Google for them.


It's basically four links and four images here. When you click on the link, the associated image will be shown.

I will show you an example.


<div class="links">      <a class="link-first" href="#">Show image 1</a>       <a class="link-second" href="#">Show image 2</a>  </div>    <div class="images">      <img class="image-first" href="#" alt="" />       <img class="image-second" href="#" alt="" />  </div>  

JavaScript (jQuery):

$(".links a").click(function()  {      $(".images img").hide();      $(".images ." + this.className.split("-")[1]).show();  });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »