DIY : मिपावर प्रदर्शित करण्यासाठी साठी फोटोंचा स्लाईड शो तयार करणे. १
नमस्कार,
मिपावर लिखाण करताना काहीवेळा भरपूर फोटोंचा वापर करावा लागतो. विशेषतःभटकंती आणि पाककृतींच्या धाग्यांची तर ती गरजच असते. अशाप्रकारे जास्ती फोटोंचा समावेश असलेल्या धाग्यांची लांबी फारच वाढत असल्याने मोबाईल वर असे धागे वाचताना थोडा त्रास होतो.
नुकत्याच पूर्ण झालेल्या माझ्या ईजिप्त सोलोट्रीप: एक अविस्मरणीय अनुभव ह्या मालिकेतील चौथ्या भागात (थोडा हात आखडता घेऊन सुद्धा) १०० फोटो असल्याने, तो भाग मोबाईलवर वाचताना येणाऱ्या समस्येबद्दल श्री कंजूस ह्यांनी प्रतिसादात कळवले होते. त्यावर उपाय म्हणून पुढच्या भागांमध्ये मी स्लाईड शोज चा वापर केल्याने धाग्याची लांबीही आटोक्यात आली आणि त्यामुळे लेखांची शोभाही वाढल्याचे वाचकांनी प्रतिसादातून कळवले.
सर्वश्री अनिंद्य, अभ्या, दुर्गविहारी आणि कोमल ह्यांच्या सूचनेवरून ह्या लेखातून स्लाईड शो करण्याची माहिती देण्याचा प्रयत्न करत आहे.
साधारणपणे आडवा (Landscape) फोटो टाकायचा असेल तर मिपावर सध्या उपलब्ध असलेली सोय उपयुक्त आहे, त्यात फोटोची रुंदी आणि उंची पण सेट करता येते. परंतु फोटो जर उभा (Portrait) असेल तर रुंदी कमी केली तर तो डावीकडे दिसत असल्याने उजवीकडचा भाग मोकळा राहतो आणि पूर्ण रिझोल्युशन मध्ये दर्शवला तर फारच मोठा दिसतो आणि स्क्रोल करून बघावा लागतो.
सर्वप्रथम आपण एक एक फोटो उपलब्ध जागेत मधोमध कसा दर्शवावा हे बघूया.
आडव्या (Landscape) फोटोसाठी खाली दिलेला कोड कॉपी करून लेखात जिथे फोटो टाकायचाय त्या ठिकाणी पेस्ट करावा.
उदाहरण:
मोठ्या फोटोंसाठी वर दिलेला कोड व्यवस्थित प्रमाणातला आहे पण मुळातच लहान आकाराचा असलेला फोटो टाकायचा असेल तर ह्याच पद्धतीने खाली दिलेला कोड वापरता येईल. (फोटो 500px पेक्षाही लहान असेल तर 500 च्या जागी योग्य आकडा टाकावा, उदा. 450px, 300px, 250px वगैरे.)उदाहरण:
आता वळूयात आडव्या (Landscape) फोटोंचा स्लाईड शो करण्याकडे. पहिल्या उदाहरणात ६ फोटोंचा स्लाईड शो कसा करावा ते बघूया. तो करण्यासाठी विंडोज मधला नोटपॅड पुरेसा आहे.
पुढे जाण्याआधी तयार होणारी html फ़ाईल सेव्ह करण्यासाठी डेस्कटाॅपवर एक नवीन फोल्डर (त्याला काहीही नाव देता येईल.) तयार करून एकीकडे नोटपॅड उघडून ठेवावा.
खाली एक सहा फोटोंच्या लिंक टाकता येईल असे एक टेम्प्लेट दिले आहे. त्यात जिथे Photo1, Photo2 असे हिरव्या रंगात दिसतंय त्याठिकाणी (तिथले Photo1 वगैरे काढून टाकून) गुगल फोटोज, फेसबुक किंवा तुमच्या पसंतीच्या कुठल्याही संकेतस्थळावरील फोटोची लिंक पेस्ट करावी. जिथे लिंक पेस्ट करायची आहे त्या जागी माउस चा कर्सर आणल्यावर हिरव्या रंगाची चौकट दृश्य होईल जेणेकरून ओळखायला सोपे पडेल, बाकीचा कोड अन एडीटेबल असल्याने चुक होण्याची शक्यता कमीच आहे. तर आधी त्या सहा जागांवर फोटो ची लिंक पेस्ट करून घ्यावी.
<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>
*****
स्क्रोल करत खाली येऊन सगळ्या सहा लिंक योग्य ठिकाणी टाकल्यावर (पेस्ट केलेल्या लिंक सोडून त्याच चौकटीत इतरत्र क्लिक केल्यावर) कीबोर्ड वर 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 : मिपावर प्रदर्शित करण्यासाठी साठी फोटोंचा स्लाईड शो तयार करणे. २
क्रमशः
संजय भावे
(उर्फ 'टर्मीनेटर')
वाचने
23814
वाचनखूण
प्रतिक्रिया
34
अतिशय
In reply to अतिशय by प्रसाद_१९८२
फाईल नेम च्या पुढे .html हे एक्स्टेन्शन लावलं आहे का आपण? माफ क
In reply to फाईल नेम च्या पुढे .html हे एक्स्टेन्शन लावलं आहे का आपण? माफ क by टर्मीनेटर
फाईल नेम च्या पुढे .html हे
फाईल नेम च्या पुढे .html हे एक्स्टेन्शन लावलं आहे का आपण?--- नव्हते, वरिल html एक्स्टेन्शन नव्हते लावले. आता करुन पाहतो. -- धन्यवाद !In reply to फाईल नेम च्या पुढे .html हे by प्रसाद_१९८२
.html (डॉट एचटीएमएल) हे एक्स्टेन्शन लावा. आणि मुख्य म्हणजे
उदाहरण:
In reply to उदाहरण: by Nitin Palkar
अरेच्चा.. मला दिसतोय... तरी एकदा खात्री करून घेतो.
उपयुक्त माहिती. आपली ट्रेड
(p align="Center")मजकूर(/p) ============== टीप : १. चित्र / शीर्षक Left किंवा right ला हवे असल्यास Center जागी Left किंवा right असे लिहावे. २. इथे कोड दिसावा यासाठी गोल ब्रॅकेट्स वापरल्या आहेत. कोड लिहिताना त्यांच्याऐवजी अँगल्ड ब्रॅकेट्स वापराव्या म्हणजे कोडाचा योग्य तो दृश्य परिणाम दिसेल. ३. चित्र, "पोर्ट्रेट मोडमध्ये (उभे) असल्यास फक्त योग्य तेवढी height टाकावी व width रिकामी ठेवावी" आणि "लँडस्केप मोडमध्ये (आडवे) असल्यास योग्य तेवढी width टाकावी व height रिकामी ठेवावी". मिपा प्रणाली रिकाम्या जागेत योग्य त्या प्रमाणात आकडा वापरून दिसणारे चित्र मूळ चित्राच्या प्रमाणात ठेवते.
In reply to उपयुक्त माहिती. आपली ट्रेड by डॉ सुहास म्हात्रे
धन्यवाद डॉक्टर. तुम्ही वापरत असलेला कोडंही तोच दृश्य परिणाम देऊ
स्लाईड शो चा प्रयत्न...
First Photo.
Last Photo.
In reply to स्लाईड शो चा प्रयत्न... by डॉ सुहास म्हात्रे
डॉसुम्हा, तुमचा स्लाईड शो मला
धन्यवाद हो !
In reply to धन्यवाद हो ! by कंजूस
धन्यवाद कंजूसजी. डॅाक्टरांनी दिलेला स्लाइडशो तो आत्ता कुठल्याही
In reply to धन्यवाद कंजूसजी. डॅाक्टरांनी दिलेला स्लाइडशो तो आत्ता कुठल्याही by टर्मीनेटर
मला तर दिसत आहे. हे कसे काय ?
In reply to मला तर दिसत आहे. हे कसे काय ? by डॉ सुहास म्हात्रे
इथे वरती प्रतिसादात तुम्ही टाकलेला स्लाईड शो तुम्हाला मिपावर दिस
In reply to इथे वरती प्रतिसादात तुम्ही टाकलेला स्लाईड शो तुम्हाला मिपावर दिस by टर्मीनेटर
हो, दिसत आहे.
धन्यवाद ह्या उपयुक्त
In reply to धन्यवाद ह्या उपयुक्त by प्रचेतस
@ प्रचेतस _/\_
हे चांगलेच आहे. मी पुर्वी
In reply to हे चांगलेच आहे. मी पुर्वी by माहितगार
माहितगारजी गुगल ड्राइव्ह वरच्या गूगल स्लाईडस मी कधी वापरून बघित
अतिशय माहितीपूर्ण लेख.
In reply to अतिशय माहितीपूर्ण लेख. by विजय_आंग्रे
धन्यवाद विजयजी. मिपावर हि तयार झालेली फाईल कशी प्रकाशित करायची
@ टर्मिनेटर,
In reply to @ टर्मिनेटर, by अनिंद्य
@अनिंद्य _/\_
अतिशय जास्त आभार
In reply to अतिशय जास्त आभार by जेम्स वांड
धन्यवाद जेम्स वांडजी.
चारपाच वर्षांपुर्वी एचटीएमेल५
In reply to चारपाच वर्षांपुर्वी एचटीएमेल५ by कंजूस
अच्छा. आता बनवा चांगले भरपूर फोटो असलेले लेख :)
अतिशय उपयुक्त लेखमाला. अनेक
In reply to अतिशय उपयुक्त लेखमाला. अनेक by पद्मावति
धन्यवाद पद्मावतिजी. _/\_
स्लाइडशो अॅप - युट्यब - विडिओ
<iframe width="560" height="315" src="https://www.youtube.com/embed/हाचविडिओटाकायचाआहे"></iframe> समजा एका विडिओची लिंक = https://youtu.be/tK0YqAd_WNE आहे. किंवा https://youtube.com/watch?v=tK0YqAd_WNE अशी असेल तर त्यामधली tK0YqAd_WNE ही अकरा अक्षरे टेम्प्लेटमधल्या "हाचविडिओटाकायचाआहे" इथ बदलून <iframe width="560" height="315" src="https://www.youtube.com/embed/tK0YqAd_WNE "></iframe> टेमप्लेट पोस्ट केले की विडिओ प्लेअर दिसतो.सूचना - फोटोंमध्ये आपल्या व्यक्ती असतील तर युट्युब उपयोगाचं नाही. फारच पब्लिक होईल. पर्यटन भटकंती फोटोंसाठी ठीक. मिपा कट्ट्याचाही बनवला आहे.
अतिशय छान लेख. तुमचं HTML
In reply to अतिशय छान लेख. तुमचं HTML by पक्षी
धन्यवाद पक्षी. आपला प्रतिसाद अर्धाच (फक्त विषय) दिसत असल्याने
अतिशय छान लेख. तुमचं HTML
In reply to अतिशय छान लेख. तुमचं HTML by पक्षी
आत्ताही फक्त विषयच दिसतोय :)