javascript - carousel selected item highlight when we click on it (using jQuery) -

i using twitter bootstrap carousel,

when user select 1 item carousel , want make size bigger,

for example :

i have html :

<ul class="thumbnails" data-bind="foreach: achievementitem">     <li class="span3">         <div class="thumbnail" tabindex="1">             <div data-bind="click: $root.getachievement">                 <img data-bind="attr: { src: imagefilename, id: 'thumbnail' + soid }" src="../images/defaultphoto.png" id="thumbnail521dfe57d94eaf0900bf5355">             </div>             <img src="../images/trashicon.png" class="trash" data-bind="attr: { id: 'trash' + soid }, click: $root.deleteachievement" id="trash521dfe57d94eaf0900bf5355">         </div>         <div class="caption">              <h5 data-bind="attr: { title: title, id: 'caption' + soid }, text: title" title="achievement 005" id="caption521dfe57d94eaf0900bf5355">achievement 005</h5>          </div>     </li>     <li class="span3">         <div class="thumbnail" tabindex="1">             <div data-bind="click: $root.getachievement">                 <img data-bind="attr: { src: imagefilename, id: 'thumbnail' + soid }" src="../images/defaultphoto.png" id="thumbnail521dfe56d94eaf0900bf5354">             </div>             <img src="../images/trashicon.png" class="trash" data-bind="attr: { id: 'trash' + soid }, click: $root.deleteachievement" id="trash521dfe56d94eaf0900bf5354">         </div>         <div class="caption">              <h5 data-bind="attr: { title: title, id: 'caption' + soid }, text: title" title="achievement 004" id="caption521dfe56d94eaf0900bf5354">achievement 004</h5>          </div>     </li>     <li class="span3">         <div class="thumbnail" tabindex="1">             <div data-bind="click: $root.getachievement">                 <img data-bind="attr: { src: imagefilename, id: 'thumbnail' + soid }" src="../images/defaultphoto.png" id="thumbnail521dfe56d94eaf0900bf5353">             </div>             <img src="../images/trashicon.png" class="trash" data-bind="attr: { id: 'trash' + soid }, click: $root.deleteachievement" id="trash521dfe56d94eaf0900bf5353">         </div>         <div class="caption">              <h5 data-bind="attr: { title: title, id: 'caption' + soid }, text: title" title="achievement 003" id="caption521dfe56d94eaf0900bf5353">achievement 003</h5>          </div>     </li> </ul> 

so when user click on <li> element want make li elemeent width , hightbigger , other item normal,

if want zoom functionality, can use animate function on images.

$("img").click(function() {     //normalize <li>     $("img").animate({width: "150px", height: "50px"}, "slow");      //make clicked <li> larger     $(this).animate({width:"50%", height:"50%"}, "slow"); }); 

jsfiddle: http://jsfiddle.net/ud2r4/2/