MoBiBenc Creative Commons License 2010.09.22 0 0 213
Sziasztok, üdvözlök mindenkit!

Hobbi szinten fotózom, weblap szerkesztéshez / készítéshez nem értek – mégis belekerültem, próbálkozom vele. A program amit használok egy végtelen primitív, de számomra annál egyszerűbb, kezelhetőbb – „web page maker” – viszont eljutottam addig, hogy azt mondhassam, ez kevés nekem. Így kívül kerültem a program hatáskörén, próbálom egyéb külső segítséggel moddingolni, fejleszteni a honlapom…itt viszont már az én tapasztalatom bizonyult kevésnek – egyszerűen nem értek hozzá. (www.molnarbence.com)

A célom elvileg egyszerű. A képnézegetést, galériát szeretném lightbox szerűen megoldani, de 1 lightboxban nem egy képet megjelenítve, hanem egymás mellett sokat…ezt alapjaiban véve sikerült megoldani, egyetlen kivétellel, aminek a forrása is kissé más. A weblapomon van egy legördülő lista, aminek meg tudtam adni a célokat – ha kiválasztod őket, hova ugorjon. S ezt is ugyan olyan lightbox szerűen szeretném kivitelezni, akár csak a többi (sport, koncert, egyéb, kapcsolat) kategóriát. Ha most kiválasztasz egyet a legördülő közül, láthatod, hogy hogyan működik, egyszerűen egy másik oldalra dob át.

A web-oldal megjelenítő „lightbox” (lightwindow - http://www.p51labs.com/lightwindow) működése:

- megadottfájlokat felmásolsz,
- a html kódos weblapodba beillesztesz egy kódot head alá:

<link href="http://www.molnarbence.com/favicon.ico" rel="icon" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

- és a linkeket ilyen módon írod át:

<a href="http://.../" class="lightwindow"/a>

A legördülő listás megoldásom a honlapon a web page maker a következőképpen írja le:

<form name="form1" target="_blank" method="POST" style="margin:0px">
<select name="formselect1" style="position:absolute;left:568px;top:464px;width:434px;z-index:6">
<option value="">válassz...</option>
<option value="20100918_csilleberc.html">HAMAROSAN -> 2010.09.18 - 24 órás váltó - Csillebérc</option>
<option value="20100904_orsiati.html">HAMAROSAN -> 2010.09.04 - Orsi & Attila Esküvője</option>
<option value="20100822_sheket.html">2010.08.22 - Sheket - INTERNO fesztivál</option>
<option value="20100227_bluesfeszt.html">2010.02.27 - Blues fesztivál, Budapest</option>
<option value="20100119_bethlenbal.html">2010.01.19 - Bethlen bál</option>
</select>
</form>

<div id="html1" style="position:absolute; overflow:hidden; left:77px; top:498px; width:200px; height:125px; z-index:7">
<script language="javascript">
function gotoUrl(url) {
if (url == "")
return;
location.href = url;
}
function newWin(url) {
// url of this function should have the format: "target,URL".
if (url == "")
return;
window.open(url.substring(url.indexOf(",") + 1, url.length),
url.substring(0, url.indexOf(",")));
}
function fnOnChange(){
gotoUrl(selector.options[selector.selectedIndex].value);
return true;
}
var selector = (document.getElementById)?
document.getElementsByName("formselect1")[0] :
document.all.formselect1;
selector.onchange=fnOnChange;
</script></div>

Gondolom ebbe kellene valahogyan beleilleszteni a class="lightwindow" kódot, viszont nekem sehogy nem akart működni – minden esetben egész egyszerűen csak átdobott az oldalra…ötlet, vélemény, tanács?
Segítségetek előre is köszönöm,
Üdv, Bence :)