DIY : मिपावर प्रदर्शित करण्यासाठी साठी फोटोंचा स्लाईड शो तयार करणे. १

नमस्कार,

मिपावर लिखाण करताना काहीवेळा भरपूर फोटोंचा वापर करावा लागतो. विशेषतःभटकंती आणि पाककृतींच्या धाग्यांची तर ती गरजच असते. अशाप्रकारे जास्ती फोटोंचा समावेश असलेल्या धाग्यांची लांबी फारच वाढत असल्याने मोबाईल वर असे धागे वाचताना थोडा त्रास होतो.

नुकत्याच पूर्ण झालेल्या माझ्या ईजिप्त सोलोट्रीप: एक अविस्मरणीय अनुभव ह्या मालिकेतील चौथ्या भागात (थोडा हात आखडता घेऊन सुद्धा) १०० फोटो असल्याने, तो भाग मोबाईलवर वाचताना येणाऱ्या समस्येबद्दल श्री कंजूस ह्यांनी प्रतिसादात कळवले होते. त्यावर उपाय म्हणून पुढच्या भागांमध्ये मी स्लाईड शोज चा वापर केल्याने धाग्याची लांबीही आटोक्यात आली आणि त्यामुळे लेखांची शोभाही वाढल्याचे वाचकांनी प्रतिसादातून कळवले.

सर्वश्री अनिंद्य, अभ्या, दुर्गविहारी आणि कोमल ह्यांच्या सूचनेवरून ह्या लेखातून स्लाईड शो करण्याची माहिती देण्याचा प्रयत्न करत आहे.

साधारणपणे आडवा (Landscape) फोटो टाकायचा असेल तर मिपावर सध्या उपलब्ध असलेली सोय उपयुक्त आहे, त्यात फोटोची रुंदी आणि उंची पण सेट करता येते. परंतु फोटो जर उभा (Portrait) असेल तर रुंदी कमी केली तर तो डावीकडे दिसत असल्याने उजवीकडचा भाग मोकळा राहतो आणि पूर्ण रिझोल्युशन मध्ये दर्शवला तर फारच मोठा दिसतो आणि स्क्रोल करून बघावा लागतो.

सर्वप्रथम आपण एक एक फोटो उपलब्ध जागेत मधोमध कसा दर्शवावा हे बघूया.

आडव्या (Landscape) फोटोसाठी खाली दिलेला कोड कॉपी करून लेखात जिथे फोटो टाकायचाय त्या ठिकाणी पेस्ट करावा.

<br>
<img src=" " alt=" "style="display: block; margin-left: auto;margin-right: auto;width: 96%;"/>
<br>

वरील कोड मध्ये img src= नंतरच्या दोन्ही दुहेरी अवतरण चिन्हांच्या " " मध्ये, गुगल फोटोज, फेसबुक किंवा तुमच्या पसंतीच्या कुठल्याही संकेतस्थळावरील फोटोची लिंक पेस्ट करावी.

त्यानंतर alt= नंतरच्या दुहेरी अवतरण चिन्हांच्या " " मध्ये तो फोटो जर काही कारणाने लोड होऊ शकला नाही तर त्यासाठी पर्यायी नाव टंकावे. वरचा आणि खालचा <br> हा टॅग फोटोच्या वर आणि खाली थोडी मोकळी जागा ठेऊन तो सुटसुटीत दिसण्यासाठी आहे. तर शेवटचे width; 96% हे फोटोला उपलब्ध रुंदीच्या १००% पैकी ९६% जागा व्यापण्यासाठी आहे.

उदाहरण:

मोठ्या फोटोंसाठी वर दिलेला कोड व्यवस्थित प्रमाणातला आहे पण मुळातच लहान आकाराचा असलेला फोटो टाकायचा असेल तर ह्याच पद्धतीने खाली दिलेला कोड वापरता येईल. (फोटो 500px पेक्षाही लहान असेल तर 500 च्या जागी योग्य आकडा टाकावा, उदा. 450px, 300px, 250px वगैरे.)

<br>
<img src=" " alt=" "style="display: block; margin-left: auto;margin-right: auto;width:500px;"/>
<br>

उदाहरण:

*****

आता वळूयात आडव्या (Landscape) फोटोंचा स्लाईड शो करण्याकडे. पहिल्या उदाहरणात ६ फोटोंचा स्लाईड शो कसा करावा ते बघूया. तो करण्यासाठी विंडोज मधला नोटपॅड पुरेसा आहे.

