Creio que dúvida seja simples, porém estou com uma dificuldade. Estou criando um menu de imagens, utilizando BootStrap, e está funcionando corretamente. O problema é, como eu faço para ao clicar em uma das imagens thumbnail, aparecer como imagem principal?
Segue o feito até o momento.
Muito obrigado.
<header class="page-header">
<img src="images/logo_header.png" class="img-responsive"/></header>
</header>
<div class="row">
<div role="main" class="col-md-12">
<h2><i>G A L E R I A</i></h2>
<div id="destaque" class="row">
<div class="col-md-12">
<img src="images/galeria1.jpg" class="img-responsive"/>
</div>
</div> <!-- /.destaque -->
<div id="miniaturas" class="row">
<div class="col-md-12">
<h5><b>VEJA MAIS</b></h5>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="images/thumbnail1.jpg" class="img-responsive"/>
</a></div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="images/thumbnail2.jpg" class="img-responsive"/>
</a></div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="images/thumbnail1.jpg" class="img-responsive"/>
</a></div>
<div class="col-md-3">
<a class="thumbnail" href="#">
<img src="images/thumbnail2.jpg" class="img-responsive"/>
</a></div>
</div> <!-- /.miniaturas -->
</div>
</div> <!-- /.row -->