BootStrap Lightbox
Lightbox for Mediawiki
This mod doesn't use Lightbox, because it conflicts with many of the BootStrap scripts. We've opted to Magnific Popup instead.
×
My Image Title
Lots of scope here to write as much content as you like about your images, with the additional benefit of a close button and the ability to direct the viewer to another page. The only limitation is the size of the main image which shouldn't go over 800px (approx).
×
My Image Title
Lots of scope here to write as much content as you like about your images, with the additional benefit of a close button and the ability to direct the viewer to another page.
×
My Image Title
Lots of scope here to write as much content as you like about your images, with the additional benefit of a close button and the ability to direct the viewer to another page.
useage
Add the following to your mediawiki article.
<div class="col-md-4">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;" data-toggle="modal" data-target="#myModal1">
http://mediawikibootstrapskin.co.uk/images/carousel_1_thumb.jpg</div>
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="close" data-dismiss="modal" aria-hidden="true">×</div>
<h4 class="modal-title" id="myModalLabel">My Image Title</h4>
</div>
<div class="modal-body">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;">http://mediawikibootstrapskin.co.uk/images/carousel_1.jpg</div>
<p>Lots of scope here to write as much content as you like about your images, with the additional benefit of a close
button and the ability to direct the viewer to another page. The only limitation is the size of the main image which
shouldn't go over 800px (approx).</p>
</div>
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">Close</div>
<div class="btn btn-primary">Read More</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;" data-toggle="modal" data-target="#myModal2">
http://mediawikibootstrapskin.co.uk/images/carousel_2_thumb.jpg</div>
<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="close" data-dismiss="modal" aria-hidden="true">×</div>
<h4 class="modal-title" id="myModalLabel">My Image Title</h4>
</div>
<div class="modal-body">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;">http://mediawikibootstrapskin.co.uk/images/carousel_2.jpg</div>
<p>Lots of scope here to write as much content as you like about your images, with the additional benefit of a close
button and the ability to direct the viewer to another page.</p>
</div>
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">Close</div>
<div class="btn btn-primary">Read More</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;" data-toggle="modal" data-target="#myModal3">
http://mediawikibootstrapskin.co.uk/images/carousel_3_thumb.jpg</div>
<div id="myModal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="close" data-dismiss="modal" aria-hidden="true">×</div>
<h4 class="modal-title" id="myModalLabel">My Image Title</h4>
</div>
<div class="modal-body">
<div class="thumbnail img-thumbnail color-border" style="overflow:hidden;margin:0 auto;">http://mediawikibootstrapskin.co.uk/images/carousel_3.jpg</div>
<p>Lots of scope here to write as much content as you like about your images, with the additional benefit of a close
button and the ability to direct the viewer to another page.</p>
</div>
<div class="modal-footer">
<div class="btn btn-default" data-dismiss="modal">Close</div>
<div class="btn btn-primary">Read More</div>
</div>
</div>
</div>
</div>
</div>