बुधवार, १६ सप्टेंबर, २००९

लाइटबॉक्स: पॉप-अप मध्ये फोटो दाखवा!

बर्‍याच वेबसाइट्स किंवा ब्लॉग्ज फोटो - इमेज आधी छोटी दाखवुन त्यावर क्लिक केल्यानंतर ती मोठी दाखवतात. हा मोठा फोटो शक्यतो नविन विंडोमध्ये किंवा पॉप-अप विंडो मध्ये ओपन होतो. जर आपणास तो त्याच पेजवर दाखवायचा असल्यास "लाइटबॉक्स" ही सुविधा उपयोगी पडते.

कसे कराल?
सर्वात आधी टेंप्लेटच्या "Layout - HTML" मध्ये जाऊन :
</head>
च्या वरती खाली दिलेला कोड पेस्ट करा.
<!-- Start Lightbox -->
<script src='http://sites.google.com/site/blogstoresite/blogger/prototype.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/blogstoresite/blogger/scriptaculous.js?load=effects,builder' type='text/javascript'></script>
<script src='http://sites.google.com/site/blogstoresite/blogger/lightbox.js' type='text/javascript'></script>
<link type='text/css' rel='stylesheet' href='http://sites.google.com/site/blogstoresite/blogger/lightbox.css' />
<script type="text/javascript">onload=function() {var one = "s1600-h";var two = "s1600";var x = document.getElementsByTagName("a");for(var idx = 0; idx < x.length; idx++){var link = x[idx].href;if ( link.indexOf(one) != -1){x[idx].href = x[idx].href.replace(one, two);}}}</script>
<!-- End Lightbox -->
आणि टेंप्लेट सेव करा.

आता नविन पोस्ट - फोटोसहित लिहायला घ्या किंव जुनी एडिट करायला घ्या. तुम्हाला हवा असणारा फोटो पोस्टमध्ये अपलोड करा. आता तुमच्या ब्लॉगरच्या पोस्ट मध्ये "Edit HTML" मध्ये जाऊन त्या फोटोचा कोड पहा. ही सोय एका किंवा अनेक एकाच आल्बम मधील अनेक फोटोंना करता येते.

एक फोटो:
ज्या फोटोला पॉप-बॉक्स मध्ये दाखवायचे आहे त्याच्या लिंकच्या कोड मध्ये हे पेस्ट करा:
rel="lightbox" title="Your Title"
उदाहरणः
<a rel="lightbox" title="फोटोबद्दल माहिती." href="bigPhoto.JPG" > <img alt="" border="0" src="smallPhoto.JPG" /> </a>

आता या खालच्या फोटोवर क्लिक करुन पहा!


फोटो ग्रुपः
आता जर फोटोंचा ग्रुप असेल तर एका पाठोपाठ एक फोटो दाखवता येतील. त्यासाठी मोठ्या फोटोच्या लिंक मध्ये हे लिहा:
rel="lightbox[Group Name]" title="Your Title"

उदाहरणः
<a rel="lightbox[ताजमहाल]" title="ताजमहाल एक" href="big01.JPG" > <img alt="" border="0" src="small01.JPG" /> </a>
<a rel="lightbox[ताजमहाल]" title="ताजमहाल दोन" href="big02.JPG" > <img alt="" border="0" src="small02.JPG" /> </a>

खाली दिलेल्या फोटोवर क्लिक केल्यास पॉप-अप मध्ये तो फोटो दिसेल. फोटो वर माऊस डाव्या किंवा उजव्या बाजुस नेल्यास PREV किंवा NEXT असे बटन दिसेल. त्यानुसार फोटो पुढे - मागे करता येतील. पॉप-अप घालविण्यासाठी खाली दिसणार्‍या क्लोज बटनवर किंवा फोटोव्यतिरिक्त अन्य कोणत्याही मोकळ्या जागी क्लिक करा.


हे लक्षात घ्या:
फोटो एकच असेल किंवा वेगवेगळ्या कॅटेगरीचे असतील तर कोड:
rel="lightbox" title="my photo title"

फोटो एकाच आल्बमचे / कॅटेगरीचे असतील तर कोड
rel="lightbox[AlbumName]" title="my individual photo title"

टेक्निकली ही सुविधा "पॉप-अप" नसल्याने पॉप-अप ब्लॉकर असले तरीही ही सुविधा चालेल. मोठा फोटो नविन विंडो मध्ये दाखविण्यापेक्षा त्याच पेजवर अशा प्रकारे दाखवणे अधिक सुंदर, नाही का?
सुविधा: लाइटबॉक्स. कारागिरः लोकेश

तुमच्या कमेंट्स - प्रश्न?

5 टिपणी/ टिपण्या:

╚» विशाल तेलंग्रे «╝ म्हणाले...

माहिती अगदी युजफुल आहे, मी नक्कीच ट्राय करीन... बरं पण दादा, तु जो कोड दिलाय, कॉपी करतेवेळी त्यात लाइन नंबर्स पण येतात....

भुंगा म्हणाले...

स्क्रिप्ट कॉपी करण्यासाठी -योग्य पध्दतः ही इमेज पहा -
कोडिंग बॉक्सवर वर माऊस न्या - वरच्या - उजव्या बाजुला चार छोटे आयकन्स दिसतील.
पहिला आयकनः क्लिक केल्यास तो कोड मुळ रुपात दाखवतो.
दुसरा आयकनः क्लिक केल्यास तो कोड आपोआप कॉपी केला जातो. तुम्ही तो नोट्पॅड किंवा इतर ठिकाणी पेस्ट करु शकता.
तिसरा आयकनः तो कोड प्रिंट करण्यासाठी
चौथा आयकनः हेल्प.

Vaibhav म्हणाले...

मित्र मी तू दिलेला कोडे कॉपी करून तो /head च्या वरती पेस्ट केला पण मला खाली दिलेली Error आली

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

तुजी मदत हवी आहे

भुंगा म्हणाले...

वैभव,
मी आपल्याला मेलवरती तो कोड आणि सुचना पाठवल्या आहेत. चेक करा!

चैतन्य म्हणाले...

We were unable to save your template asa dakhawat aahet