Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Devin-Midterm"
Bootstrap 3.1.0 Snippet by
Bikamek11
3.1.0
Preview
HTML
View Full Screen
Forked from
Fork
Fork this
Parent
1.6K
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Sample by Mr. M. - Confederation College - IMD Program --> <div class="container"> <div class="row"> <h3>Mr. M.'s Two Thumbnail popups using Twitter Bootstrap Modal</h3> <p> <span class="label label-danger">Thumbnail TIP</span> <br> <ul> <li>Sometimes thumbnails are <strong>not</strong> just the same image shrunk down. Try cropping out an interesting part of the larger image, and shrink that image down for the thumb. The mixer is just a shrunk thumbnail of entire image. The lion is an example of a "crppped" thumbnail. <a href="http://bootsnipp.com/iframe/8ObW" target="_blank"><span class="glyphicon glyphicon-eye-open"></span> View in separate window</a></li> <li>TIP: Name your files mixer.jpg and mixer_t.jpg for easy programming. As you add more thumbs, make sure classes and id's are unique as shown in this example.</li> </ul> <hr> <!-- Thumbnail link for mixer image NOTE: data-target is .pop-up-1 for mixer, and .pop-up-2 for lion, these classes must be unique --> <a href="#" data-toggle="modal" data-target=".pop-up-1"> <img src="http://i.imgur.com/YZ7AGyF.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for lion image --> <a href="#" data-toggle="modal" data-target=".pop-up-2"> <img src="http://i.imgur.com/dtaHtds.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for Blue Jay image --> <a href="#" data-toggle="modal" data-target=".pop-up-3"> <img src="http://i.imgur.com/61hO6xx.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <small> Creative Commons image: <a href="http://tinyurl.com/flickrmixer">Desmond Talkington on Flickr.com (mixer) </a> <br> Creative Commons image: <a href="http://www.flickr.com/photos/fortherock/3898712750/sizes/z/">fortherock on Flickr.com (lion) </a> <br> <a href="http://tinyurl.com/tbvalid5" target="_blank">HTML 5 Valid</a> </small> <hr> <!-- Modal content for the Mixer image example --> <div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">Mixer Board</h4> </div> <div class="modal-body"> <img src="http://i.imgur.com/YZ7AGyF.jpg.jpg" class="img-responsive img-rounded center-block" alt=""> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for the Lion image example --> <div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-2">Lion</h4> </div> <div class="modal-body"> <img src="http://i.imgur.com/kzGVqbd.jpg" class="img-responsive img-rounded center-block" alt=""> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for the Blue Jay image example --> <div class="modal fade pop-up-3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-3" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-3">Blue Jay</h4> </div> <div class="modal-body"> <img src="http://i.imgur.com/61hO6xx.jpg" class="img-responsive img-rounded center-block" alt=""> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> </div> <!-- /.row --> </div> <!-- /.container -->
Related:
See More
Free Template
Black Dashboard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76