S013 Wiki
Advertisement

BookSlider jest szablonem książkowego slidera.

Instalacja[]

Aby szablon BookSlider działał poprawnie, należy wykonać poniższe czynności:

Zmiana parametrów skryptu[]

  1. Utwórz MediaWiki:Wikia.js/BookSlider.js.
  2. Wklej w poprzednio utworzoną stronę MediaWiki skrypt znajdujący się tutaj.
  3. Skrypt można dowolnie modyfikować, czyli istniej możliwość zmiany czasu, w którym obracana jest okładka, rozmiary itd.

Import skryptu[]

  1. Wejdź do swojego MediaWiki:Wikia.js, lub jeśli nie istnieje - utwórz go.
  2. 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[]

  1. Stwórz Szablon:BookSlider.
  2. Wklej do powyższej strony szablonu poniższy kod, a następnie zapisz stronę.
  3. 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!

Zobacz też[]

Advertisement