உங்கள் பதிவில் Jquery பயன்படுத்தி படங்காட்டுங்கள்

உங்கள் வலைபதிவில் உள்ள படங்களை Jquery மூலமாக preview காணும் முறையை இன்று உங்களுக்கு விளக்க இருக்கிறேன். இதை கொண்டு உங்கள் தளத்தில் உள்ள படங்களை மெருகூட்டி படங்காட்டுவது உங்கள் பொறுப்பு. ஆனா எப்பவும் நீங்க சில தகிடுதத்த வேலைகளை செய்ய நிறைய பழகனும். எப்பவும் கோடிங் குடுத்தா காபி செய்து மட்டும் போட்டால் போதும் உடனே வலைப்பூவில் எல்லாம் நடக்கனும்னு நினைக்கறது ரொம்ப தப்பு. சில டெக்னிகல் விஷயங்களையும் நீங்க கத்துக்கணும். நீங்க என்னோட வலைபூவ தொடர்ந்து படிச்சா உங்களையும் தொழில்நுட்ப விஷயங்களில் பெரிய கிரிமினல்னு (ஹி ஹி ) மத்தவங்களை சொல்ல வைக்கிறேன்.இந்த படத்தை கிளிக் செய்யாமல் மௌஸ் கர்சரை படத்தின் மீது நகர்த்தவும்.

உங்க பதிவிலும் இதை செய்ய நீங்க செய்ய வேண்டியது இது தான்...

1. dashboard--> layout- -> Edit HTML

2. இதில் </head> என்பதை கண்டுபிடித்து கீழ்காணும் கோடிங்கை அதன் மேலே காபி செய்யவும். அதாவது </head> என்பதற்கு மேலே.

<script src='http://pixsathish.googlecode.com/files/jqueryimagepreview1.js' type='text/javascript'/>

<script src='http://pixsathish.googlecode.com/files/jqueryimagepreview2.js' type='text/javascript'/>


<style>
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>

4. இப்போது டெம்ப்ளேட்டை சேவ் செய்து கொள்ளுங்கள்

5. இனிமேல் தான் வேலையே இருக்கு. கீழே உள்ள கோடிங் தான் நீங்க புரிஞ்சுக்க வேண்டிய கான்செப்ட்.

<a href="Large-Image-Address" class="preview" title="Image-Title"><img src="Small-Image-Address" alt="gallery thumbnail" /></a>

இதில் Large Image address என்பது ஒரிஜினல் போடோவின் URL Address.
Image Title என்பது போடோவிற்கு நீங்கள் கொடுக்கும் கமெண்ட்.
Small Image Address என்பது pathivil நீங்கள் சிறியதாய் காட்டும் போடோவின் URL Address

<a class="preview" height="768" href="http://4.bp.blogspot.com/-3PQ0WaGDx2Q/TVOqJ5MsS5I/AAAAAAAAHPI/Q42MHTwJVB8/s320/love-to-drink-bottle-31000.jpg" linkindex="66" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="இதான்லே சரக்கு பாட்டிலு.. இதுக்கு பேரு தான்லே Jquery எபெக்டு" width="1024"><img alt="gallery thumbnail" height="250" src="http://4.bp.blogspot.com/-3PQ0WaGDx2Q/TVOqJ5MsS5I/AAAAAAAAHPI/Q42MHTwJVB8/s320/love-to-drink-bottle-31000.jpg" width="320" /></a>

இந்த படத்தின் மேலே கிளிக் செய்ய வேண்டியது இல்லை. மௌஸ் கர்சரை படத்தின் மேலே நகர்த்தினாலே போதும்.கிளிக் செய்தால் ஓபன் ஆவது கூட  Jquery முறைதான். அதை அடுத்த பதிவில் விளக்குகிறேன்.



.