කොහොමද යාලුවනේ? කාලෙකට පස්සේ මගේ අඩවියට ආවා... පොඩි ලිපියක් දාන්න කියලා.. මේ දවස් වල, පොඩි, (පොඩිත් නෑ) ෆොටෝ බ්ලොග් එකක් කරනවා..
http://photo.bluelagoonlanka.com/ මෙතනින් ගිහින් බලන්න. මම දැක්කා අපේ යාලුවෝ ෆොටෝ බ්ලොග් කරනවා. ඉතිං මේකට තියෙන ලස්සම ක්රමය මොකද්ද? හෙන කටු ගොඩක් කාලා මම මේකට ලස්සනම ක්රමය හෙව්වා.. දැන් මගේ බ්ලොග කොහොමද? මේ ක්රමේ Slow වෙන්නේ නෑ.. එලට වැඩ... අර Facebook එකේ එන්නේ Lightbox Effect එක Image එකක් Click කරාම එන්නේ... ඒ වගේ...
මුලිනම Template එකේ </head> කොටස හොයාගන්න.
ඊටපස්සේ මේ කොටස </head> කොටසට උඩින් paste කරන්න.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0Sa613N9FAaErQ4povqG3vA95i9lHfBkqfZ-IK9Qj-05NivD3wDqETnKKsPW5p0vSb_ImAKQG8B2RDxDK10bBkN3Iy3B2To1S0Cn2d49SLVvNMKE28D50eJVYgFWx9Z2lRXp2P_59cc/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq2EWK9fT3MsL2mQlAh4dPmrR8jceeskfWB4Da9U5ouMdE6tojzSQ_FDWLVjR9eU1AqwktxmKcWsh6xXHXyIBs4b1Xk66ebZ4nvuDECrzcCAmnHte11PhvIlSNHSOse2uc4ShfwB3prc/) 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; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
දැන් images දානකොට new post ගිහින් edit html යන්න.. ඊට පස්සේ මෙහෙම දාන්න
<div class="separator" style="clear: both; text-align: center;">
<a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a></div>
ගොඩක් Images දානකොට මෙහෙම දාලා
<div class="separator" style="clear: both; text-align: center;">
<a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a>
<a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a>
<a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a>
</div>
පස්සේ ඔය හිස් තැන් තියෙන තැන් ලං කරන්න..
<div class="separator" style="clear: both; text-align: center;">
<a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a><a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a><a href="ORGINAL IMAGE" imageanchor="1" rel="lightbox[ALBUM NAME]" style="margin-left: 1em; margin-right: 1em;" title="TITLE"><img alt="TITLE" border="0" height="96" src="SCREEN IMAGE" width="128" /></a>
</div>
මෙහෙම
ORGINAL IMAGE = ලොකු Image එක
SCREEN IMAGE = පොඩි Image එක
ALBUM NAME = ෆොටෝ ඇල්බම් එකේ නම
TITLE = ෆොටෝ එකේ නම
වැඩේ හරි... අපි ගියා..