Popup image loading method

March 20, 2009

இணையம் என்னும் தோட்டத்தில் பூத்திருக்கும் உங்கள் வலைப்பூக்களை மேலும் அழகுபடுத்திப் பார்க்க வேண்டுமா.. ? அவ்வாறான ஒரு ஆர்வத்தில் எனது வலைப்பூவினை மேலும் அழகுற ஒழுங்கமைக்க எண்ணி சில வித்தியாசமான ஒழுங்கமைப்பு முறைகளை முயற்சித்துப் பார்த்தேன். அவற்றில் ஒன்றுதான் இந்த Popup image loading method (மன்னிக்கவும் இதற்குச் சரியான தமிழ்ப்பதம் தெரியவில்லை.)

உங்கள் வலைப்பூக்களில் படங்களை இணைப்புக் கொடுக்கும் போது அவற்றின் மேலே வாசகர்கள் சொருகினால் அந்தப் படம் அதே பக்கத்தில் காணக்கூடியதாக இருக்கும். அதாவது அவை ஏற்கனவே 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: அறிவியல்

29 comments

கார்த்திக் March 20, 2009 at 6:33 AM -

நான் கூட இதனை பற்றி ஒரு பதிவு போடனும்னு நினைச்சன். நீங்க போட்டுட்டீங்க.
ஹாலிவுட் பாலா March 20, 2009 at 7:07 AM -

அருமை.. அருமை… சூப்பர் தல..!!

நான் கண்டிப்பா இதை அடுத்த பதிவில் யூஸ் பண்ணிடுறேன். 🙂

கலக்கல்! இன்னும் நிறைய டிப்ஸ் கொடுங்க தல.! 🙂
கிரி March 20, 2009 at 7:10 AM -

அருமையாக உள்ளது

//இனி நீங்கள் பதிவுகளை மேற்கொள்ளும் போது படங்களை இணைத்ததின் பின்னர் சிறிய மாற்றத்தை coding இல் செய்தால் போதும்//

ஒவ்வொரு முறையும் இதை செய்ய வேண்டுமா! அப்படி என்றால் நடைமுறையில் சிரமமாக இருக்குமே!
சுபானு March 20, 2009 at 11:50 AM -

// ஒவ்வொரு முறையும் இதை செய்ய வேண்டுமா! அப்படி என்றால் நடைமுறையில் சிரமமாக இருக்குமே!

auto script கொடுக்கலாம், ஆனால் அது எல்லா படங்களையும் மாற்றிவிடும்.. 🙁
எனவே இந்த முறையில் தேவையான படங்களை மட்டும் இவ்வாறு மாற்றினாற் போதும்… 🙂
சுபானு March 20, 2009 at 12:08 PM -

நன்றி ஹாலிவுட் பாலா .. 🙂
பட்டாம்பூச்சி March 20, 2009 at 9:21 PM -

அருமை…கலக்கல்!!!!
சுபானு March 20, 2009 at 9:51 PM -

@ பட்டாம்பூச்சி
நன்றி… நன்றி..
saravanabalaaji March 20, 2009 at 11:38 PM -

சுபானு தாங்கள் சொன்னது போல் முயற்சி செய்து பார்த்தேன் ஆனால் படத்தில் வைத்து சொடுக்கும் பொது படம் பெரிதாக மாறவில்லை , அதற்க்கு பதில் சற்று தள்ளி வேறு ஒரு இடத்திற்கு செல்கிறது , கரணம் புரியவில்லை , தங்களின் இந்த பதிவில் உள்ள விஷயம் எனக்கு மிகவும் பயனுள்ளதாக இருக்கும் ஆகவே இதை பற்றி எனக்கு விளக்கம் தாருங்கள் , நான் என்னுடைய படத்தின் 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
ஹாலிவுட் பாலா March 21, 2009 at 12:41 AM -

சக்ஸஸ்.. சக்ஸஸ்..! 🙂
சுபானு March 21, 2009 at 1:30 AM -

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.
இராம்/Raam March 21, 2009 at 5:05 AM -

