Jaunākie ieraksti Lietotāji Noteikumi Meklēt
  • Lappuse 1 no 1
  • 1
Forums » Datorlietas » Mājaslapu Izstrādes Pamācības » Liels un moderns attēlu slaideris (sml[settings]Slaideris darbojas uz jquery)
Liels un moderns attēlu slaideris
jackass
Date: Otrdiena, 01 Mar 2011, 5:33 PM | Ieraksts # 1


Pakāpe:

Ieraksti: 194
Jauns slaideris, diezgan paliels, bet izmērus protams var samainīt! Pats labākais, ka šīs darbosies arī mūsu uCoz lapās smile




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
<head un </head>

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!



Pielikums: 9432656.png (201.5 Kb)

 
raitis
Date: Piektdiena, 19 Aug 2011, 7:44 AM | Ieraksts # 2


Pakāpe:

Ieraksti: 3
Paldies, šis tiešām noder. wink
 
Forums » Datorlietas » Mājaslapu Izstrādes Pamācības » Liels un moderns attēlu slaideris (sml[settings]Slaideris darbojas uz jquery)
  • Lappuse 1 no 1
  • 1
Meklēšana:
Uz augšu