Jauns slaideris, diezgan paliels, bet izmērus protams var samainīt! Pats labākais, ka šīs darbosies arī mūsu uCoz lapās
Ja vēlamies šādu lietu savās lapās, tad sekojam instrukcijām!
1. Lejupielādējam šos failus un pēc tam augšupielādējam tos savā failu menedžerī! style.css, jquery.js, scripts.js, header-bg.png, nav-bg.png, silde-nav.png, slide-bg.png, kā arī lejupielādējam bildes kuras tiek izmantotas slaidos ja Jums tās ir nepieciešamas nature-photo.png, nature-photo1.png, nature-photo2.png, nature-photo3.png, nature-photo4.png, nature-photo5.png, nature-photo6.png!
2. Šablonā pievienojam CSS un JS failus kā parasti starp tagiem
Code
<link rel="stylesheet" href="http://modifikators.lv/root/content-slider2/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://modifikators.lv/root/content-slider2/js/jquery.js"></script>
<script type="text/javascript" src="http://modifikators.lv/root/content-slider2/js/scripts.js"></script>
Neaizmirstiet samainīt saites uz CSS un JS failiem ar saitēm uz Jūsu failu atrašanās vietu!
3. Nākamo kodu pievienojiet aiz body taga vietā kur vēlamies lai slaideris būtu redzams!
Code
<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="http://modifikators.lv/root/content-slider2/images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="http://modifikators.lv/root/content-slider2/images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="http://modifikators.lv/root/content-slider2/images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="http://modifikators.lv/root/content-slider2/images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="http://modifikators.lv/root/content-slider2/images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="http://modifikators.lv/root/content-slider2/images/nature-photo5.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="http://modifikators.lv/root/content-slider2/images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>
</div></div><!--/header-->
Turpmāk būs paskaidrojums par iepriekš pievienoto kodu!
Ja Jums viss ir skaidrs, tālāk varat nelasīt
Šobrīd būs redzami 7 slaidi, lai pievienotu astoto pievienojam nākamās kodu rindiņas klāt pie jau esošā koda
Code
<a href=""><img id="slide-img-1" src="http://modifikators.lv/root/content-slider2/images/nature-photo.png" class="slide" alt="" /></a>
Šī rindiņa norāda uz pirmā slaidā saturu:
href="" - starp pēdiņām varam ievietot saiti, kura būs pievienota konkrētam attēlam, konkrētā slaidā!
"slide-img-1" - Šis koda fragments norāda uz to, kurā slaidā atradīsies konkrētais attēls
src="" - Starp pēdiņām norādam saiti uz attēla
Tā tad, lai pievienotu jaunu slaidu, mēs pievienojam astotā slaida attēlu šādi!
Code
<a href=""><img id="slide-img-8" src="ADRESE_UZ_ATTĒLU.png" class="slide" alt="" /></a>
Tālāk, lai šis konkrētais 8 attēls parādītos slaidu sarakstā mums tas ir jāaktivizē!
Šis JS fragments norāda uz slaidu sarakstu!
Code
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
Šī daļa norāda uz pirmo slaidu
Code
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"}
Quote
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"}
Cipars 1 norāda uz attēla numuru, kuru mēs norādījām iepriekš, tā tad jaunajam 8 attēlam mēs cipara 1 vietā liksim 8!
Tālāk teksts norāda uz slaida nosaukumu POST: Slaida nosaukums
Teksts zaļajā krāsā norāda uz slaida aprakstu, kurš parādīsies aiz nosaukuma!
Tā tad, lai pievienotu astoto slaidu, mēs pievienojam pirms šīs koda daļas ];
komatu "," un tad astotā slaida kodu
Code
{"id":"slide-img-8","client":"nature beauty","desc":"add your description here"}
Domāju, ka visu paskaidroju ļoti detalizēti un neskaidrībām nevajadzētu būt!!!
Neaizmirstiet samainīt saites uz attēliem iekš CSS faila!
Pamācību bez autora atļaujas izplatīt citās mājaslapās stingri aizliegts!