|
|
| Line 1: |
Line 1: |
| mw.loader.using('mediawiki.util').then(function() {
| | <div class="slideshow-container"> |
|
| | <div class="mySlides fade"> |
| function zselector( $content ) {
| | <img src="https://wiki.teamsadcrab.com/images/8/8b/Sally3.png" style="width:100%"> |
| var ActiveID = '';
| | </div> |
| $(function () {
| |
| $('[class|="cc"]').click(function () {
| |
| var cn = $(this).attr('class');
| |
| if (typeof cn !== 'undefined') {
| |
| ZContent(cn, '0');
| |
| }
| |
| });
| |
| $('[class|="hh"]').mouseenter(function () {
| |
| var cn = $(this).attr('class');
| |
| if (typeof cn !== 'undefined') {
| |
| ZContent(cn, '1');
| |
| }
| |
| });
| |
| $('[class|="hh"]').mouseleave(function () {
| |
| var cn = $(this).attr('class');
| |
| if (typeof cn !== 'undefined') {
| |
| ZContent(cn, '2');
| |
| }
| |
| });
| |
| $('[class|="zz"]').each(function (i, elem) {
| |
| if ($(this).css('display') == 'none') {
| |
| $(this).css('opacity', 0);
| |
| }
| |
| });
| |
| });
| |
| function ZContent(classValue, effect) { | |
| if (classValue.split) {
| |
| var ID = '';
| |
| var elemClasses = classValue.split(' ');
| |
| for (var i = 0; i < elemClasses.length; i++) {
| |
| var elemClass = elemClasses[i];
| |
| if (elemClass.substring(0, 3) == 'hh-' || elemClass.substring(0, 3) == 'cc-') {
| |
| ID = elemClass.substring(3);
| |
| if (effect == '0') {
| |
| ActiveID = ID;
| |
| ZEffect(ID);
| |
| SelectElem('cc', ID)
| |
| break;
| |
| } else if (effect == '1') {
| |
| ActiveID = ID;
| |
| ZEffect(ID);
| |
| SelectElem('hh', ID)
| |
| break;
| |
| } else if (effect == '2') {
| |
| ZEffect(ActiveID);
| |
| SelectElem('hh', ID);
| |
| break;
| |
| }
| |
| }
| |
| }
| |
| }
| |
| }
| |
| function ZEffect(ID) {
| |
| $('[class|="zz"]').each(function (i, elem) {
| |
| if ($(this).hasClass('zz-' + ID)) {
| |
| $(this).css('display', 'block');
| |
| $(window).trigger('scroll');
| |
| $(this).stop();
| |
| $(this).animate({
| |
| opacity: 1,
| |
| queue: false
| |
| }, 700);
| |
| } else {
| |
| $(this).css('display', 'none');
| |
| $(this).stop();
| |
| $(this).animate({
| |
| opacity: 0,
| |
| queue: false
| |
| }, 0);
| |
| }
| |
| });
| |
| }
| |
| function SelectElem(type, ID) {
| |
| $('[class|="cc"],[class|="hh"]').each(function (i, elem) {
| |
| if ($(this).hasClass(type + '-' + ID)) {
| |
| $(this).removeClass('sn');
| |
| $(this).addClass('sy');
| |
| } else {
| |
| $(this).removeClass('sy');
| |
| $(this).addClass('sn');
| |
| }
| |
| });
| |
| }
| |
| }
| |
|
| |
| mw.hook( 'wikipage.content' ).add( zselector );
| |
| zselector( mw.util.$content );
| |
| });
| |
|
| |
|
| // Динамическая кнопка "back to top"
| | <div class="mySlides fade"> |
| $(document).ready(function(){
| | <img src="https://wiki.teamsadcrab.com/images/a/ac/Salazar.png" style="width:100%"> |
| // Create the back to top button element | | </div> |
| var backButton = $('<button id="back-to-top" title="Back to top"> </button>');
| |
|
| |
| // Append the button to the body
| |
| $('body').append(backButton);
| |
|
| |
|
| |
|
| // Smooth scroll to top when the button is clicked
| | <!-- Добавьте больше изображений по аналогии --> |
| backButton.click(function(){
| |
| $('html, body').animate({scrollTop : 0},800);
| |
| return false;
| |
| });
| |
| });
| |
|
| |
|
| window.addEventListener('scroll', function() {
| | <a class="prev" onclick="plusSlides(-1)">❮</a> |
| var toc = document.getElementById('toc');
| | <a class="next" onclick="plusSlides(1)">❯</a> |
| var bodyContent = document.getElementById('bodyContent');
| | </div> |
| var scrollY = window.scrollY || window.pageYOffset;
| | <br> |
|
| |
|
| // Adjust the top position of the TOC based on scrolling
| | <div style="text-align:center"> |
| if (scrollY > bodyContent.offsetTop) {
| | <span class="dot" onclick="currentSlide(1)"></span> |
| toc.style.top = (scrollY - bodyContent.offsetTop) + 'px';
| | <span class="dot" onclick="currentSlide(2)"></span> |
| } else {
| | <!-- Добавьте больше точек для новых изображений --> |
| toc.style.top = '0';
| | </div> |
| }
| |
| });
| |
| | |
| | |
| var slideIndex = 1;
| |
| showSlides(slideIndex);
| |
| | |
| function plusSlides(n) {
| |
| showSlides(slideIndex += n);
| |
| }
| |
| | |
| function currentSlide(n) {
| |
| showSlides(slideIndex = n);
| |
| }
| |
| | |
| function showSlides(n) {
| |
| var i;
| |
| var slides = document.getElementsByClassName("mySlides");
| |
| var dots = document.getElementsByClassName("dot"); | |
| if (n > slides.length) {
| |
| slideIndex = 1
| |
| }
| |
| if (n < 1) {
| |
| slideIndex = slides.length
| |
| }
| |
| for (i = 0; i < slides.length; i++) { | |
| slides[i].style.display = "none";
| |
| }
| |
| for (i = 0; i < dots.length; i++) {
| |
| dots[i].className = dots[i].className.replace(" active", "");
| |
| } | |
| slides[slideIndex - 1].style.display = "block";
| |
| dots[slideIndex - 1].className += " active";
| |
| }
| |
