Photo Blog එකක් කරන්න තියෙන ලස්සනම ක්‍රමය | Lightbox

කොහොමද යාලුවනේ? කාලෙකට පස්සේ මගේ අඩවියට ආවා... පොඩි ලිපියක් දාන්න කියලා.. මේ දවස් වල, පොඩි, (පොඩිත් නෑ) ෆොටෝ බ්ලොග් එකක් කරනවා.. http://photo.bluelagoonlanka.com/ මෙතනින් ගිහින් බලන්න.  මම දැක්කා අපේ යාලුවෝ ෆොටෝ බ්ලොග් කරනවා.  ඉතිං මේකට තියෙන ලස්සම ක්‍රමය මොකද්ද? හෙන ක‍ටු ගොඩක් කාලා මම මේකට ලස්සනම ක්‍රමය හෙව්වා.. දැන් මගේ බ්ලොග කොහොමද? මේ ක්‍රමේ Slow වෙන්නේ නෑ.. එලට වැඩ... අර Facebook එකේ එන්නේ Lightbox  Effect එක Image එකක් Click කරාම එන්නේ... ඒ වගේ...

දැන් ඉතිං බලන්නකෝ මං හදපු එකක්.. http://photo.bluelagoonlanka.com/2011/06/vil-uyana-rangirigama-sigiriya-part-02.html  ඒ වගේම මේකෙදි image copy  කරන්නත් බෑ. right click කරත්, image  එක ඕපන් වෙනවා. හරි අපි බලමු මේක හදාගන්නේ කොහොමද කියලා...

මුලිනම 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&gt;#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                     =  ෆොටෝ එකේ නම

වැඩේ හරි... අපි ගියා..