1

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 -->

1 Resposta 1

1

Para definir este comportamento será necessário JavaScript.

Como você utiliza bootstrap e ele requer jQuery voce pode adicionar este comportamento, basicamente pegue a url do src da imagem e atribua a imagem em destaque.

Exemplo:

$(".thumbnail").click(function() {
  var url = $(this).find("img").attr("src");
  $("#destaque img").attr("src", url);
});

Veja funcionando no jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .