Difficulty Menu image Bootstrap

Question

Difficulty Menu image Bootstrap

Navigation

#1 by (1 votes)

1

I think that doubt is simple, but I have a difficulty. I am creating a menu of images, using BootStrap, and it is working correctly. The problem is, how do I when clicking on one of the thumbnail images appears as the main image?

The work done so far.

Thank you very much.

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

html css twitter-bootstrap

asked by anonymous 26.03.2016 / 02:00

1 answer

EntityFramework StoredProcedure retrieve parameter output How to convert certain group of columns to JSON?

score 1 · Accepted Answer

To set this behavior JavaScript will be required.

As you use bootstrap and it requires jQuery you can add this behavior, basically take the src url of the image and assign the featured image.

Example:

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

See working at jsfiddle