Norite pažiūrėti kaip veikia flash galerija? atsisiųskite šį video, kuriame parodysiu kaip viskas veikia ant *apache* (hostingo neturiu)
Linkas į video: http://www.failai.lt/bopxpmr4ionn/jQuer ... ja.avi.htm
Linkas į galerijos skriptą, siųstis būtina, nes ten yra vienas reikalingas failas.
http://www.failai.lt/4qwtldi2vplv/tokss ... ar.rar.htm
1. Pajungsim prie dokumento Framework jQuery. Šitam reikalui mums tiesiog reikia parašyti štai tokį kodą prie tagų <head>
- Kodas: Pasirinkti visus
<script type="text/javascript" src="example/jquery.js"></script>
Toliau rašome štai tokį skriptą:
- Kodas: Pasirinkti visus
<script type="text/javascript">
$(document).ready(function(){
$("#thumbnail li a").click(function(){
$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
$("#large h2").html($("> img", this).attr("title"));
return false;
});
$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});
});
</script>
2. Atskiroje stilių lentelėje arba tame pačiame faile prie tagų <head> Parašysim CSS stilius, kad išvesti galeriją. Beja, stilius galite keisti pagal savo norus ir poreikius.
- Kodas: Pasirinkti visus
#large {
width: 350px;
height: 350px;
float: left;
margin-top: 50px;
margin-left: 50px;
background: url(example/indicato.gif) no-repeat 50% 40%;
}
#large img {
width: 350px;
height: 263px;
border: 5px solid #223348;
}
#thumbnail {
width: 210px;
height: 256px;
overflow: auto;
float: left;
list-style: none;
margin-top: 50px;
margin-left: 16px;
_margin-left: 8px;
padding: 5px;
border: 3px solid #223348;
background: #fff;
}
#thumbnail li {
float: left;
width: 79px;
margin: 8px;
_margin: 5px;
}
#thumbnail a {
display: block;
width: 75px;
height: 56px;
padding: 1px;
border: 1px solid #ccc;
}
#thumbnail a:hover {
border-color: #405061;
}
Aišku pati galerija turi štai tokį nenumeruota sąrašą!
- Kodas: Pasirinkti visus
<div id="large">
<img src="example/image010.jpg" title="" alt="image01.jpg" />
</div>
<ul id="thumbnail">
<li><a href="example/big/image01.jpg"><img src="example/image011.jpg" title="" alt="image01.jpg" /></a></li>
<li><a href="example/big/image02.jpg"><img src="example/image020.jpg" title="" alt="image02.jpg" /></a></li>
<li><a href="example/big/image03.jpg"><img src="example/image030.jpg" title="" alt="image03.jpg" /></a></li>
<li><a href="example/big/image04.jpg"><img src="example/image040.jpg" title="" alt="image04.jpg" /></a></li>
<li><a href="example/big/image05.jpg"><img src="example/image050.jpg" title="" alt="image05.jpg" /></a></li>
<li><a href="example/big/image06.jpg"><img src="example/image060.jpg" title="" alt="image06.jpg" /></a></li>
<li><a href="example/big/image07.jpg"><img src="example/image070.jpg" title="" alt="image07.jpg" /></a></li>
<li><a href="example/big/image08.jpg"><img src="example/image080.jpg" title="" alt="image08.jpg" /></a></li>
<li><a href="example/big/image09.jpg"><img src="example/image090.jpg" title="" alt="image09.jpg" /></a></li>
<li><a href="example/big/image10.jpg"><img src="example/image100.jpg" title="" alt="image10.jpg" /></a></li>
<li><a href="example/big/image11.jpg"><img src="example/image110.jpg" title="" alt="image11.jpg" /></a></li>
<li><a href="example/big/image12.jpg"><img src="example/image120.jpg" title="" alt="image12.jpg" /></a></li>
<li><a href="example/big/image13.jpg"><img src="example/image130.jpg" title="" alt="image13.jpg" /></a></li>
<li><a href="example/big/image14.jpg"><img src="example/image140.jpg" title="" alt="image14.jpg" /></a></li>
</ul>
bloke large randasi standartinis (default) paveiksliukas kuris ir bus dydelis. Toliau kiekvienas sąrašo elementas yra iš mažų paveiksliukų (75х56 px) ir turi linką į didelį paveiksliuką (350х263 px)
Talpinti šios paveiksliukus jūs galite vienoje arba 2 papkėse. pvz:
Papkė: BIG(dideliems) ir papkė SMALL(mažiems), bet nepamirškite nurodyti teisingą adresą iki paveiksliukų.
Sveikinu! Dabar jūs turite labai gerą, paprastą *Flash* galerija. Ačiū už dėmėsi.
Pamokos autorius: toksskey (aš)
