आपने ब्लॉग पर "Image Panner and Zoomer v1.1" स्क्रिप्ट कैसे लगाएं

आप को नीचे एक तस्वीर दिखाई दे रही है | आप इस तस्वीर ज़ूम बटन पर कलिक करके इस तस्वीर को "1x, 2x, 3x,4x" तक ज़ूम करके देख सकते है | क्या हुआ, तस्वीर "4x" तक ज़ूम हो गई | जी हां | आप इस ट्रिक्स से तस्वीर के किसी भी हिस्से पर माउस के लेफ्ट बटन को दबा कर माउस को घुमा कर तस्वीर के किसी भी हिस्से को ज़ूम कर के देख सकते है | बस ! यही ट्रिक्स आज आपको बताई जा रही है | प्रयोग करने में बहुत ही आसान |

एक उदाहरण नीचे देखिए

एक और उदाहरण नीचे देखिए

तीसरा उदाहरण, यदि आप निम्न तस्वीर की तरह ज़ूम बटन का प्रयोग नहीं करना चाहते तो इस प्रकार माउस से तस्वीर को दबा कर माउस को इधर उधर कर के तस्वीर के बड़े प्रारूप को देख सकते हैं | इस प्रकार आप अपने पैराग्राफ के साथ तस्वीर को छोटे रूप में मगर बड़ी तस्वीर को दिखा सकते हैं |

पहला स्टेप आप ने पहली उदाहरण में दिखाई दे रही तस्वीर का लिंक बदल अपनी तस्वीर का लिंक लगाना है | आपने जहाँ पर src=" " के बीच में मेरे द्वारा उपरोक्त तस्वीरों को लगाये गए लिंक से आपको अपने लिंक में बदलना है | आप तस्वीर के कोड को नीचे के बॉक्स में देख सकते हैं | इस तस्वीर को लगाने में ध्यान योग्य बात ये है की अप जिस साइज के तस्वीर अपने ब्लॉग में लगाना चाहते है उस तस्वीर से बड़ी तस्वीर का लिंक निम्न कोड में बदलें
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:410px; height:300;float:left;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHsJRelrkej6U8BB4A8EqWUsE_4mbkFp4D94f6qoIAIhVAyqwo1FA3q3u6dTda8Ld-HRPyu9aguxTuNpywLxhI_IUu_5TfvaZz5LIysnJsyd2WtNnqQPIccvcOS7ypY_5l1yqc2ahS4-4H/s1600/malika.jpg" style="width:410px; height:300px" /> </div>

दूसरा स्टेप उपरोक्त अनुसार ही आप दूसरी तस्वीर का कोड बदलें <div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:350px; height:200px;float:left"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJMuzkXDoMuOe6iegmS0n0vTSR_cPv9C78BWoBBLLzJUMX5BuO1QvOFtVpo5Oi57Q22Uj0kD0tcU2iGpg95c1SqgSoLlSc8rlWocT2_bTLhdZLvxNQdpI6OTwSszWOsBuDlbTZ9vU7d9e/s1600/Ashvariya.jpg" style="width:700px; height:525px" /> </div>

तीसरा स्टेप उपरोक्त अनुसार ही आप तीसरी तस्वीर का कोड बदलें <div class="pancontainer" data-orient="center" style="width:300px; height:225px;float:left;margin-left:15px"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJOgKLGHFV6QqFkcXhXDke33GAjqR0bCCwDXDGoY4BF-ALLNb3OFbrGrj-i2GsrGORRFSlYVBrDOATkqRuZz6W7Tr0emrNw1V8E-wda0xRxXDytaZd2lqVFHBAVvCl5dRnr2w6jj8JUuu/s1600/riyasen.jpg" style="width:1024px; height:768px" />

चौथा स्टेप अब आपको निम्नलिखित कोड कापी करके इसी पेज पर ही सबसे अंत में पेस्ट करना है
<style type="text/css"> .pancontainer{position:relative; overflow:hidden; width:300px;height:300px;border:1px solid black;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://tipshindimein.googlecode.com/files/imagepanner.js"></script>

यदि आपने ये सब आसानी से कर लिया तो इमेज पैनर एंड जूमर कोड सफलतापूर्वक आपके ब्लॉग पर स्थापित हो गया है | बधाई स्वीकार करें | आपने देखा की ये स्क्रिप्ट लगाने में कितनी आसान है कहीं "Edit HTML" पर जाने की जरूरत नहीं | कहीं पर ब्लॉग का बैकअप लेने की जरूरत नहीं | यदि आप किसी अन्य पेज पर भी इस स्क्रिप्ट को इस्तेमाल करना चाहते हैं तो इस पेज को एडिट पर जाकर "CTRL+A" कर के इस पेज के सारे कोड को कापी कर लें व उस पेज पर पेस्ट कर दें | बस अब इस कोड में से आपको नया टेक्स्ट व सिर्फ तस्वीरों के लिंक बदलने हैं | कोई झंझट नहीं | किसी भी प्रकार की मुश्किल पेश आने पर मुझ से संपर्क करें |

यदि आपको ये लेख पसंद आये तो कृपया टिप्पणी जरूर करें | (किसी भी मुश्किल दरवेश होने पर आप मुझसे संपर्क करें)