Topics :

गुरुवार, जून 02, 2011

Home » » how to zoom your picture on your own blog

how to zoom your picture on your own blog

अपने ब्लॉग पर छोटी सी तस्वीर को बड़े प्रारूप में उसी पेज पर कैसे देखें फेसबुक की तरह
कुछ इस तरह से जैसा कि उपरोक्त इमेज में दिखाया गया है | जब आप इस इमेज पर कलिक करेंगे तो ये इमेज इसी पेज पर ज़ूम हो कर बड़े प्रारूप में दिखाई देगी | यही स्क्रिप्ट सिटी ज़लालाबाद डाट काम पर भी प्रयुक्त कि गयी है |
आप ने बहुत सी वेबसाइट पर देखा होगा कि किसी भी इमेज (तस्वीर) पर माउस पर कलिक करते हैं तो उसी पेज पर एक स्क्रीन उभरती है जिस में आप द्वारा माउस से कलिक की गयी इमेज बड़े प्रारूप में दिखाई देती है | उदाहरण के लिए आप "फेस बुक" की साईट पर किसी भी इमेज (तस्वीर) पर कलिक करते हैं तो उपरोक्त इमेज के अनुसार स्क्रीन उभरती है और वो इमेज (तस्वीर) बड़े प्रारूप में दिखाई देती है |


आप सभी जानते हैं कि इस तरह कि सुविधा किसी भी ब्लॉग पर उपलब्ध नहीं थी | मैं चाहता था कि इस तरह कि स्क्रिप्ट को अपने ब्लॉग पर प्रयुक्त किया जाये | क्योंकि इस स्क्रिप्ट के कुछ फायदे भी है | मन लीजिए कि आप कोई लेख लिख रहे हैं उस में काफी साडी इमेज का इस्तेमाल किया जाना है तब इस समस्या का साहमना करना पड़ता था कि ज्यादा इमेज (तस्वीर) लगाने से आपके ब्लॉग का वो पेज लोड होने में काफी वक्त लग जाता है व पेज भी काफी लंबा हो जाता है |

मैं भी चाहता था कि इस स्क्रिप्ट का प्रयोग अपने ब्लॉग पर किया जाये | इस की एक वजह भी थी कि मैंने अब से पहले जो भी लेख लिखे हैं उन में कुछ इमेज (तस्वीर) का प्रयोग किया गया है, जिसके करे उन लेखों में प्रयुक्त की गयी इमेज (तस्वीर) के कारण पेज की लम्बाई बढ़ गयी व पेज के लोड होने में भी वक्त ज्यादा लगने लगा, तब मन में विचार आया कि इस प्रैटीफोटो स्क्रिप्ट का इस्तेमाल अपने ब्लॉग पर किया जाये | इस स्क्रिप्ट को अपने ब्लॉग पर लगाने कि कोशिशें शुरू हुई | इस स्क्रिप्ट को अपने ब्लॉग पर लगाने के लिए काफी मशकत का साहमना करना पड़ा | इस स्क्रिप्ट को अपने ब्लॉग पर स्थापित करने की कोशिशों में तकरीबन पंद्रह दिन का समय बर्बाद हुआ | अंततः इस स्क्रिप्ट को स्थापित करने में सफलता मिल ही गयी |मेरे ख्याल से आप सभी ब्लॉग लिखने वाले भी इस स्क्रिप्ट का इस्तेमाल करना चाहते होंगे | मैं भी चाहता हूँ कि आप भी इस स्क्रिप्ट का इस्तेमाल अपने ब्लॉग पर करके अपने पेज कि बढ़ने वाली लम्बाई व पेज के लोड होने में लगने वाले समय को कम करना चाहते होंगे | निश्चित ही उत्तर हाँ में होंगा | इस स्क्रिप्ट को अपने ब्लॉग पर स्थापित करना जैसे मेरे लिए टेढ़ी खीर साबित हुआ वो मैं ही जानता हूँ |
मैं ये चाहता हूँ कि आप भी इस स्क्रिप्ट का इस्तेमाल कर सकें | इसे स्थापित करने का तरीका निम्नलिखित है :-

