फैंक्सबॉक्स - अजाक्स छवि गैलरी

Question

मेरे पास एक कस्टम छवि गैलरी है जो थंबनेल के साथ एक div को पॉप्युलेट करती है, प्रत्येक एक फैंक्सबॉक्स समूह में निहित है।

आप एक पर क्लिक करें (यह fancybox में खुलता है) और आप भी दबा सकते हैं पिछला/पहले "पेज" पर छवियों के बीच चक्र के आगे है। पृष्ठों के बीच स्थानांतरित करने के लिए, आपको fancybox को बंद करना होगा और पृष्ठों को बदलना होगा और फिर एक नया थंबनेल खोलना होगा। फोटो का यह नया सेट AJAX के माध्यम से पुनर्प्राप्त किया जाता है।

आप को दिखाने के लिए मैं वास्तव में क्या बारे में बात कर रहा हूँ, http://www.speedcountry.com/mSpeed323/Mazda_MAZDASPEED3

मैं कैसे fancybox का उपयोग पृष्ठों स्विच और छवियों के अगले सेट लोड करने के लिए कर सकते हैं?

Answer 1

ऐसा नहीं लगता है कि फैंसीबॉक्स में कोई आंतरिक तरीका है, इसलिए आपको प्लगइन को संशोधित करना होगा। मैंने एक मामूली परिवर्तन करने और demo पोस्ट करने की स्वतंत्रता ली - डेमो में, किसी भी छवि को FancyBox पॉपअप में खोलें, फिर कीबोर्ड पर एंटर दबाएं। यह सभी छवियों को गैलरी में लोड करेगा और पहले से शुरू होगा।

संशोधित लाइन 887 है, तो इससे पहले कि 892 एक पंक्ति सम्मिलित करें:

$.fancybox.pos = function(pos, array) { // array parameter added 
    if (busy) { 
     return; 
    } 

    if (array) { currentArray = array; } // new line 

तो, मूल रूप से एक समारोह पैरामीटर के रूप में "सरणी" जोड़ें, फिर if (array)... पंक्ति जोड़ें।

इसका उपयोग करने के लिए, केवल pos फ़ंक्शन को कॉल करें जबकि फ़ैन्सीबॉक्स खुला है।

// pos(index of image, jQuery object of gallery objects) 
$.fancybox.pos(0, $('#examples a[id]')); 

* नोट:: शुरू में मैं सिर्फ $('a[id]') का इस्तेमाल किया और यह छवि है कि अंदर फैंसी बॉक्स था शामिल इस डेमो से कोड है।

---

अद्यतन: तो जैसे तुमने कहा, तुम ajax ... मेरा अनुमान है कि तुम सिर्फ छवि यूआरएल की एक सूची हो रही है का उपयोग कर अधिक छवियों में लोड कर रहे हैं।

<div id="ajax-loaded" style="display:none"> 
<a href="#" title="image1 title"><img src="image1.jpg"></a> 
<a href="#" title="image2 title"><img src="image2.jpg"></a> 
... 
<a href="#" title="imageN title"><img src="imageN.jpg"></a> 
</div> 

तो फिर तुम jQuery की एक सरणी एक दूसरे पैरामीटर के रूप में कार्य करने के लिए $.fancybox.pos$('#ajax-content img') वस्तुओं बना सकते हैं, और शुरू: एक यूआरएल के साथ शुरू, आप फार्म और एक छिपा क्षेत्र में पृष्ठ पर इन छवियों को जोड़ने की आवश्यकता होगी पहली छवि (शून्य)

// ajax complete, add images to gallery 
$.fancybox.pos(0, $('#ajax-loaded a')); 

अद्यतन # 2 साथ: मैं लिंक और jQuery चयनकर्ता में ऊपर एचटीएमएल समाप्ति के बाद मैंने पाया कि यह आवश्यक है अगर आप एक छवि कैप्शन शामिल करना चाहते हैं।

Answer 2

मैं अपने जवाब here में FancyBox के कुछ उपयोगी लिंक पोस्ट किया है। कृपया उन्हें जांचें।

यदि आपको यह उपयोगी नहीं लगता है, तो कृपया मुझे सही करें।

इस बीच, यदि कार्यान्वयन के साथ कोई समस्या है, तो कृपया कोड पोस्ट करें।

धन्यवाद।

Answer 3

prepGallery() के अंत में बस $("#profileGallery .vehiclePictures:first").click() जोड़ा गया। तो आपके AJAX कॉल के बाद, यह स्वचालित रूप से फ़ोटो पर "क्लिक" कर देगा।