index.html

    <section id="screenshots">
                <h1 class="text-center">Screenshots</h1>
                <div class="separator"></div>

                <div class="container">
                    <div class="row">
                            <div class="col-xs-4">
                                    <a href="#modal" data-toggle="modal" data-image-url="img/tickets.png">
                                            <img src="img/tickets.png" class="img-responsive anima1">
                                    </a>
                            </div>  <!-- ./col-sm-4-->

                            <div class="col-xs-4">
                                <a href="#modal" data-toggle="modal" data-image-url="img/points.png">
                                        <img src="img/points.png" class="img-responsive anima2">
                                </a>
                            </div>

                            <div class="col-xs-4">
                                <a href="#modal" data-toggle="modal" data-image-url="img/trailers.png">
                                        <img src="img/trailers.png" class="img-responsive anima3">
                                </a>
                            </div>
                    </div> <!-- ./row -->
                </div> <!-- ./container -->

                <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledy="myModalLabel"
 aria-hidden=true>
                        <div class="modal-body">
                                <img src="#">
                                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                </div>
        </section> <!-- #/screenshots -->

main.js

	$('section#screenshots a').on('click',function() {
		$('#modal img').attr('src', $(this).attr('data-image-url') );
	});