I want a similar effect with the one from this website. Can it be done with jQuery? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. 开发者_运维百科 Closed 11 years ago.

I need a jQuery effect something similar with the one from this website:

[site removed]

If you go hover the right menu (right of the slider), top is Visit SMWF you will see that the slider is changing. I want something similar.

Anyone knows a JQ plugin or at least can anyone share how to do it? Can this be done in jQuery?

Thanks a lot!

---

Well, this is just a 'good start' i hope.

DEMO fiddle

download from jsbin

$('#niceMenu ul li>img').clone().appendTo('#imgHolder');
$('#niceMenu img').addClass('thumb');
$('#niceMenu li:eq(0)').addClass('hovered');

$('#niceMenu li').mouseenter(function(){
    var imgSliderW = $('#imgSlider').width();
    $('#imgHolder').width( imgSliderW * ($('#imgHolder img').length) );
    $(this).addClass('hovered').siblings().removeClass('hovered');
    var liIndex = $(this).index();
    $('#imgHolder').animate({left: '-'+ imgSliderW * liIndex +'px'}, {queue:false, duration: 800});
});

This gallery I made is a bit rude. But a good start!
It grabs the images contained into the li elements and clone them to the slider area.
When you hover a li element it moves the #imgHolder by: #imgSlider * this li .index() --> to the left
Anyone using just a simple CMS can edit the gallery as you can see from the simple html.

---

http://plugins.jquery.com/plugin-tags/sliding-panel

An image on a sliding Panel would work well for that. Mouseover events and image placement. Lots of examples online if you look up sliding panels in jQuery. Neat animation tool :)

---

I would recommend looking at the jCarousel plugin:

http://sorgalla.com/projects/jcarousel/

This will give you the sliding image functionality that you like. You can see similar functionality in this demo page:

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

You will just need to replace the click event with a mouse over event. Good luck!

---

Yes, it can be surely done with jQuery, as like for example with Mootools.

To achieve this hover-move effect, you can bind/delegate events to right menu, when the left content will be moved to display appropriate image or whatever else you need.

You will probably need the following functions:

• .animate() - to move the content,
• .delegate() - to bind the events to the right menu,
• .offset() - to get the current position of the left content (although not necessary),

You can also take advantage of data- HTML attributes assigned eg. for links (you can read them to determine which slide of the left content to show).

You will also need some CSS basics (especially overflow and position properties).