查看“BootStrap Lightbox”的源代码

__NOTOC__{{DISPLAYTITLE:Mediawiki Bootstrap Lightbox Demo<span style="display: none"></span>}}
<div class="column clearfix"> 
<div class="col-md-12"> 
<div class="panel panel-primary-light-border"> 
<div class="panel-heading"> <h3 class="panel-title">Lightbox for Mediawiki</h3> </div> 
<div class="panel-body">
<p>This mod doesn't use Lightbox, because it conflicts with many of the BootStrap scripts. We've opted to Magnific Popup instead.</p>
<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>
</div>
</div> 
</div> 
</div>
<div class="column clearfix"> 
<div class="col-md-12"> 
<div class="panel panel-primary-light-border"> 
<div class="panel-heading"> <h3 class="panel-title">useage</h3> </div> 
<div class="panel-body">
<div class="bs-example">
<p>Add the following to your mediawiki article.</p>
<pre>
    <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&#39;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>
</pre>
</div>
</div> 
</div> 
</div>
<div class="col-md-12">
 <div class="btn btn-default"><i class="fa fa-angle-double-left"></i> [http://www.mediawikibootstrapskin.co.uk/index.php?title=Features_Guides Back to Guides]</div>
</div>