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 359 megtekintés