पुढे जाण्याआधी तयार होणारी html फ़ाईल सेव्ह करण्यासाठी डेस्कटाॅपवर एक नवीन फोल्डर (त्याला काहीही नाव देता येईल.) तयार करून एकीकडे नोटपॅड उघडून ठेवावा.

खाली एक सहा फोटोंच्या लिंक टाकता येईल असे एक टेम्प्लेट दिले आहे. त्यात जिथे Photo1, Photo2 असे हिरव्या रंगात दिसतंय त्याठिकाणी (तिथले Photo1 वगैरे काढून टाकून) गुगल फोटोज, फेसबुक किंवा तुमच्या पसंतीच्या कुठल्याही संकेतस्थळावरील फोटोची लिंक पेस्ट करावी. जिथे लिंक पेस्ट करायची आहे त्या जागी माउस चा कर्सर आणल्यावर हिरव्या रंगाची चौकट दृश्य होईल जेणेकरून ओळखायला सोपे पडेल, बाकीचा कोड अन एडीटेबल असल्याने चुक होण्याची शक्यता कमीच आहे. तर आधी त्या सहा जागांवर फोटो ची लिंक पेस्ट करून घ्यावी.

स्क्रोल करत खाली येऊन सगळ्या सहा लिंक योग्य ठिकाणी टाकल्यावर (पेस्ट केलेल्या लिंक सोडून त्याच चौकटीत इतरत्र क्लिक केल्यावर) कीबोर्ड वर ctrl + A दाबून सिलेक्ट ऑल करून ctrl + C दाबून त्या चौकटीतला सगळा कोड कॉपी करून तो खाली पूर्वपरीक्षण करण्यासाठी दिलेल्या एडिटरच्या डाव्या बाजूच्या चौकटीत पेस्ट करावा.

उजवीकडच्या बाजूच्या चौकटीत दिसणारा स्लाईड शो समाधान कारक असेल (इथे तो आकारात लहान दिसेल पण प्रत्यक्षात 800 px चा दिसेल.) तर डाव्या बाजूच्या चौकटीतला सगळा कोड कीबोर्ड वर ctrl + A दाबून सिलेक्ट ऑल करून ctrl + C दाबून त्या चौकटीतला सगळा कोड कॉपी करून नोटपॅड मध्ये पेस्ट करावा आणि File मेनू मधून Save As...वर क्लिक करून वरती destination folder सिलेक्ट केल्यावर खाली File name मध्ये तयार होणाऱ्या फाईल साठी आवडेल ते नाव कुठेही स्पेस न देता टाईप करा आणि त्याच्या पुढे .html (डॉट एचटीएमएल) हे एक्स्टेन्शन जोडा. (मिपावर प्रदर्शित करायचा असेल तर फाईलचे नाव तुमचे मिपा सदस्यनाव + काही अंक जोडावे अर्थात कुठेही स्पेस न देता आणि एकापेक्षा जास्त फाईल्स बनवायच्या असतील तर प्रत्येकीचं नाव वेगळं ठेवा.) त्यानंतर त्याच्याच खाली असलेल्या Save as type च्या ड्रॉपडाउन मेनू मध्ये All Files सिलेक्ट केल्यावर शेवटी Save बटणाच्या आधी असलेल्या Encoding च्या च्या ड्रॉपडाउन मेनू मध्ये UTF-8 सिलेक्ट करून मग Save बटन दाबा.

आता त्या नवीन तयार केलेल्या फोल्डर मध्ये दिसणाऱ्या html फाईलवर डबल क्लिक करून ती तुमच्या पसंतीच्या ब्राउझर मध्ये उघडून बघा. अभिनंदन ! तुमचा स्लाईड शो तयार झाला आहे.

अशाप्रकारे केवळ मिपावर दर्शवण्यासाठीच नव्हे तर तुमच्या कौटुंबिक समारंभांचे, प्रवासातले अशा अनेक फोटोंचे स्लाईड शोज तयार करता येतील जे कुटुंबीयांसोबत बघण्यात नक्कीच आनंद मिळेल.

पुढच्या भागात १२ आणि १८ आडव्या (Landscape) फोटोंचा तसेच ६ , १२, आणि 18 उभ्या (Portrait) फोटोंचा स्लाईड शो तयार करण्याची आणि ते मिपावर कसे प्रदर्शित करायचे ह्याची माहिती घेऊया. धन्यवाद.

पुढचा भाग: DIY : मिपावर प्रदर्शित करण्यासाठी साठी फोटोंचा स्लाईड शो तयार करणे. २

क्रमशः

संजय भावे
(उर्फ 'टर्मीनेटर')