“BootStrap Lightbox”的版本间的差异

2016年12月9日 (五) 02:19的最新版本

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.

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>

Back to Guides

@@ 第1行： / 第1行： @@
-__NOTOC__{{DISPLAYTITLE:Mediawiki Bootstrap Lightbox Demo<span style="display: none"></span>}}
+__NOTOC__
 <div class="column clearfix">
 <div class="col-md-12">