смена изображения при клике
 

Гуру, подскажите плиз код, при котором меняется главное изображение при клике на превью. Если можно, на jQuery, плавно:

<div id="container">
    <img id="main-img" src="/images/slider.img_1.jpg">
    
    <div class="thumbnails">
        <img src="/images/thumb_slider.img_1.jpg">
        <img src="/images/thumb_slider.img_2.jpg">
        <img src="/images/thumb_slider.img_3.jpg">
    </div>
</div>

Спасибо заранее!

в примере путь меняется, - в моём случае строка в названии файла с 'thumb_slider' на 'slider'. Как путь поменять при помощи jQuery - есть простой вариант кода. Но тут именно название файла. А вот незадача - с кодироавнием на javascript и jQuery в часности у меня не сложилось.

а какая разница как он меняется ?

<ul class="bxslider">
  <li><img src="/images/slider.img_1.jpg" /></li>
  <li><img src="/images/slider.img_2.jpg" /></li>
  <li><img src="/images/slider.img_3.jpg" /></li>
</ul>

<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="/images/thumb_slider.img_1.jpg" /></a>
  <a data-slide-index="1" href=""><img src="/images/thumb_slider.img_1.jpg" /></a>
  <a data-slide-index="2" href=""><img src="/images/thumb_slider.img_1.jpg" /></a>
</div>

Всем спасибо, - получилось