I have a grid with image links on my page. When clicking one of them a modal should pop up with the image but in big format.

Now I'm trying to achieve this without the use of javascript/jquery but just with data-attributes.

At the moment I have this code:

<!-- Generating the image link with PHP (laravel) --> <a data-toggle="modal" href="#myModal"> {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }} </a> <!--The modal --> <section class="row"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title text-center">HEADER</h4> </div> <div class="modal-body"> <p> BODY </p> </div> <div class="modal-footer"> <p>My Footer</p> </div> </div> </div> </div> </section> 

Is is possible to achieve this just with data-attributes without using javascript?

I'm using Twitter Bootstrap Modal and Lightbox for Bootstrap 3 Plugin

I have a grid with image links on my page. When clicking one of them a modal should pop up with the image but in big format.

Now I'm trying to achieve this without the use of javascript/jquery but just with data-attributes.

At the moment I have this code:

<!-- Generating the image link with PHP (laravel) --> <a data-toggle="modal" href="#myModal"> {{ HTML::image("img/$photo->Link", "$photo->Title", array("class"=>"thumbnail col-md-3")) }} </a> <!--The modal --> <section class="row"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title text-center">HEADER</h4> </div> <div class="modal-body"> <p> BODY </p> </div> <div class="modal-footer"> <p>My Footer</p> </div> </div> </div> </div> </section> 

Is is possible to achieve this just with data-attributes without using javascript?

I'm using Twitter Bootstrap Modal and Lightbox for Bootstrap 3 Plugin

EDIT:

<div class="imgLink col-md-3"> <a data-toggle="lightbox"> <img src="../img/5.jpg" class="thumbnail"> </a> </div> 

Of course I've added the script of the lightbox plugin and when clicking this I'm getting no remote access how come?