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

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

कसे कराल?
सर्वात आधी टेंप्लेटच्या "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"

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

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

Read More