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į!
