A kóddal, amit itt találtok meg lehet változtatni annak a felugró kisablaknak a kinézetét, ami úgy általában megjelenik egy link vagy egy linkelt kép felett, ha van hozzá némi leírás a title részben. Használható bármilyen linkhez, képhez vagy akár a Coppermine Galériához is a még jobb testreszabás érdekében. A kód kettő fájlból áll: van egy javascript kódja, amit az oldalatok header fájljába kell bemásolni Worpress esetén és van a CSS kód része, amit pedig a CSS kódodhoz kell hozzá adni. A kódok alatt azt is leírom, hogyan kell a Coppermine Galériába is beletenni ezt a script-et. LindaDesign
A bekeretezett felugró ablak változik meg a kóddal
A title rész az a rész, ami akkor jelenik meg, ha a linkhez ez be van állítva. Kódban így néz ki:
<a href="http://lindadesign-nonstop.hu" title="Ez a kis felugró ablak kinézetileg megváltoztatható :)">LindaDesign</a>
Kép róla
Első lépésben töltsétek le ezt a .js fájlt: qTip.js
Html oldalon: töltsétek fel a .js fájlt a tárhelyetekre oda, ahova általában menni szokott az ilyesmi. Akár külön js mappába vagy simán a gyökér könyvtárba. Csak tudd az elérési útját.
G-Portálon: a .js fájlt a G-Portár-ba töltsétek fel
A kód beillesztése:
Html oldalon: a lejjebb látható kódot illlesszétek be a header.php fájlba WordPress esetén. Az elérési útvonalat írjátok át a sajátotokra.
<script src="/js/kqTip.js"></script>
G-Portálon: a lejjebb látható kódot illesszétek oldalatok jobb vagy bal oldalába egy egyszerű modulba
<script src="ide jön a G-Portárba feltöltött .js fájl url címe"></script>
CSS kód
div#qTip {
background-color:#322827;
padding: 3px;
border: 1px solid #2f2828;
display: none;
color: #e8e7e4;
font: 10px arial;
text-align: center;
width: 200px;
position: absolute;
z-index: 1000;
-moz-opacity:.95;
filter:alpha(opacity=95);
opacity:.95;
}
Coppermine Galériánál: Ha azt szeretnétek, hogy a Coppermine Galériában is cserélődjön le a felugró ablak, ha egy kép fölé viszitek az egeret, akkor így csináljátok: a .js fájlt biztos, ami biztos a galéria éppen használt témájába töltsétek fel és a galéria themplate.html fájljába illesszétek be az elérési út kódját (a script-es kódot). A CSS kódot pedig a Galéria CSS kódjába illesszétek be, ezután formázhatjátok és kész is :)
Ha valami nem lenne egyértelmű, akkor kérdezzetek :)
1 258 megtekintés