உங்கள் வலைப்பூக்களில் படங்களை இணைப்புக் கொடுக்கும் போது அவற்றின் மேலே வாசகர்கள் சொருகினால் அந்தப் படம் அதே பக்கத்தில் காணக்கூடியதாக இருக்கும். அதாவது அவை ஏற்கனவே loadஆகி இருக்கின்ற பகுதியை மாற்றிவிடும். வாசகர்கள் மீண்டும் ஒருமுறை பழைய பக்கத்தைப் பார்க்க வேண்டும் என்றால் பின்செல்ல வேண்டியிருக்கும். இதனால் வாசகர்கள் சிறிய சிரமத்தை எதிர்கொள்ள நேர்கின்றது. எனவே இதுபற்றி இணையத்தில் சிறிது தேடியதில் நல்ல பயனுள்ள விடையம் ஒன்று கண்ணிற் பட்டது.
அதாவது படங்களின் மேலே கிளிக் செய்து அவற்றின் உருப்பெருத்த படத்தினை வாசகர்கள் பார்க்க இலகுவாக வழிசமைத்துக் கொடுக்கின்றது அந்த முறை. படங்களின் மேலே கிளிக் செய்யும் போது அவை முன்னதைப் போல் load ஆகாமல் ஏற்கனவே கணணி நினைவகத்தில் தரையிறங்கியுள்ள படத்தினை உருப்பெருத்துக் காட்டுகின்றது. எனவே பக்கத்தினை மீளவும் loading செய்ய வேண்டியிருக்காது. பார்ப்பதற்கு சற்று வித்தியாசமாகவும் அழகாகவும் தோன்றும்.
அதற்கான வழிமுனையினை இங்கே தருகின்றேன்.
உங்கள் வலைப்பூவின் Layout பகுதிக்குச் சென்று அங்கே Edit HTML பகுதிக்குச் செல்லவும். அங்கே </body> tag இற்கு மேலே பின்வரும் பகுதியை ஒட்டி விடுங்கள்.
<!-- Start Popup Image loading open script -->
<!-- Loading from shauom -->
<script src='http://shauom.googlepages.com/PopUnchal.js'
type='text/javascript' /><!-- End of Script -->
[ பிற்குறிப்பு : </body> tag இன் மேல் ஒட்டிவிடுவதால் உங்கள் வலைப்பூவின் பக்கங்கள் load ஆவதினை இந்த script தாக்கம் செலுத்துவது தெரியாதது. ]
பின்னர் உங்கள் வலைப்பூவின் CSS style வரையறுக்கப் பட்டுள்ள பகுதியில் எங்காவது பின்வரும் பகுதியை ஒட்டிவிடுங்கள்.
/* ---( Popup Unchal defaults css )--- */
.PopBoxImageSmall { cursor: pointer; cursor:
url("http://shauom.googlepages.com/zoom_in.png"), pointer; }
.PopBoxImageLarge { cursor: pointer; cursor:
url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
.PopBoxImageShrink { cursor:
url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
இறுதியாக உங்கள் Templetஐ Save Templetஐச் சொருகி சேமித்துக் கொள்ளுங்கள்.
இனி நீங்கள் பதிவுகளை மேற்கொள்ளும் போது படங்களை இணைத்ததின் பின்னர் சிறிய மாற்றத்தை coding இல் செய்தால் போதும். உங்கள் வலைப்பூ அழகாக மாறிவிடும். சாதாரணமாக படங்கள் இணைத்ததின் பின்னர் அதன் HTML view பின்வருமாறு காணப்படும்.
<a onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="URL_TO_IMG.jpg">
<img style="margin: 0px auto 10px; display: block;
text-align: center;" src="URL_TO_IMG.jpg"
alt="" id="BLOGGER_PHOTO_ID_5141126967235467890"
border="0" />
</a>
இதில் நீங்கள் <a href> tag ஐ முழுமையாகத் தூக்கி விடுங்கள். பின்னர் </a> ஐயும் தூக்கி விடுங்கள். தற்போது img tag மாத்திரம் எஞ்சியிக்கும்.
அதில் நீங்கள்
class="PopBoxImageSmall" onclick="Pop(this,50,’PopBoxImageLarge’);"
என்னும் வரியினை img tag இனுள் சேர்த்து விடுங்கள்.
இவ்வாறு காணப்படும்.
<img style="margin: 0px auto 10px; display: block;
text-align: center;" src="URL_TO_IMG.jpg"
alt="" id="BLOGGER_PHOTO_ID_5141126967235467890"
border="0" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" />
இனி உங்கள் பதிவினை பிரசுரியுங்கள் போதும்.
[ பிற்குறிப்பு : சிலசமயங்களில் உங்கள் படம் பெரிதாக இருக்கும் போது google picasa அதற்குரிய thumble view என்னும் சிறிய அளவிலான படத்தினையே img tag இனுள் கொடுத்திருக்கும். ஒறிச்சினல் படத்திற்குரிய சொடுப்பு a href tag இனுள் காணப்படும். அவ்வாறு வேறுபடும் போது அதனை மாற்றியமைத்து பின்னர் img tag இனுள் உள்ள style attribute இனுள் width:60%; height:60%; என்பதனை இணைக்க வேண்டியிருக்கும். ]
Categories: அறிவியல்
தேடிச் சோறு நிதந் தின்று – பல
சின்னஞ்சிறு கதைகள் பேசி – மனம்
வாடித் துன்பமிக உழன்று – பிறர்
வாடப் பல செயல்கள் செய்து – நரை
கூடிக் கிழப் பருவமெய்தி – கொடுங்
கூற்றுக் கிரையெனப் பின்மாயும் – பல
வேடிக்கை மனிதரைப் போலே – நான்
வீழ்வே னென்று நினைத்தாயோ?
நின்னைச் சில வரங்கள் கேட்பேன் – அவை
நேரே இன்றெனக்குத் தருவாய் – என்றன்
முன்னை தீய வினை பயன்கள் – இன்னும்
மூளா அழிந்திடல் வேண்டும்.
இனி என்னை புதிய உயிராக்கி – எனக்கேதும்
கவலையரச் செய்து – மதி
தன்னை மிக தெளிவு செய்து – என்றும்
சந்தோஷம் கொண்டிருக்கச் செய்வாய்.
என்றும் சந்தோஷம் கொண்டிருக்கச் செய்வாய்…
நான் கூட இதனை பற்றி ஒரு பதிவு போடனும்னு நினைச்சன். நீங்க போட்டுட்டீங்க.
அருமை.. அருமை… சூப்பர் தல..!!
நான் கண்டிப்பா இதை அடுத்த பதிவில் யூஸ் பண்ணிடுறேன். 🙂
கலக்கல்! இன்னும் நிறைய டிப்ஸ் கொடுங்க தல.! 🙂
அருமையாக உள்ளது
//இனி நீங்கள் பதிவுகளை மேற்கொள்ளும் போது படங்களை இணைத்ததின் பின்னர் சிறிய மாற்றத்தை coding இல் செய்தால் போதும்//
ஒவ்வொரு முறையும் இதை செய்ய வேண்டுமா! அப்படி என்றால் நடைமுறையில் சிரமமாக இருக்குமே!
// ஒவ்வொரு முறையும் இதை செய்ய வேண்டுமா! அப்படி என்றால் நடைமுறையில் சிரமமாக இருக்குமே!
auto script கொடுக்கலாம், ஆனால் அது எல்லா படங்களையும் மாற்றிவிடும்.. 🙁
எனவே இந்த முறையில் தேவையான படங்களை மட்டும் இவ்வாறு மாற்றினாற் போதும்… 🙂
நன்றி ஹாலிவுட் பாலா .. 🙂
அருமை…கலக்கல்!!!!
@ பட்டாம்பூச்சி
நன்றி… நன்றி..
சுபானு தாங்கள் சொன்னது போல் முயற்சி செய்து பார்த்தேன் ஆனால் படத்தில் வைத்து சொடுக்கும் பொது படம் பெரிதாக மாறவில்லை , அதற்க்கு பதில் சற்று தள்ளி வேறு ஒரு இடத்திற்கு செல்கிறது , கரணம் புரியவில்லை , தங்களின் இந்த பதிவில் உள்ள விஷயம் எனக்கு மிகவும் பயனுள்ளதாக இருக்கும் ஆகவே இதை பற்றி எனக்கு விளக்கம் தாருங்கள் , நான் என்னுடைய படத்தின் html view இல் சரி செய்தபின் எனக்கு அந்த படத்தின் html view எப்படி தோன்றியது என்பதை கொடுத்துள்ளேன் , தவறுகள் நான் ஏதும் செய்துள்ளேனா , அப்படி இருந்தால் எப்படி சரி செய்வது என்பதை சொல்லுங்கள், நன்றி , பாலாஜி
html view:
img style="MARGIN: 0px auto 10px; WIDTH: 60%; CURSOR: hand; HEIGHT: 60%; TEXT-ALIGN: center" height="213" alt="" src="http://3.bp.blogspot.com/_Q1rNQLR1R38/R5VXey403JI/AAAAAAAAAEU/MajsOjm58Yk/s320/news.jpg" width="314" border="0" class="PopBoxImageSmall" onclick="Pop(this,50,'PopBoxImageLarge');"/
i removed the open < tag and close tag due to not accept the html tags in commend area in ur blog
சக்ஸஸ்.. சக்ஸஸ்..! 🙂
saravanabalaaji ..
You have specified the url to this image 'http://3.bp.blogspot.com/_Q1rNQLR1R38/R5VXey403JI/AAAAAAAAAEU/MajsOjm58Yk/s320/news.jpg' which is actually a small thumbnails view of that original image.
When you upload that image you can get the original image url from the < a href > tag. Then copy that url and past it inside the < img src='' > tag.
And also now you can set the WIDTH and HEIGHT to 60% if any width and height is already assigned.
That it.
Now publish your post.
When you click in to the img then it will zoom in and it will come in to the center of the window.
That it. IF you have further doubts on this work then fell free to mail me.
சூப்பரு… முயற்சி பண்ணி பார்க்கிறேன்… 🙂
ya, now my problem solved, thank u very much
ya my problem solved, thank u very much,
saravanabalaaji
DEAR SUBANU,
I HAVE PASTED THE FIRST CODE ABOVE
body
O.K
//பின்னர் உங்கள் வலைப்பூவின் CSS style வரையறுக்கப் பட்டுள்ள பகுதியில் எங்காவது பின்வரும் பகுதியை ஒட்டிவிடுங்கள்.
MY TEMPLATE DO NOT HAVE “CSS style”
SO WHERE TO PASTE THE CODE.
CAN YOU HELP ME
@ இராம்/Raam
நன்றி… முயற்சி செய்து பாருங்கள்… 🙂
@ RAJ
உங்களது temples இல்
< style type='text/css' >
/* —( Popup Unchal defaults css )— */
.PopBoxImageSmall { cursor: pointer; cursor: url("http://shauom.googlepages.com/zoom_in.png"), pointer; }
.PopBoxImageLarge { cursor: pointer; cursor: url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
.PopBoxImageShrink { cursor: url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
< /style >
ஒட்டிவிடுங்கள். இப்போது முயற்சிசெய்து பாருங்கள்.. இல்லையெனில் உங்களது templetsஐ எனக்கு அனுப்புங்கள். முயற்சிசெய்து பார்க்கலாம்.. 🙂
:-))
என் ப்ளாகில் div பயன்படுத்தி ஒரு உள் சாளரமே உண்டாக்கிவிட்டேன்.
உங்க பாணி இன்னும் நல்லா இருக்கும் போல இருக்கு! முயற்சி பண்ணி பாத்து சொல்றேன்!
நன்றீ!
நன்றி நண்பரே.
http://tvpravi.blogspot.com/2009/03/subanu-test.html
see this link and help me.
@செந்தழல் ரவி
Inside a CSS you don't need to rewrite the tag < style type= …>. So first remove that tag and the closing tag of that element. So now it is looks like as follows.
/* —( Popup Unchal defaults css )— */
.PopBoxImageSmall { cursor: pointer; cursor: url("http://shauom.googlepages.com/zoom_in.png"), pointer; }
.PopBoxImageLarge { cursor: pointer; cursor: url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
.PopBoxImageShrink { cursor: url("http://shauom.googlepages.com/zoom_out.png"), pointer; }
You uploaded only one image in this post. Isn't it? Then when you move the mouse pointer on the image then you can see a hand pointer, that is because inside your img tag there is a style attribute which having the style attributes for that image. So if you look that style attribute then you can see this following lines. 'cursor:pointer; cursor:hand;' . You could remove this line. Then only you can see the zooming pointer image instead of hand pointer.
Then you give the small thumble view of that image. So replace that image with this following img which is the big image. 'http://3.bp.blogspot.com/_uAJnbwUOhKQ/ScYMtFaifdI/AAAAAAAABK0/4dgybeMdyAE/s1600-h/DSC00623.JPG'.
Thats it try now.
நன்றி..
கொஞ்சம் நேரமெடுக்கும் என நினைக்கிறேன். அப்புறமா முயற்சி செய்து பார்க்கிறேன்.
உங்கள் வலைப்பூவின் CSS style
இங்கு தான் தகராறு.என்னுடைய வலைப்பக்கத்தில் CSS Style எங்கிருந்து ஆரம்பிக்கிறது என்று தெரியவில்லை.சரி என்று header hi h2… இருக்கும் பகுதியில் போட்டு சேமித்தால் படம் கிளிக் செய்யும் போது ஒரு கோணமாக போய் திரும்புகிறது(அதே அளவுடன்)- இதற்கு தீர்வு ஒரு பதிலில் சொல்லியபடி href யில் இருக்கும் படத்தின் பெயரை எடுத்துப்போட்டேன் அதுவும் சரியாகவில்லை.
எங்களை மாதிரி கற்றுக்குட்டிகளுக்கு புரிகிற மாதிரி CSS எங்கிருந்து ஆரம்பிக்கிறது என்று சொன்னால் நன்றாக இருக்கும்.இதை கேட்பதற்கு முன்பு CSS கட்டமைப்பை பற்றி கொஞ்சம் படித்து அதை வலைப்பூக்களுடன் இணைத்து குழம்பியது தான் மிச்சம்.
Good One,
ஆனா எனக்கு படம் அது size ல்தானே இருக்கு ???
இது என் img tag
img style=”margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 800px; height: 600px;” src=”http://hisubash.com/blogimgs/Fedora%2010%20instalation/1.jpg” alt=”” border=”0″ class=”PopBoxImageSmall” onclick=”Pop(this,50,’PopBoxImageLarge’);”
Now I got it,
awzum js.
thanks a lot
@Subash
நன்றி…
உங்களின் codes இல் இருக்கும் “cursor: pointer;“ பகுதியை நீக்கிவிடுங்கள்.. இன்னும் நன்றாக இருக்கும்… 🙂
மிக்க நன்றி தல
நல்ல தொழில்நுட்பம்…
This informative post helped me very much! Bookmarked your blog, very interesting categories everywhere that I see here! I like the information, thank you.