सबसे पहिले आप नीचे दिखाई दे रहे बाक्स में दिए गए कोड को कापी कर लें व इस के बाद डिज़ाइन पर कलिक करके "Edit HTML" पर कलिक करें (How to go to design view here)
/* Portfolio Start */
#folio {width:390px;overflow:hidden;margin-bottom:2px;}
.folio ul {float:left;width:685px;}
.portfolio p {color:#555;padding-bottom:5px;padding-top:5px;cursor:text;}
.portfolio { padding:0 0 20px; }
.gallery { padding:0 0 20px; }
#folio h2, #folio h2 a, #folio h2 a:visited {font: 16px/1.3em Arial, Helvetica, sans-serif;
color:#f60;padding-bottom:10px;}
#folio h2 a:hover {text-decoration: none;color: #222;}
#folio a.info {color:#428691;font-weight:400;font-size:10px;text-transform:uppercase;
padding-right:15px;}

.post-image { margin-bottom: 5px; }
/* Portfolio End */
/* images frame */
span.frame {border:1px solid #eaeaea;display:inline-block;
-moz-border-radius:4px 4px 0 0;
-webkit-border-bottom-right-radius:4px 4px 0 0;
-webkit-border-bottom-left-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;padding:0 !important;}

span.frame img {border:1px solid #fff;background:#eee;padding:3px;display:block;}
/* images frame end */

/* image hover */
.zoom, .video {display:block;cursor:pointer;}
a.zoom:hover {background:url(http://3.bp.blogspot.com/-seVNqVTvRrw/TeY4aYlVr_I/AAAAAAAAApQ/RqApPK39F_g/s1600/thumb-hover-zoom.png) center no-repeat;}
a.zoomleft:hover {background-image: url(http://cityjalalabad.com/images/thumb-hover-zoom_left.png) center no-repeat;}
a.video:hover {background:url(http://4.bp.blogspot.com/-Ue1eqAR20Fs/TeY4Z9moxsI/AAAAAAAAApM/9LdQxzoSsVs/s1600/thumb-hover-play.png) center no-repeat; }
.noborder {border:none !important; }
.gradient-box {background:#ededed url(http://cityjalalabad.com/images/gradient_bg1.jpg) repeat-x; }
.img-align {background-position: center;margin-left: 5px;}
/* image hover End */
उपरोक्त कोड को कापी करने के बाद "Edit HTML" पर कलिक करने के बाद "CTRl+F" कीज को एक साथ दबाएँ व फाइंड बक्से में निम्नलिखित अनुसार लिखे व एंटर बटन पर कलिक करें

इस उपरोक्त कोड के बिलकुल ऊपर उपरोक्त कापी किये हुए कोड को पेस्ट कर दें | अब आप यहाँ पर कलिक करके "Prettyphoto Script Code" को डाउनलोड कर ले व इसे नोटपैड पर खोलें | नोटपेड पर खोलने के बाद इस सारे कोड को भी के बिलकुल ऊपर पेस्ट कर दें | इस स्क्रिप्ट को आप यहाँ से भी कॉपी कर सकते हैं | इस स्क्रिप्ट के बिलकुल शुरू में < script type="text/css"> व अंत में </script>  लिखें |
div.light_rounded .pp_top .pp_left{background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -88px -53px no-repeat;}
div.light_rounded .pp_top .pp_left{background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -88px -53px no-repeat;}

div.light_rounded .pp_top .pp_middle{background:#fff;}

div.light_rounded .pp_top .pp_right{background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -110px -53px no-repeat;}

div.light_rounded .pp_content .ppt{color:#000;}
div.light_rounded .pp_content_container .pp_left,
div.light_rounded .pp_content_container .pp_right{background:#fff;}

div.light_rounded .pp_content{background-color:#fff;}
div.light_rounded .pp_next:hover{background: url(http://4.bp.blogspot.com/-lTfovk2zE4M/TeYKsaWSZKI/AAAAAAAAAnw/IDyENVks-QI/s1600/btnNext.png) center right no-repeat;
 cursor: pointer;
}div.light_rounded .pp_previous:hover{
 background: url(http://1.bp.blogspot.com/-hBK_9p6ZdrY/TeYKtEB76DI/AAAAAAAAAn0/xaOufU-TKHw/s1600/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}div.light_rounded .pp_expand{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}div.light_rounded .pp_expand:hover{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}div.light_rounded .pp_contract{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}div.light_rounded .pp_contract:hover{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}div.light_rounded .pp_close{
 width:75px;
 height:22px;
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}div.light_rounded #pp_full_res .pp_inline{color:#000;}div.light_rounded .pp_arrow_previous{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) 0 -71px no-repeat;
}div.light_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.light_rounded .pp_arrow_next{
 background-image: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png);
 background-repeat: no-repeat;
 background-position: -22px -71px;
}div.light_rounded .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}

div.light_rounded .pp_bottom .pp_left{
 background-image: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png);
 background-repeat: no-repeat;
 background-position: -88px -80px;
}div.light_rounded .pp_bottom .pp_middle{background:#fff;}div.light_rounded .pp_bottom .pp_right{
 background: url(http://1.bp.blogspot.com/-LrE2kgAiADU/TeYKn77Y8cI/AAAAAAAAAng/Yw3rdgOuP8c/s1600/sprite.png) -110px -80px no-repeat;
}div.light_rounded .pp_loaderIcon{
 background: url(http://3.bp.blogspot.com/-VxiRbTJldY8/TeYKoSV4oUI/AAAAAAAAAnk/fM4V7idTTYc/s1600/loader.gif) center center no-repeat;
}div.dark_rounded .pp_top .pp_left{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -88px -53px no-repeat;
}div.dark_rounded .pp_top .pp_middle{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat;
}div.dark_rounded .pp_top .pp_right{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -110px -53px no-repeat;
}div.dark_rounded .pp_content_container .pp_left{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat-y;
}div.dark_rounded .pp_content_container .pp_right{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top right repeat-y;
}div.dark_rounded .pp_content{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat;
}div.dark_rounded .pp_next:hover{
 background: url(http://3.bp.blogspot.com/-dzhVzZ2bBT4/TeX6uaZO3nI/AAAAAAAAAmk/9Mz5dUps3qg/s1600/btnNext.png) center right no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_previous:hover{
 background: url(http://4.bp.blogspot.com/-9Xv6yQmNinQ/TeX6unI-GnI/AAAAAAAAAmo/MHcnAlaRZgU/s1600/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_expand{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_expand:hover{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_contract{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_contract:hover{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}div.dark_rounded .pp_close{
 width:75px;
 height:22px;
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}div.dark_rounded .currentTextHolder{color:#c4c4c4;}div.dark_rounded .pp_description{color:#fff;}div.dark_rounded #pp_full_res .pp_inline{color:#fff;}div.dark_rounded .pp_arrow_previous{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -71px no-repeat;
}div.dark_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.dark_rounded .pp_arrow_next{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -22px -71px no-repeat;
}div.dark_rounded .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.dark_rounded .pp_bottom .pp_left{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -88px -80px no-repeat;
}div.dark_rounded .pp_bottom .pp_middle{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat;
}div.dark_rounded .pp_bottom .pp_right{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -110px -80px no-repeat;
}div.dark_rounded .pp_loaderIcon{
 background: url(http://1.bp.blogspot.com/-mzn64ijUg48/TeX6t377IFI/AAAAAAAAAmg/RLpqBaGaSq0/s1600/loader.gif) center center no-repeat;
}div.dark_square .pp_left ,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat;
}div.dark_square .currentTextHolder{color:#c4c4c4;}div.dark_square .pp_description{color:#fff;}div.dark_square .pp_loaderIcon{
 background: url(http://1.bp.blogspot.com/-mzn64ijUg48/TeX6t377IFI/AAAAAAAAAmg/RLpqBaGaSq0/s1600/loader.gif) center center no-repeat;
}div.dark_square .pp_content_container .pp_left{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top left repeat-y;
}div.dark_square .pp_content_container .pp_right{
 background: url(http://1.bp.blogspot.com/-iRTRYgTJ9VY/TeX6vKWTujI/AAAAAAAAAms/hHl6cE2py8Y/s1600/contentPattern.png) top right repeat-y;
}div.dark_square .pp_expand{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}div.dark_square .pp_expand:hover{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}div.dark_square .pp_contract{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}div.dark_square .pp_contract:hover{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}div.dark_square .pp_close{
 width:75px;
 height:22px;
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}div.dark_square #pp_full_res .pp_inline{color:#fff;}div.dark_square .pp_arrow_previous{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) 0 -71px no-repeat;
}div.dark_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.dark_square .pp_arrow_next{
 background: url(http://1.bp.blogspot.com/-pNg94UKiK-c/TeX6tqwNonI/AAAAAAAAAmc/7yPl6u5fy3Y/s1600/sprite.png) -22px -71px no-repeat;
}div.dark_square .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.dark_square .pp_next:hover{
 background: url(http://3.bp.blogspot.com/-dzhVzZ2bBT4/TeX6uaZO3nI/AAAAAAAAAmk/9Mz5dUps3qg/s1600/btnNext.png) center right no-repeat;
 cursor: pointer;
}div.dark_square .pp_previous:hover{
 background: url(http://4.bp.blogspot.com/-9Xv6yQmNinQ/TeX6unI-GnI/AAAAAAAAAmo/MHcnAlaRZgU/s1600/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}div.light_square .pp_left ,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content{background:#fff;}div.light_square .pp_content .ppt{color:#000;}div.light_square .pp_expand{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}div.light_square .pp_expand:hover{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}div.light_square .pp_contract{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}div.light_square .pp_contract:hover{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}div.light_square .pp_close{
 width:75px;
 height:22px;
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}div.light_square #pp_full_res .pp_inline{color:#000;}div.light_square .pp_arrow_previous{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) 0 -71px no-repeat;
}div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}div.light_square .pp_arrow_next{
 background: url(http://2.bp.blogspot.com/-D-KgCxe86Yg/TeYKtsVpJuI/AAAAAAAAAn4/D-c9GEFmFPw/s1600/sprite.png) -22px -71px no-repeat;
}div.light_square .pp_arrow_next.disabled{background-position: -22px -87px;cursor:default;}div.light_square .pp_next:hover{
 background: url(http://4.bp.blogspot.com/-lTfovk2zE4M/TeYKsaWSZKI/AAAAAAAAAnw/IDyENVks-QI/s1600/btnNext.png) center right no-repeat;
 cursor: pointer;
}div.light_square .pp_previous:hover{
 background: url(http://1.bp.blogspot.com/-hBK_9p6ZdrY/TeYKtEB76DI/AAAAAAAAAn0/xaOufU-TKHw/s1600/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}div.facebook .pp_top .pp_left{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -88px -53px no-repeat;
}div.facebook .pp_top .pp_middle{
 background: url(http://1.bp.blogspot.com/-uSOb9xLMzzY/TeYKltuUgZI/AAAAAAAAAnc/yCd9d5gyw3M/s1600/contentPatternTop.png) top left repeat-x;
}div.facebook .pp_top .pp_right{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -110px -53px no-repeat;
}div.facebook .pp_content .ppt{color:#000;}div.facebook .pp_content_container .pp_left{
 background: url(http://3.bp.blogspot.com/-rggc9AlrcD0/TeYKkyuwIJI/AAAAAAAAAnU/dt_KiKI2_cs/s1600/contentPatternLeft.png) top left repeat-y;
}div.facebook .pp_content_container .pp_right{
 background: url(http://2.bp.blogspot.com/-6UIW1W3UwZ8/TeYKlOY7-iI/AAAAAAAAAnY/tTwvAQmiLno/s1600/contentPatternRight.png) top right repeat-y;
}div.facebook .pp_content{background:#fff;}div.facebook .pp_expand{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -31px -26px no-repeat;
 cursor: pointer;
}div.facebook .pp_expand:hover{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -31px -47px no-repeat;
 cursor: pointer;
}div.facebook .pp_contract{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) 0 -26px no-repeat;
 cursor: pointer;
}div.facebook .pp_contract:hover{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) 0 -47px no-repeat;
 cursor: pointer;
}div.facebook .pp_close{
 width:22px;
 height:22px;
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -1px -1px no-repeat;
 cursor: pointer;
}div.facebook #pp_full_res .pp_inline{color:#000;}div.facebook .pp_loaderIcon{
 background: url(http://2.bp.blogspot.com/-BmcBFus6MRY/TeYKhAtoDvI/AAAAAAAAAnA/aQZ5eE8qTe0/s1600/loader.gif) center center no-repeat;
}div.facebook .pp_nav .pp_arrow_previous{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) 0 -71px no-repeat;
 height:22px;
 margin-top:0;
 width:22px;
}div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default;}div.facebook .pp_nav .pp_arrow_next{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -32px -71px no-repeat;
 height:22px;
 margin-top:0;
 width:22px;
}div.facebook .pp_arrow_next.disabled{background-position: -32px -96px;cursor:default;}div.facebook .pp_nav{margin-top:0;}div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px;}div.facebook .pp_next:hover{
 background: url(http://1.bp.blogspot.com/-nYMUpgCkfag/TeYKjnQWndI/AAAAAAAAAnI/qp0jPZo2eic/s1600/btnNext.png) center right no-repeat;
 cursor: pointer;
}div.facebook .pp_previous:hover{
 background: url(http://1.bp.blogspot.com/-8dHKBeq7-t4/TeYKj4H4oaI/AAAAAAAAAnM/rczcfmns59w/s1600/btnPrevious.png) center left no-repeat;
 cursor: pointer;
}div.facebook .pp_bottom .pp_left{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -88px -80px no-repeat;
}div.facebook .pp_bottom .pp_middle{
 background: url(http://2.bp.blogspot.com/-lTRh0bjF0LM/TeYKkUOoOiI/AAAAAAAAAnQ/c3v0qJCcMnE/s1600/contentPatternBottom.png) top left repeat-x;
}div.facebook .pp_bottom .pp_right{
 background: url(http://2.bp.blogspot.com/-QTLPLTFTWPk/TeYKjNjjPyI/AAAAAAAAAnE/AANwkVSieiA/s1600/sprite.png) -110px -80px no-repeat;
}div.pp_pic_holder a:focus{outline:none;}div.pp_overlay{background:#000;display: none;left:0;position:absolute;top:0;width:100%;z-index:9500;}div.pp_pic_holder{display: none;position:absolute;width:100px;z-index:10000;}.pp_top{height:20px;position: relative;}* html .pp_top{padding:0 20px;}.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px;}.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px;}* html .pp_top .pp_middle{left:0;position: static;}.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}.pp_content{height:40px;}.pp_content .ppt{left:auto;margin-bottom:5px;position: relative;top:auto;}.pp_fade{display: none;}.pp_content_container{position: relative;text-align: left;width:100%;}.pp_content_container .pp_left{padding-left:20px;}.pp_content_container .pp_right{padding-right:20px;}.pp_content_container .pp_details{margin:10px 0 2px 0;}.pp_description{display: none;margin:0 0 5px 0;}.pp_nav{clear: left;float: left;margin:3px 0 0 0;}.pp_nav p{float: left;margin:2px 4px;}.pp_nav a.pp_arrow_previous,.pp_nav a.pp_arrow_next{display:block;float: left;height:15px;margin-top:3px;overflow: hidden;text-indent: -10000px;width:14px;}.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000;}a.pp_next{
 background: url(http://3.bp.blogspot.com/-KJDUcVcxwjc/TeYKo9lf_2I/AAAAAAAAAno/kTW31et4h0Q/s1600/btnNext.png) 10000px 10000px no-repeat;
 display:block;
 float: right;
 height:100%;
 text-indent: -10000px;
 width:49%;
}a.pp_previous{
 background: url(http://3.bp.blogspot.com/-KJDUcVcxwjc/TeYKo9lf_2I/AAAAAAAAAno/kTW31et4h0Q/s1600/btnNext.png) 10000px 10000px no-repeat;
 display:block;
 float: left;
 height:100%;
 text-indent: -10000px;
 width:49%;
}a.pp_expand,a.pp_contract{cursor: pointer;display: none;height:20px;position:absolute;right:30px;text-indent: -10000px;top:10px;width:20px;z-index:20000;}a.pp_close{display:block;float: right;text-indent: -10000px;}.pp_bottom{height:20px;position: relative;}* html .pp_bottom{padding:0 20px;}.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px;}.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px;}* html .pp_bottom .pp_middle{left:0;position: static;}.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}.pp_loaderIcon{display:block;height:24px;left:50%;margin: -12px 0 0 -12px;position:absolute;top:50%;width:24px;}#pp_full_res{line-height:1 !important;}#pp_full_res .pp_inline{text-align: left;}#pp_full_res .pp_inline p{margin:0 0 15px 0;}div.ppt{color:#fff;display: none;font-size:17px;left:0;position:absolute;top:0;z-index:9999;}.clearfix:after{content: ".";display:block;height:0;clear:both;visibility: hidden;}.clearfix {display: inline-block;}* html .clearfix {height:1%;}.clearfix {display:block;}
 
अब इस निम्नलिखित कोड को कापी करें
<!---------------PrettyPhoto JS Start--------------->
<script src="http://cityjalalabad.com/js/jquery.js" type="text/javascript"></script>
<script src="http://cityjalalabad.com/images/prettyphoto.css/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://cityjalalabad.com/images/prettyphoto.css/custom.js" type="text/javascript">
</script>
<!---------------PrettyPhoto JS Start--------------->
अब आप सेटिंग पर कलिक करें >>> उस के बाद फार्मेटिंग पर क्लिक करने के बाद पेज को स्क्रोल करते हुए नीचे कि तरफ आएं | यहाँ पोस्ट टेम्पलेट के साहमने वाले बक्से में इस कोड को पेस्ट कर दें व सेव सेटिंग पर कलिक कर दें |
ऐसा करने से जब भी आप न्यू पोस्ट पर कलिक करेंगे ये जावा स्क्रिप्ट आपको उस पोस्ट में पहले से लिखी हुई मिलेंगी | ये जावा स्क्रिप्ट आपकी पोस्ट पर इमेज को ज़ूम करने के लिए जरूरी हैं |
अब इस निम्नलिखित कोड को पेज पर पेस्ट करें व जहाँ पर नीले रंग में "इमेज लिंक पेस्ट करें" लिखा है उस जगह "इमेज लिंक पेस्ट करें" की दोनों जगह पर एक सा इमेज जो आप अपने पेज पर दिखाना चाहते हैं उस इमेज का लिंक पेस्ट कर दें | उदाहरण के लिए मैंने दो बार इस कोड को नीच लिखा है एक बार बिना इमेज लिंक के व दूसरी बार इमेज लिंक के साथ | जहाँ पर आपको इमेज दिखाई दे रही हैं वहां पर आप किसी भी इमेज पर जब माउस को ले कर जायेंगे तो उस इमेज पर एक ज़ूम लेन्ज की हलकी से इमेज दिखाई देगी | जब आप इस इमेज पर कलिक करेंगे तो ये इमेज इस प्रकार से ज़ूम हो कर दिखाई देगी:-


<div id="folio">
<table border="0" style="width: 430px;"><tbody>
<tr>  <td class="portfolio"><a class="img_link zoom " href="इमेज लिंक पेस्ट करें" rel="prettyPhoto[gallery]" title=""> <span class="frame post-image"> <img alt=""src="इमेज लिंक पेस्ट करें" width="50"  height="50" /></span></a></td> </tr>
</tbody></table>
</div>

hand_imageयदि आपको ये लेख पसंद आये तो कृपया टिप्पणी जरूर करें |

Share this post :

0 comments:

एक टिप्पणी भेजें

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |