Kompiuteriai Svetainės kūrimas

Pikachoose - paprasta, bet kokybiška galerija

        

xffx

Lankytojas
 
Pranešimai: 13
Vilnius

 2,036.22 Lt

Standartinė » 2009 Rgs 07, 22:02

Pikachoose - labai lengvas jQuery plugin'as su kurio galima labai

lengvai sukurti foto-galeriją su skirtingomis opcijomis. Pikachoose

padarytas taip, kad visos operacijos ir funkcijos būtų labai aiškios

kiekvienam žmogui.

Prie žiūrėdami pamoką, atsisiųskite video failą ir

pažiūrėkite galerijos demo versiją, deja hostingo aš neturiu,

nepradėkite žiūrėti pamokos, kol nepažiūrėsite demo

versijos.


Link'as į video failą su demo-galerija.
http://www.failai.lt/39vitcj0u6hu/Labai ... KSSKEY.avi.

htm

Jeigu jūs jau peržiūrėjote kaip atrodo galerija, ir jūs norite

pasigaminti ją sau - pradėsim.

jQuery ir CSS

Kodas: Pasirinkti visus
<link type="text/css" href="bottom.css" rel="stylesheet"

/>
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"

src="js/pikachoose-min.js"></script>
<script language="javascript">
<!--
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
-->
</script>


Kodą nurodytą aukščiau būtina įrašyti į saito banner'į. Jame mes

pajungiame visus būtinus skriptus, stilių lenteles ir funkcijas.

HTML

Kodas: Pasirinkti visus
<ul id="pikame">
<li><img src="1.jpg"/><span><a

href="http://www.pikachoose.com">Now you can have

links!</a></span></li>
<li><img src="2.jpg"/><span>Or any html you want inside of

captions!</span></li>
<li><img src="3.jpg"/><span> Donec in ante. Donec pretium.

</span></li>

<li><img src="4.jpg"/><span> Integer id dolor a erat sagittis

volutpat. </span></li>
<li><img src="5.jpg"/><span> Aliquam erat volutpat.

</span></li>
<li><img src="6.jpg"/><span> In ornare, neque ut malesuada

hendrerit.</span></li>
<li><img src="7.jpg"/><span> Aliquam condimentum dolor sed

elit. </span></li>
<li><img src="8.jpg"/><span> Ut non magna at purus cursus

facilisis. </span></li>

<li><img src="9.jpg"/><span> Nunc semper dapibus erat. Nulla

hendrerit.</span></li>
<li><img src="10.jpg"/><span> Aliquam condimentum dolor

sed elit.</span></li>
<li><img src="11.jpg"/><span> Ut non magna at purus cursus

facilisis.</span></li>
<li><img src="12.jpg"/><span> Nunc semper dapibus erat.

Nulla hendrerit.</span></li>
<li><img src="13.jpg"/><span> Nunc semper dapibus erat.

Nulla hendrerit.</span></li>
</ul>


Kaip jūs jau turbūt pastebėjote galerijos struktura yra labai

paprasta, naudojamas neišnumeruotas sąrašas su id="pikame".

Kiekviename sąrašo elemente rašomas *kelias* kur guli

paveiksliukas ir tekstas kuris skirtas paveiksliuko aprašymui. Kaip

tik šį tekstą galite formatuoti pagal HTML *taisykles* ir žinoma

tekstas gali būti nuoroda.

Štai ir viskas paprastą, bet kokybišką galeriją mes padarėme per

porą minučių!

Štai ką gavau aš (Failą siųstis būtina, nes jame ir yra pagr.Skripto failai)
http://www.failai.lt/nz0iw8vk9j8l/example.zip.htm

Ačiū už dėmėsį!

--------------------------------------


GitasPoce

Dalyvis
 
Pranešimai: 179
Plunge

 5,111.12 Lt

Standartinė » 2010 Vas 14, 16:41

Gera pamoka.



Kompiuteriai Svetainės kūrimas





 
Dabar prisijungę

Šiuo metu prisijungę 0 narių :: 0 registruotų, 0 slaptų ir 0 svečių
Daugiausia vartotojų (812) buvo 2020 Bal 28, 22:08

Vartotojai naršantys šį forumą: Registruotų vartotojų nėra ir 0 svečių