content top

2011-06-15

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(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; }
</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                     =  ෆොටෝ එකේ නම
වැඩේ හරි... අපි ගියා..

3 ප්‍රතිචාර:

සුළඟිල්ල | pinkie said...

:D :D එලැ එලැ.. අයියේ... (මං නම් පොටො ගන්නෙ නෑ. එත් ගන්න අදහසක් තියේ.. තම මෙවුව එකක් අරගෙනත් නෑ. මෙවුව එකක් අරගෙන කලාවට බැස්ස දවසට මේ ල්ඉපිය මට ගොඩාක් වැදගත් වේවි.. :D :D)

ADMIN | Malith Madushanka said...

Thanks Shana Me dewal gana apiata kiyala dunnata

කමල් said...

යාලුවා ලොකු දෙයක් ඔයා දන්න දේවල් අපිට කියනවට...අපි කවුරුත් ඉගෙන ගන්න අයනේ...සුභ අනාගතයක්.

Post a Comment

content top