Twitter boot modal for images

Question

I have a page that contains information about registered users. Each html table includes 80-90 users. For each user there is a variable $ username. I usually display their photos in a table as shown below.

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> <img src=\"big-avatar-$username.jpg\"> </a>"; 

But the user can open images in a new tab. I want to show large avatars easily. My first choice was lightbox-jquery . But since I use twitter-bootstrap on my site, I decided to use the default download and jquery functions.

I saw that there are bootstrap modals. When a user clicks a link, I do not plan to show anything more than a large photo.

I tried this:

 print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > <img src=\"small-avatar-$username.jpg\" ></a>"; print '</td>'; 

.

 print "<div id=\"$username\" class=\"modal\">"; <img src=\"big-avatar-$username.jpg\"> print "</div>"; 

.

 <script type="text/javascript" id="js"> $('#username').modal(); </script> 

I suggest putting $('#username').modal();
for each user on my page the HTML file will be huge.

But then I tried the name of the anchor class as follows: $('.img-modal').modal();
But that did not work.

What would you recommend in this situation?

Answer 1

I would recommend that you use the HTML5 user data attributes in your <a> tag to determine the username and save the img-modal class.

 "<a href="#myModal" data-username='".$username."' class="img-modal">... 

Starting a call modal when you click on .img-modal (you do not need data-toggle = "modal")

 $('.img-modal').click(function(event) { 

You can get the username value using

 var username = $(this).attr('data-username') 

Since you have a username, you can replace the src property of your <img> in your unique module with something like.

 $("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

And open your modal

 $('#myModal').modal('show') 

And finally, make sure bootstrap-modal.js or boostrap.js are included.