Mi a fene ez?

Mi a fene ez?

Semmi különös, itt próbálom ki a cuccokat, mielőtt beteszem a többi blogomba... Ha jól működik, fent hagyom, hogy érte jöhessek, ha szükségem van rá máskor, de hogyha tetszik, nyugodtan viheted Te is! De mielőtt bármibe kezdenél, olvasd el a Tanácsokban leírtakat a modulok és sablonok sikeres használatának érdekében!

Közlemény!

Először is: sajnálom, ha nem válaszoltam a kommentedre, de sokáig nem jöttem a blogra, elnézést! Másodszorra pedig, mint láthatod új külsőt kreáltam a próbajáratnak, ezért néhány dolog lehet, hogy nem működik - hiába van feltüntetve néhány kódnál, hogy a demó látható az oldalon valahol -, mivel a sabloncserével néhány később hozzáadott kódrészlet törlődött. Majd pótolom lassanként.

Köszönöm megértésedet és türelmedet,
von Birken


Az oldal mentése PDF-be

2010. február 18., csütörtök

Ha a többi light-box galéria nem működik...

(...mert előfordul, hogy a tárhely, ahol a script-fájlokat tárolja a készítője, átlépi a megengedett sávszélességet, és akkor nem lehet elérni aznap. Ezt úgy küszöbölhetjük ki, hogy letöltjük ezeket a fáljokat arról a bizonyos tárhelyről, és feltöltjük saját tárhelyre, és kicseréljük a linket a kódban. Az alábbi kódban a pirossal kiemelt részek azok a script-fájlok.)

Nos, a sablonszerkesztőben, a
</head>
elé másold be a következőt:

<!--Light Box Code Starts  Bloggerplugins.ORG-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->



Ezután mentsd a sablont, és menj a Beállításokhoz. Ott állítsd át a szövegszerkesztőt a Régi szerkesztő-re.

Mentsd.

Új bejegyzés > csatolj egy képet > és HTML-kód szerkesztése

Ott látni fogsz egy ilyen (ehhez nagyon hasonló) kódot:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_gQdGruWbcA4/S3zsI9vqBUI/AAAAAAAACQ4/fBdqdaVoys4/s1600-h/400px-Neuenburg_Wappentier.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 134px; height: 200px;" src="http://4.bp.blogspot.com/_gQdGruWbcA4/S3zsI9vqBUI/AAAAAAAACQ4/fBdqdaVoys4/s200/400px-Neuenburg_Wappentier.jpg" alt="" id="BLOGGER_PHOTO_ID_5439482088714274114" border="0" /></a>


A pirossal jelölt részt cseréld le ezzel:

rel="lightbox" title="IDE ÍRD A KÉP CÍMÉT"


A kékkel jelölt -h részt pedig töröld.


Demo:



Ha Albumot szeretnél ezzel a kóddal cseréld le az egymás után föltöltött képeknél:

rel="lightbox[albumname]" title="IDE ÍRD A KÉP CÍMÉT"


Demo:





Related Posts Plugin for WordPress, Blogger...