BookSlider jest szablonem książkowego slidera.
Instalacja[]
Aby szablon BookSlider działał poprawnie, należy wykonać poniższe czynności:
Zmiana parametrów skryptu[]
- Utwórz MediaWiki:Wikia.js/BookSlider.js.
- Wklej w poprzednio utworzoną stronę MediaWiki skrypt znajdujący się tutaj.
- Skrypt można dowolnie modyfikować, czyli istniej możliwość zmiany czasu, w którym obracana jest okładka, rozmiary itd.
Import skryptu[]
- Wejdź do swojego MediaWiki:Wikia.js, lub jeśli nie istnieje - utwórz go.
- Wklej do powyższej strony MediaWiki poniższy kod, a następnie zapisz stronę. Pamiętaj, import stron musi być zawsze na początku!
importScriptPage('MediaWiki:Wikia.js/BookSlider.js');
Użycie strony skryptu[]
- Stwórz Szablon:BookSlider.
- Wklej do powyższej strony szablonu poniższy kod, a następnie zapisz stronę.
- Kiedy będziesz wypełniać jego parametry, pamiętaj, że pliki znajdujące się w szablonie muszą mieć wymiary 700px × 201px!
<div id="sliderframe" style="border: 1px solid rgba(44,165,197,0.7); position:relative; width:698px; height:200px;">
<div id="slider4" style="cursor:pointer; position:absolute; width:698px; height:200px; z-index:10; overflow:hidden;" class="opened"><div id="slider4img">[[File:{{{obraz4}}}|link= |700px|center|slider4image]]</div><div id="slider4caption" style="position:absolute; margin-left:75px; bottom:20px; width:530px; background:rgba(0,0,0,0.8); border-top:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; padding:5px; visibility:hidden; opacity:0; cursor:default; color:white;">{{{tekst4}}}</div><div id="slider4arrow" style="position:absolute; right:10px; bottom:0px; visibility:visible; opacity:1.0;">4</div></div>
<div id="slider3" style="border-right: 1px solid rgba(0,0,0,0.8); cursor:pointer; position:absolute; width:675px; height:200px; float:left; z-index:15; -moz-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; -webkit-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; overflow:hidden;" class="opened"><div id="slider3img">[[File:{{{obraz3}}}|link= |700px|center|slider3image]]</div><div id="slider3caption" style="position:absolute; margin-left:50px; bottom:20px; width:530px; background:rgba(0,0,0,0.8); border-top:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; padding:5px; visibility:hidden; opacity:0; cursor:default; color:white;">{{{tekst3}}}</div><div id="slider3arrow" style="position:absolute; right:10px; bottom:0px; visibility:visible; opacity:1.0;">3</div></div>
<div id="slider2" style="border-right: 1px solid rgba(0,0,0,0.8); cursor:pointer; position:absolute; width:650px; height:200px; float:left; z-index:20; -moz-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; -webkit-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; overflow:hidden;" class="opened"><div id="slider2img">[[File:{{{obraz2}}}|link= |700px|center|slider2image]]</div><div id="slider2caption" style="position:absolute; left:25px; bottom:20px; width:530px; background:rgba(0,0,0,0.8); border-top:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; padding:5px; visibility:hidden; opacity:0; cursor:default; color: white;">{{{tekst2}}}</div><div id="slider2arrow" style="position:absolute; right:10px; bottom:0px; visibility:visible; opacity:1.0;">2</div></div>
<div id="slider1" style="border-right: 1px solid rgba(0,0,0,0.8); cursor:pointer; position:absolute; width:625px; height:200px; float:left; z-index:25; -moz-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; -webkit-box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; box-shadow: rgb(0, 0, 0) 10px 0px 20px -10px; overflow:hidden;" class="opened"><div id="slider1img">[[File:{{{obraz1}}}|link= |700px|center|slider1image]]</div><div id="slider1caption" style="position:absolute; left:0px; bottom:20px; width:530px; background:rgba(0,0,0,0.8); border-top:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; padding:5px; visibility:visible; opacity:1.0; cursor:default; color:white;">{{{tekst1}}}</div><div id="slider1arrow" style="position:absolute; right:10px; bottom:0px; visibility:hidden; opacity:0;">1</div></div>
<div id="slider1url" style="display:none;">{{{obraz1url}}}</div>
<div id="slider2url" style="display:none;">{{{obraz2url}}}</div>
<div id="slider3url" style="display:none;">{{{obraz3url}}}</div>
<div id="slider4url" style="display:none;">{{{obraz4url}}}</div>
</div>
Księga gości[]
Użyłeś powyższego skryptu na swojej wiki? Daj o tym znać, podpisując się i wklejając link do wiki! Dzięki temu będziesz dostawał natychmiast informacje o aktualizacjach skryptu!
- Max Steel Wiki (Tutaj!) - Lukisiak (DYSKUSJA)
- Ben 10 Alternatywne Historie Wiki - WindMarine12 (dyskusja) 17:04, wrz 16, 2014 (UTC)
- Breaking Bad Wiki – DarknessEyes23 Pokój i bezpieczeństwo, bracie! Allons-y! 10:15, mar 29, 2015 (UTC)
- Za bramą ogrodu Wiki - Rafi862 skontaktuj się mój wkład 10:36, kwi 18, 2015 (UTC)
Zobacz też[]
- Prezentacja (prezentacja skryptu)
- BookSlider.js (strona ze skryptem)