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% हे फोटोला उपलब्ध रुंदीच्या १००% पैकी ९६% जागा व्यापण्यासाठी आहे.
उदाहरण:

Kashmir
मोठ्या फोटोंसाठी वर दिलेला कोड व्यवस्थित प्रमाणातला आहे पण मुळातच लहान आकाराचा असलेला फोटो टाकायचा असेल तर ह्याच पद्धतीने खाली दिलेला कोड वापरता येईल. (फोटो 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 : मिपावर प्रदर्शित करण्यासाठी साठी फोटोंचा स्लाईड शो तयार करणे. २ क्रमशः संजय भावे (उर्फ 'टर्मीनेटर')
वर्गीकरण
23766 वाचन
💬 प्रतिसाद (34)

प्रतिक्रिया

प्रसाद_१९८२
गुरुवार, 08/30/2018 - 20:29 नवीन
उपयुक्त व महत्वाची माहिती. इथे शेअर केल्याबद्दल धन्यवाद ! -- एक समस्या येत आहे. तो सर्व कोड नोटपॅड मधून UTF-8 मध्ये सेव्ह करुनही, सेव्ह होणारी फाईल 'HTML' मध्ये सेव्ह न होता 'टेक्स्ट डॉक्युमेंट' म्हणूनच सेव्ह होत आहे.

टर्मीनेटर
गुरुवार, 08/30/2018 - 20:47 नवीन
फाईल नेम च्या पुढे .html हे एक्स्टेन्शन लावलं आहे का आपण? माफ करा ते लेखात नमूद करायचं राहिलंय, दुरुस्ती करतो.
↩ प्रतिसाद: प्रसाद_१९८२

प्रसाद_१९८२
गुरुवार, 08/30/2018 - 20:57 नवीन
फाईल नेम च्या पुढे .html हे एक्स्टेन्शन लावलं आहे का आपण? --- नव्हते, वरिल html एक्स्टेन्शन नव्हते लावले. आता करुन पाहतो. -- धन्यवाद !
↩ प्रतिसाद: टर्मीनेटर

टर्मीनेटर
गुरुवार, 08/30/2018 - 21:10 नवीन
.html (डॉट एचटीएमएल) हे एक्स्टेन्शन लावा. आणि मुख्य म्हणजे Save as type च्या ड्रॉपडाउन मेनू मध्ये All Files नक्की सिलेक्ट करा.
↩ प्रतिसाद: प्रसाद_१९८२

Nitin Palkar
गुरुवार, 08/30/2018 - 20:34 नवीन
उदाहरण: दुसरा फोटो दिसत नाहीये .....

डॉ सुहास म्हात्रे
Fri, 08/31/2018 - 01:56 नवीन
उपयुक्त माहिती. आपली ट्रेड सिक्रेट्स इथे प्रसिद्ध केल्याबद्दल अनेक धन्यवाद ! ============== चित्र किंवा मजकूर मध्यभागी, उजवीकडे किंवा डावीकडे अलाईन करण्यासाठी मी खालील सोपा कोड वापरतो... (p align="Center")(img src="image address" width="300" height="450" /)(/p)

(p align="Center")मजकूर(/p) ============== टीप : १. चित्र / शीर्षक Left किंवा right ला हवे असल्यास Center जागी Left किंवा right असे लिहावे. २. इथे कोड दिसावा यासाठी गोल ब्रॅकेट्स वापरल्या आहेत. कोड लिहिताना त्यांच्याऐवजी अँगल्ड ब्रॅकेट्स वापराव्या म्हणजे कोडाचा योग्य तो दृश्य परिणाम दिसेल. ३. चित्र, "पोर्ट्रेट मोडमध्ये (उभे) असल्यास फक्त योग्य तेवढी height टाकावी व width रिकामी ठेवावी" आणि "लँडस्केप मोडमध्ये (आडवे) असल्यास योग्य तेवढी width टाकावी व height रिकामी ठेवावी". मिपा प्रणाली रिकाम्या जागेत योग्य त्या प्रमाणात आकडा वापरून दिसणारे चित्र मूळ चित्राच्या प्रमाणात ठेवते.

टर्मीनेटर
Fri, 08/31/2018 - 10:36 नवीन
धन्यवाद डॉक्टर. तुम्ही वापरत असलेला कोडंही तोच दृश्य परिणाम देऊ शकतो. त्यात वापरलेले <p align="Center"> मजकूर </p> हे परिच्छेदा साठी वापरण्यात येणारे टॅग्ज न वापरता थेट
<center> इथे जेवढा मजकूर मधोमध दर्शवायचाय तो टंकता येईल </center> आणि चित्रासाठी <center> <img src="image address" width="300" height="450" /> </center>
असे कोड वापरले तरी रिझल्ट सारखाच मिळेल. डेस्कटाॅप, टॅब आणि मोबाईल सगळ्यांची स्क्रीन रिझोल्युशनस वेगवेगळी असल्याने landscape फोटो टाकायचा असेल तर ठराविक पिक्सल देण्यापेक्षा परसेंटेज देणे सोयीस्कर पडते नाहीतर मोबाईलवर व्यवस्थित दिसणारा फोटो टॅब आणि डेस्कटाॅप वर लहान दिसतो. Portrait फोटो असेल तर मात्र width 450 ठेवली तर तो सर्व उपकरणांवर व्यवस्थित (स्क्रोल करावा न लागता) दिसतो. तुम्ही स्लाईड शो तयार केलात त्याबद्दल अभिनंदन ! फक्त तो आत्ता कुठल्याही लाईव्ह सर्व्हर वर होस्ट केलेला नसल्याने दिसत नाहीये, होस्ट केल्यावर इथे टाकलात तर खालील प्रमाणे दिसेल.
↩ प्रतिसाद: डॉ सुहास म्हात्रे

डॉ सुहास म्हात्रे
Fri, 08/31/2018 - 02:17 नवीन
स्लाईड शो चा माझा प्रयत्न... जमला की राव ! अनेक धन्स !! Slide Show Image removed.

First Photo.

Image removed. Image removed. Image removed. Image removed. Image removed.

Last Photo.


< Prev Next > var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; }

