உங்கள் வலைபதிவில் உள்ள படங்களை Jquery மூலமாக preview காணும் முறையை இன்று உங்களுக்கு விளக்க இருக்கிறேன். இதை கொண்டு உங்கள் தளத்தில் உள்ள படங்களை மெருகூட்டி படங்காட்டுவது உங்கள் பொறுப்பு. ஆனா எப்பவும் நீங்க சில தகிடுதத்த வேலைகளை செய்ய நிறைய பழகனும்.
எப்பவும் கோடிங் குடுத்தா காபி செய்து மட்டும் போட்டால் போதும் உடனே வலைப்பூவில் எல்லாம் நடக்கனும்னு நினைக்கறது ரொம்ப தப்பு. சில டெக்னிகல் விஷயங்களையும் நீங்க கத்துக்கணும். நீங்க என்னோட வலைபூவ தொடர்ந்து படிச்சா உங்களையும் தொழில்நுட்ப விஷயங்களில் பெரிய கிரிமினல்னு (ஹி ஹி ) மத்தவங்களை சொல்ல வைக்கிறேன்.இந்த படத்தை கிளிக் செய்யாமல் மௌஸ் கர்சரை படத்தின் மீது நகர்த்தவும்.
உங்க பதிவிலும் இதை செய்ய நீங்க செய்ய வேண்டியது இது தான்...
1. dashboard--> layout- -> Edit HTML
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJC58xK6qXnf4Dsg1WFAcA0iTy8cEMX79_pKJglCOQOU8kFaM_kMUcwikfJFqJXmGtw0sOQtXFx7rwebREEy5hmyo2D7Z7xJ0QhyJkxZsJlGMIKt7P0H1VnoURKBh9pnFItqd7RkcpVEV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJC58xK6qXnf4Dsg1WFAcA0iTy8cEMX79_pKJglCOQOU8kFaM_kMUcwikfJFqJXmGtw0sOQtXFx7rwebREEy5hmyo2D7Z7xJ0QhyJkxZsJlGMIKt7P0H1VnoURKBh9pnFItqd7RkcpVEV/s320/love-to-drink-bottle-31000.jpg" width="320" /></a>
இந்த படத்தின் மேலே கிளிக் செய்ய வேண்டியது இல்லை. மௌஸ் கர்சரை படத்தின் மேலே நகர்த்தினாலே போதும்.கிளிக் செய்தால் ஓபன் ஆவது கூட Jquery முறைதான். அதை அடுத்த பதிவில் விளக்குகிறேன்.
.
Discussions
.
// நீங்க என்னோட வலைபூவ தொடர்ந்து படிச்சா உங்களையும் தொழில்நுட்ப விஷயங்களில் பெரிய கிரிமினல்னு (ஹி ஹி ) மத்தவங்களை சொல்ல வைக்கிறேன்.///
---------------Sathish
மகராசனுக்கு எத்தன பெரிய மனசு. சீக்கிரம் கல்யாணம் ஆகட்டும். :))))
நா இனிமே தவறாம வருவேன்.
இதுபோன்ற தெழில் நுட்பங்களை தெரிந்து கொள்வதில் ஆர்வம் அதிகம்
அட ஆமா .. சரி உங்க ப்ளாக் படிச்சிட்டுதான் இருக்கேன் . அதனால நானும் கொஞ்சம் விசயம் தெரிஞ்சிக்கிறேன் .. ஹி ஹி
Useful one.. Thanks
ரொம்ப நல்ல விஷயம் சொல்லியிருக்கிங்க.. பயனுள்ள பதிவு...
நன்றி பகிர்ந்தமைக்கு ..முயற்ச்சித்து விட்டு வருகிறேன்
ஆ சூப்பர் .....
இவ்வாறு செய்தால் எல்ல படங்களுக்கும் ஆட்டோ மேடிக்கா வருமா?
கண்டிப்பா வாங்க மாணிக்கம்.
thanks hariharan.. the same thing only im going to do for next post.. but already you know means, i'll ignore that post to publish... :-)
hanks ilango, sakthistudycenter,sudharsan, muthuvel
கண்டிப்பா வரும் speed master.. ட்ரை பண்ணுங்க ..நன் முயற்சி செஞ்சதால் தன உங்களுக்கும் சொல்றேன்... இதுல என்ன ஒரு கஷ்டம்னா ஒவ்வொரு படத்துக்கும் இந்த கோடிங்க கொடுக்கணும்..ஆனா முக்கியமான படம்னு நாம நினச்சா மட்டும் கொடுத்த போதும்.. எல்லா படங்களுக்கும் இதை கொடுக்கவேண்டிய அவசியமில்லைன்னு நினைக்கறேன்..
//கோமாளி செல்வா said...
அட ஆமா .. சரி உங்க ப்ளாக் படிச்சிட்டுதான் இருக்கேன் . அதனால நானும் கொஞ்சம் விசயம் தெரிஞ்சிக்கிறேன் .. ஹி ஹி //
நிசமா சொல்லு கொஞ்சமா தான் தெரிஞ்சுக்கரியா
நன்றி சார் முயற்சிக்கிறேன்
///இந்த படத்தின் மேலே கிளிக் செய்ய வேண்டியது இல்லை. மௌஸ் கர்சரை படத்தின் மேலே நகர்த்தினாலே போதும்.கிளிக் செய்தால் ஓபன் ஆவது கூட Jquery முறைதான். அதை அடுத்த பதிவில் விளக்குகிறேன்///
ஹரிஹரன் ஏற்கனவே அது பற்றிய லிங்க் கொடுத்துருக்காரு.அதுனால நானும் அதை திரும்ப எழுத விரும்பல.. அடுத்த பதிவு, உங்க வலைபதிவு வேகமா லோட் ஆக ஒரு முக்கியமான அல்லது முடிஞ்சா செய்ய வேண்டிய ஒரு சின்ன வேலைதான்... ஓரிரு தினங்களில் அதையும் பதிவிடுகிறேன்..
attach an id or style class attribute to <img> tag
and attach the preview concept as a onload functionality with CSS selector. you dont have to code with each image
ya offcourse..sure ...i'll try my best...
Thank you.
அடேங்கப்பா.. அண்ணன் சதீஷ் செம சரக்குப்பார்ட்டிடோய்
hi na free 3G GPRS use panna mudiuma na...... ple tell me