2012-07-23 11 views
6

मैं निम्नलिखित fancybox कोड है:मैं fancybox href गतिशील कैसे बना सकता हूं?

$('.fancybox').fancybox({ 
      'autoScale' : false, 
      'href' : $('.fancybox').attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 

//some other callbacks etc 

समस्या मैं बीस अलग एक टैग आईडी पृष्ठ पर की है और मैं fancybox href विशेषता क्लिक किए गए तत्व की आईडी लेना चाहते हैं, एक है कि चालू होने यानी है घटना।

मैंने कई चीजों की कोशिश की है, उनमें से कोई भी काम नहीं किया है!

'href' : $(this).attr('id'), 
'href' : $(this.element).attr('id'), 

यह इतना आसान लगता है लेकिन जब भी मैं 'इस' में प्लग करता हूं या इसी तरह के कुछ भी काम नहीं करता है।

+0

'आईडी' विशेषता और' href' विशेषता का उपयोग करने के बीच क्या अंतर है? ... एचटीएमएल को यह बेहतर करता है कि यह बेहतर करता है (jQuery का उपयोग किए बिना) आपके पास अपने 'टैग में 20 अलग-अलग आईडी हो सकती हैं लेकिन उनमें से सभी एक ही' class = "fancybox" साझा कर सकते हैं, इसलिए उपरोक्त आपकी स्क्रिप्ट निर्बाध रूप से काम करेगी और जटिल चीजों के बिना। – JFK

+0

मेरी पिछली टिप्पणी के बाद, आप केवल 'href' API विकल्प को हटा दें और fancybox इसे' 'टैग में 'href' विशेषता से ले जाएगा। – JFK

+0

मेरी href की हालांकि गैर मानक, ग्राहक पृष्ठ पर बीस अलग लिंक नहीं चाहता है तो मैं href का उपयोग "#" के साथ उन में और कोड में कुछ बिंदु पर कर रहा हूँ मैं जरूरत जे एस वास्तविक href जो मैं था को भेजने के लिए कर रहे हैं आईडी में भंडारण सुझावों के लिए खुला! – absentx

उत्तर

29

each() या click() बिना बस इस

$(".fancybox").fancybox({ 
    autoScale: false, 
    // href : $('.fancybox').attr('id'), // don't need this 
    type: 'iframe', 
    padding: 0, 
    closeClick: false, 
    // other options 
    beforeLoad: function() { 
     var url = $(this.element).attr("id"); 
     this.href = url 
    } 
}); // fancybox 

नोट की तरह अपनी स्क्रिप्ट को beforeLoad कॉलबैक जोड़ें: इस fancybox v2.0.6 के लिए है +

दूसरी ओर, एक और अधिक सुरुचिपूर्ण समाधान का उपयोग करने (एचटीएमएल 5) data-* विशेषता निर्धारित करने में है href (यह id="images/01.jpg" अन्यथा सेट करने के लिए अजीब लगेगा) ताकि आप कर सकता है:

<a href="#" id="id01" data-href="images/01.jpg" ... 

और अपने कॉलबैक

beforeLoad: function(){ 
var url= $(this.element).data("href"); 
this.href = url 
} 

और id विशेषता का उपयोग करने के लिए विशेषता का उपयोग करें।


संपादित:

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a> 

और JSFIDDLE देखें

$(".fancybox").fancybox({ 
    // API options 
    autoScale: false, 
    type: 'iframe', 
    padding: 0, 
    closeClick: false 
}); 

तरह कॉलबैक के बिना एक सरल स्क्रिप्ट का उपयोग: सबसे अच्छा की तरह अपने लंगर में विशेष data-fancybox-href विशेषता का उपयोग करने के लिए है

+0

आह सही देखें ... मैंने पहले लोडबैक में कुछ चीजों की कोशिश की थी, लेकिन मुझे बस थोड़ा सा होना चाहिए था। धन्यवाद फिर से यह सही काम किया, आप मुझे इस फैंक्सबॉक्स सामान के माध्यम से प्राप्त करने में मदद की है! – absentx

+0

इसके लिए धन्यवाद। मैं अपने यूआरएल के लिए एक ajax झंडा संलग्न तो मैं एक chromeless मोडल टेम्पलेट ऊपर की सेवा कर सकता है, जबकि क्रॉलर्स, स्क्रीन पाठकों के लिए चातुर्य में यूआरएल रखने और नए window_ क्लिक में _open की जरूरत है। – murraybiscuit

1

इस

$('.fancybox').each(function() { 
    var elem = jQuery(this); 
    elem.fancybox({ 
      'autoScale' : false, 
      'href' : elem.attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      }); 
    } 
); 
4

आप .fancybox वस्तुओं के अपने संग्रह से अधिक पुनरावृति और आईडी प्राप्त कर सकते हैं की कोशिश करो।

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
      'autoScale' : false, 
      'href' : $(this).attr('id'), 
      'type':'iframe', 
      'padding' : 0, 
      'closeClick' : false, 
      //some other callbacks etc 
    }); 
}); 
1

क्या आपने यह कोशिश की है?

$('.fancybox').each(function(){ 
    $(this).fancybox({ 
     'autoScale' : false, 
     'href' : this.id, 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
      //some other callbacks etc 
    }); 
}); 
3

इस प्रयास करें:

$(".fancybox").click(function(){ 
    var url = $(this).attr('id'); 
    $.fancybox({ 
     'autoScale' : false, 
     'href' : url , 
     'type':'iframe', 
     'padding' : 0, 
     'closeClick' : false, 
     //some other callbacks etc 
    }); 
}) 
संबंधित मुद्दे