कंजूस
Fri, 08/31/2018 - 07:42 नवीन
धन्यवाद हो ! तुमचा पहिला स्लाइडशो धाग्यात दिसल्यावर मी त्याचा सोर्स कोड कॅापी करून घेतला. नेटवरूनही सर्व सर्च केल्यावर कळले त्यात दोन प्रकार आहेत - अ) html + css + jqueary/javascript , अथवा ब) फक्त html + css यामध्ये (अ) प्रकारात jqueary/javascript फाइल मिपावर टाकता येत नाही म्हणून ब्लॅागवर टाकून तो ब्लॅाग इथे iframe tagने आणलेला दिसला. आता दिलेली पद्धत फक्त html आहे ती सहज काम करेल. आता डॅाक्टरांनी दिलेला स्लाइडशो दिसत नाहीये. संपादन प्रतिसादात नसल्याने दुरुस्ती करता येत नाही. मी मागे एकदा हम्पी बदामी धाग्यात थोडे फोटो धाग्यात व वीसेक फोटो कलादालनात देऊन काम भागवले होते. एचटीएमेल कोड देऊन तुम्ही छानच काम केले आहे.

टर्मीनेटर
Fri, 08/31/2018 - 10:40 नवीन
धन्यवाद कंजूसजी. डॅाक्टरांनी दिलेला स्लाइडशो तो आत्ता कुठल्याही लाईव्ह सर्व्हरवर होस्ट केलेला नसल्यामुळे दिसत नाहीये.
↩ प्रतिसाद: कंजूस

टर्मीनेटर
Fri, 08/31/2018 - 15:25 नवीन
इथे वरती प्रतिसादात तुम्ही टाकलेला स्लाईड शो तुम्हाला मिपावर दिसतोय?
↩ प्रतिसाद: डॉ सुहास म्हात्रे

डॉ सुहास म्हात्रे
Fri, 08/31/2018 - 23:39 नवीन
हो, दिसत आहे. तुमच्या स्लाईड शो आणि त्याच्यात फक्त एक फरक आहे. बॅक बटण दिसत नाही, त्यामुळे फक्त एका दिशेनेच (केवळ पुढे) जाता येत आहे. शेवटच्या फोटोनंतर पुढे गेल्यावर परत पहिल्या फोटोवर येतो.
↩ प्रतिसाद: टर्मीनेटर

टर्मीनेटर
Fri, 08/31/2018 - 10:41 नवीन
@ प्रचेतस _/\_
↩ प्रतिसाद: प्रचेतस

