fancybox गैलरी समूहों

Question

मैं fancybox http://fancyapps.com/fancybox/ उपयोग कर रहा हूँ, और मेरे सवाल है? मेरा मतलब है एक ही गैलरी (या 'समूह') में इनलाइन या वीडियो वाली छवियां। यदि हां, तो कोई जानता है कि कैसे?

यहाँ

एक उदाहरण है कि काम नहीं करता:

<a class="fancyinline" data-fancybox-group="testgroup" href="#cont3">Test</a> 
<div class="fancyhidden" id="cont3">Test Content</div> 
<a class="fancyimage" data-fancybox-group="testgroup" href="test.jpg" > 
    <img src="test-th.jpg" alt="" /> 
</a> 

fancyinline और fancyimage एक साथ समूहीकृत नहीं कर रहे हैं, लेकिन मैं तो जरूरत है। बेशक मुझे इनलाइनों और छवियों के लिए विभिन्न मानकों की आवश्यकता है ...

अग्रिम धन्यवाद।

Answer 1

फैंक्सबॉक्स के अंदर नेविगेशन के लिए तत्वों को समूहित करने के लिए, आपको प्रत्येक पर rel विशेषता सेट करने की आवश्यकता है। वही rel मान फैंसीबॉक्स को बताएगा कि यदि कोई खुला हो तो उन सभी को नेविगेशन में उपस्थित होना होगा।

इस working Fiddle!

ग्रुप उदाहरण देखें

एचटीएमएल

<a rel="example_group" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 
<a rel="example_group" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 

jQuery

$("a[rel=example_group]").fancybox(); 

---

ग्रुप उदाहरण के दृश्य, बाकी लेबल छिपे हुए

एचटीएमएल

<a rel="group2" title="Custom title" href="full_path_to_image.jpg"> 
    <img alt="" src="path_to_image_thumbs.jpg"> 
</a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a> 

jQuery

$("a[rel=group2]").fancybox(); 

Answer 2

मैं इस

$("#fancybox-manual-c").click(function() { 
      $.fancybox.open([ 
       { 
        href : '1_b.jpg', 
        title : 'My title' 
       }, { 
        href : '2_b.jpg', 
        title : '2nd title' 
       }, { 
        href : '3_b.jpg' 
       } 
      ], { 
       helpers : { 
        thumbs : { 
         width: 75, 
         height: 50 
        } 
       } 
      }); 
     });