jQuery fancybox - spécifique à la cible div #id dans iframe

Question

Est-il possible d'utiliser fancybox pour charger un ID div spécifique à partir d'une autre page plutôt que de charger la page entière via un iframe?

Par exemple, je peux utiliser

$('#link-whole').fancybox({ 
       'width'    : '80%', 
       'height'   : '80%', 
       'type'    : 'iframe', 
      }); 

avec

<a id="link-whole" href="somepage.html">link 1</a> 

pour charger tous « somepage.html » dans le iframe, mais comment pourrais-je charger juste le contenu d'un div avec l'id "target" (par exemple)?

Answer 1

Si la page est sur le même domaine de la page sur laquelle vous ouvrez la fancybox, vous devriez pouvoir utiliser l'option dataFilter de jQuery.ajax pour filtrer les données retournées vers l'ID cible souhaité.

$('#link-whole').fancybox({ 
    'width': '80%', 
    'height': '80%', 
    'type': 'ajax', 
    'ajax': { 
     dataFilter: function(data) { 
      return $(data).find('#yourTargetID')[0]; 
     } 
    } 
}); 

Answer 2

Si la méthode de recherche ne fonctionne pas pour vous, essayez filter sur la ligne à l'intérieur DataFilter objet.

return $(data).filter('#yourTargetID')[0]; 

Answer 3

Vous pouvez cibler la partie spécifique de la page en utilisant beforeShow

    function opendialog(mypage) { 
        var linktoopen=mypage ; 
        $.fancybox({       
        'autoScale': false, 
        'transitionIn': 'elastic', 
        'transitionOut': 'elastic', 
        'speedIn': 500, 
        'speedOut': 300,      
        'width'   : 800, 
        'height'  : 410, 
        'autoDimensions': false, 
        'centerOnScroll': true, 
        'scrolling' : 'no', 
        'type' : 'iframe', 
        'href' : linktoopen, 
         beforeShow: function(){ 
          $(".fancybox-iframe").css({ 
          margin : "-380px 0 0", 
         height:"790px" 
         }); 
        } 
        }); 
        }