माहितगार
Fri, 08/31/2018 - 08:28 नवीन
हे चांगलेच आहे. मी पुर्वी गुगल ड्राइव्ह (पुर्वीचे गुगल डॉक्स) च्या गूगल स्लाईड मिपावर एंबेड करुन वापरल्या आहेत. त्यात फारशी छायाचित्रे जोडली नव्हती पण जोडता येऊ शकावीत असे वाटते. गुगल स्लाईड मेन्यु ड्रिव्हन असल्यामुळे कोड क्लिष्ट वाटणार्‍यांना सोपी जावी असे वाटते.

टर्मीनेटर
Fri, 08/31/2018 - 10:52 नवीन
माहितगारजी गुगल ड्राइव्ह वरच्या गूगल स्लाईडस मी कधी वापरून बघितल्या नाहीयेत. तशा ऑनलाईन स्लाईड शोज बनवता येणाऱ्या आणखीही बऱ्याच वेबसाईटस जालावर आहेत, परंतु DIY चे समाधान काही वेगळेच असते. आणि महत्वाचे म्हणजे थोडीशी CSS आणि html ची माहिती असणाऱ्यांना वर दिलेला कोड एडिटर मध्ये पेस्ट केल्यावर त्यात आवश्यक ते बदल करता येणे सहज शक्य आहे, जसे कि मागचा राखाडी रंग, फोटोंची संख्या आणि साईझ, बटनांचे रंग वगैरे. धन्यवाद.
↩ प्रतिसाद: माहितगार

विजय_आंग्रे
Fri, 08/31/2018 - 10:49 नवीन
अतिशय माहितीपूर्ण लेख. वाचणखूण साठवली आहे. --- @ टर्मीनेटरजी, तुम्ही लेखात दिलेली प्रोसिजर वापरुन स्लाईड शोची 'एचटिएमएल' फाईल तयार झालेय, मात्र ती फाईल मिपा व इतर संस्थळावर टाकून प्रकाशित कशी करायची याची देखील माहिती द्यावी ही विनंती.

टर्मीनेटर
Fri, 08/31/2018 - 10:56 नवीन
धन्यवाद विजयजी. मिपावर हि तयार झालेली फाईल कशी प्रकाशित करायची ह्याची माहिती पुढील भागामध्ये देतो.
↩ प्रतिसाद: विजय_आंग्रे

अनिंद्य
Fri, 08/31/2018 - 11:09 नवीन
@ टर्मिनेटर, हे बेस्ट काम केलेत बघा. आता प्रॅक्टिकल करून बघतो. मिपावर कसे टाकायचे तो भागही लवकर येऊद्यात प्लिज.

टर्मीनेटर
Fri, 08/31/2018 - 11:14 नवीन
हो टाकतो पुढचा भाग लवकरच.
↩ प्रतिसाद: अनिंद्य

जेम्स वांड
Fri, 08/31/2018 - 14:21 नवीन
पीएस - ज्याच्यातलं कळत नाही असा एकही विषय नाही आमच्या म्हात्रे काकांसाठी, काका तुमचे शॉर्ट बट स्वीट कोड्स तर जब्बरच आवडले. संजयजी धागा बुकमार्क करून ठेवला आहेच पण तुमचे पुन्हा एकदा आभार.

कंजूस
Sat, 09/01/2018 - 10:13 नवीन
स्लाइडशो अॅप - युट्यब - विडिओ प्लेअर पद्धत १) App storeवरती फोटो स्लाइडशोची बरीच अॅप्स आहेत. त्यापैकी एक वापरून फोटोंचा स्लाइडशो विडिओ बनवला. ( स्लाइडशोची फाइल मेमरीमध्ये येईल असे अॅप घ्यावे. ) २) तो विडिओ युट्युबवर टाकून लिंक घ्या. Embed code मिळाला तर उत्तमच. तोच इकडे कॅापी पेस्ट करा. किंवा शेअर लिंक मिळाली तर पुढचे टेम्प्लेट वापरा. व्हिडिओ टेम्प्लेट

<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> टेमप्लेट पोस्ट केले की विडिओ प्लेअर दिसतो.

सूचना - फोटोंमध्ये आपल्या व्यक्ती असतील तर युट्युब उपयोगाचं नाही. फारच पब्लिक होईल. पर्यटन भटकंती फोटोंसाठी ठीक. मिपा कट्ट्याचाही बनवला आहे.

टर्मीनेटर
Tue, 10/02/2018 - 15:23 नवीन
धन्यवाद पक्षी. आपला प्रतिसाद अर्धाच (फक्त विषय) दिसत असल्याने पुढे काही शंका विचारली आहे कि सूचना आहे हे समजत नाहीये.
↩ प्रतिसाद: पक्षी