क्या कई छवियों को लाइटबॉक्स करना संभव है लेकिन उन्हें सक्रिय करने के लिए केवल एक छवि दिखाएं?

Question

मैं फोटो प्रदर्शित करने के लिए लाइटबॉक्स का उपयोग कर रहा हूं। तो अगर मैं तस्वीरों में से दो श्रेणियों, "काम" और "अवकाश" है, मैं क्या करना होगा ...

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a> 
<a href="images/image-2.jpg" rel="lightbox[work]">image #2</a> 
<a href="images/image-3.jpg" rel="lightbox[work]">image #3</a> 

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a> 
<a href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a> 
<a href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a> 

यह 6 छवियों को प्रदर्शित करता है, और जब मैं उनमें से एक पर क्लिक करें, यह लाइटबॉक्स शुरू होता है।

हालांकि, मैं शुरुआत में केवल दो छवियों को प्रदर्शित करने में सक्षम होना चाहता हूं (एक 'काम' के लिए, एक 'छुट्टी' के लिए), लेकिन जब उनमें से एक क्लिक किया जाता है, तो यह पहला उदाहरण जैसा व्यवहार करता है, उदा। लाइटबॉक्स के माध्यम से उस श्रेणी में सभी तस्वीरें प्रदर्शित करें।

क्या यह संभव है? यदि हां, तो कैसे?

किसी भी मदद की बहुत सराहना की है! :)

धन्यवाद

Answer 1

आप बस लंगर के नोड मूल्य में कुछ भी डाल नहीं है, तो वे, दिखाई नहीं देती हैं, हालांकि आप व्हाट्स स्पेस दिखाए जाने के मामले में इन खाली एंकरों के बीच कोई सफेद जगह नहीं है, यह सुनिश्चित करना चाह सकता है।

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a> 
<a href="images/image-2.jpg" rel="lightbox[work]"></a> 
<a href="images/image-3.jpg" rel="lightbox[work]"></a> 
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #2</a> 
<a href="images/image-5.jpg" rel="lightbox[vacation]"></a> 
<a href="images/image-6.jpg" rel="lightbox[vacation]"></a> 

Answer 2

प्रत्येक श्रेणी के ब्राउज़र से इसे छिपाने के लिए दूसरे और तीसरे छवि के लिए एक सीएसएस वर्ग जोड़ें। उदाहरण के लिए:

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a> 
<a class="hidden" href="images/image-2.jpg" rel="lightbox[work]">image #2</a> 
<a class="hidden" href="images/image-3.jpg" rel="lightbox[work]">image #3</a> 

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a> 
<a class="hidden" href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a> 
<a class="hidden" href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a> 

फिर अपने सीएसएस फ़ाइल में जोड़ने के लिए:

a.hidden{display:none;}

Answer 3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>