Difference between revisions of "MediaWiki: Common.js"
From Chuang Lab
Line 2: | Line 2: | ||
importScript('MediaWiki:Bootstrap.js'); | importScript('MediaWiki:Bootstrap.js'); | ||
importScript('MediaWiki:jQuery.js'); | importScript('MediaWiki:jQuery.js'); | ||
+ | $(function () { | ||
+ | var myString = ` | ||
+ | <div id="myCarousel" class="carousel slide" data-ride="carousel"> | ||
+ | <!-- Indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="1"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="2"></li> | ||
+ | </ol> | ||
+ | |||
+ | <!-- Wrapper for slides --> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="item active"> | ||
+ | <img src="la.jpg" alt="Los Angeles"> | ||
+ | </div> | ||
+ | |||
+ | <div class="item"> | ||
+ | <img src="chicago.jpg" alt="Chicago"> | ||
+ | </div> | ||
+ | |||
+ | <div class="item"> | ||
+ | <img src="ny.jpg" alt="New York"> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Left and right controls --> | ||
+ | <a class="left carousel-control" href="#myCarousel" data-slide="prev"> | ||
+ | <span class="glyphicon glyphicon-chevron-left"></span> | ||
+ | <span class="sr-only">Previous</span> | ||
+ | </a> | ||
+ | <a class="right carousel-control" href="#myCarousel" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right"></span> | ||
+ | <span class="sr-only">Next</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | `; | ||
+ | |||
+ | $('#chuang-lab').html(myString); | ||
+ | }()); | ||
+ | |||
/* DO NOT ADD CODE BELOW THIS LINE */ | /* DO NOT ADD CODE BELOW THIS LINE */ |
Revision as of 10:51, 17 May 2018
/* Any JavaScript here will be loaded for all users on every page load. */ importScript('MediaWiki:Bootstrap.js'); importScript('MediaWiki:jQuery.js'); $(function () { var myString = ` <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Los Angeles"> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago"> </div> <div class="item"> <img src="ny.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> `; $('#chuang-lab').html(myString); }()); /* DO NOT ADD CODE BELOW THIS LINE */