சூப்பரு… முயற்சி பண்ணி பார்க்கிறேன்… 🙂
SAFERETURNS March 21, 2009 at 6:25 AM -

ya, now my problem solved, thank u very much
SAFERETURNS March 21, 2009 at 6:26 AM -

ya my problem solved, thank u very much,
saravanabalaaji
RAJ March 21, 2009 at 7:13 AM -

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
சுபானு March 21, 2009 at 7:18 AM -

@ இராம்/Raam

நன்றி… முயற்சி செய்து பாருங்கள்… 🙂
சுபானு March 21, 2009 at 7:35 AM -

@ 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ஐ எனக்கு அனுப்புங்கள். முயற்சிசெய்து பார்க்கலாம்.. 🙂
திவா March 21, 2009 at 7:47 PM -

:-))
என் ப்ளாகில் div பயன்படுத்தி ஒரு உள் சாளரமே உண்டாக்கிவிட்டேன்.
உங்க பாணி இன்னும் நல்லா இருக்கும் போல இருக்கு! முயற்சி பண்ணி பாத்து சொல்றேன்!
நன்றீ!
ஆதிரை March 22, 2009 at 1:53 AM -

நன்றி நண்பரே.
செந்தழல் ரவி March 22, 2009 at 2:49 AM -

http://tvpravi.blogspot.com/2009/03/subanu-test.html

see this link and help me.
சுபானு March 22, 2009 at 5:49 AM -

@செந்தழல் ரவி

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.
சுபானு March 22, 2009 at 5:59 AM -

நன்றி..
ஊர் சுற்றி March 29, 2009 at 8:48 AM -

கொஞ்சம் நேரமெடுக்கும் என நினைக்கிறேன். அப்புறமா முயற்சி செய்து பார்க்கிறேன்.
வடுவூர் குமார் March 30, 2009 at 3:42 AM -

உங்கள் வலைப்பூவின் CSS style
இங்கு தான் தகராறு.என்னுடைய வலைப்பக்கத்தில் CSS Style எங்கிருந்து ஆரம்பிக்கிறது என்று தெரியவில்லை.சரி என்று header hi h2… இருக்கும் பகுதியில் போட்டு சேமித்தால் படம் கிளிக் செய்யும் போது ஒரு கோணமாக போய் திரும்புகிறது(அதே அளவுடன்)- இதற்கு தீர்வு ஒரு பதிலில் சொல்லியபடி href யில் இருக்கும் படத்தின் பெயரை எடுத்துப்போட்டேன் அதுவும் சரியாகவில்லை.
எங்களை மாதிரி கற்றுக்குட்டிகளுக்கு புரிகிற மாதிரி CSS எங்கிருந்து ஆரம்பிக்கிறது என்று சொன்னால் நன்றாக இருக்கும்.இதை கேட்பதற்கு முன்பு CSS கட்டமைப்பை பற்றி கொஞ்சம் படித்து அதை வலைப்பூக்களுடன் இணைத்து குழம்பியது தான் மிச்சம்.
Subash April 27, 2009 at 6:18 AM -

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’);”
Subash April 27, 2009 at 6:20 AM -

Now I got it,
awzum js.
thanks a lot
சுபானு April 27, 2009 at 7:07 AM -

@Subash
நன்றி…

உங்களின் codes இல் இருக்கும் “cursor: pointer;“ பகுதியை நீக்கிவிடுங்கள்.. இன்னும் நன்றாக இருக்கும்… 🙂
Subash April 28, 2009 at 10:50 AM -

மிக்க நன்றி தல
முனைவர்.இரா.குணசீலன் May 1, 2009 at 9:07 PM -

நல்ல தொழில்நுட்பம்…
jeff cavaliere September 6, 2010 at 3:44 PM -

This informative post helped me very much! Bookmarked your blog, very interesting categories everywhere that I see here! I like the information, thank you.

Popup image loading method

29 comments

Leave a Reply

நின்னைச் சில வரங்கள் கேட்பேன்

Archives