jQuery從XML獲取數據並將其轉換爲lightbox

我正在使用jQuery從XML文件中獲取結果並在div中顯示每個條目。這是行得通的，但現在我想做到這一點，如果我點擊div，它會在燈箱中顯示來自xml的更多數據。jQuery從XML獲取數據並將其轉換爲lightbox

我創建了一個的jsfiddle here，但它不工作：

這是我的html：

<section id="page3"> 
    <section class="portfolio row"> 
     <! Hier komen cases uit xml !> 
       <div id="clearfix"></div> 
      </section> 
      <section class="portfolio_detail"> 
       <span class="prev">&lt;</span> 
       <section class="ajax_image"></section> 
       <span class="next">&gt;</span> 
       <span class="close">X</span> 
       <section class="watermark"> 
       <p>Thomas More &copy; Insilencio<br> 
       Corporate identity maximum two lines</p> 
       </section> 
      </section> 
     </section>

，這是我的jQuery：

$.ajax({ 
    type: 'GET', 
    url: "hellojames.commefort.com/onepager/data.xml", 
    dataType: "xml", 
    success: function (data) { 
     //console.log(data); 
     $(data).find("case").each(function() { 
      var dezeCase = $(this); 
      var id = dezeCase.find("id").text(); 
      var titel = dezeCase.find("titel").text(); 
      var thumb = dezeCase.find("thumb").text(); 
      var full = dezeCase.find("full"); 
      var images = full.find('img'); 
      var imagesArray = images; 
      var html = '<div class="portfolio_item col" id="' + titel + '"><img src="' + thumb + '" alt="' + titel + '"><p class="caption">' + titel + '</p></div>'; 

      $('.portfolio').prepend(html); 
      mouseHover(); 
      caseClick(imagesArray); 
     }); 
    } 
}); 

function mouseHover() { 
    $('.portfolio_item').mouseover(function() { 
     $(this).children('img').addClass("hover"); 
     $(this).children('.caption').show(); 
     //console.log('hover'); 
    }).mouseout(function() { 
     $(this).children('img').removeClass("hover"); 
     //console.log('stophover'); 
     $('.caption').hide(); 
    }); 
}; 

function caseClick(afbeeldingen) { 
    /* Detailpagina */ 
    $('.portfolio_item').on('click', function() { 
     var lightbox = $('.portfolio_detail'); 
     $(".ajax_image").empty(); 
     lightbox.show().children().hide(); 
     lightbox.animate({ 
      width: '100%', 
      height: "100%" 
     }, 'fast'); 
     lightbox.children().fadeIn('slow'); 
     var inhoud = "<img src='" + afbeeldingen + "'>"; 
     $(".ajax_image").append(inhoud); 
    }); 

};

來源

2013-02-07 Wannes

你可以添加一個錯誤處理您的Ajax和檢查是否有任何錯誤？我們無法從小提琴那裏做到這一點，因爲它最終成爲一個跨域請求。 – ryadavilli

代碼中沒有錯誤 – Wannes

不知道，但這個可能有所幫助：

由於您的div .portfolio_item是動態生成的所以您必須delegate the event to the existing closest parent elem或simply delegate to the document itself這是頁面上所有元素的父級。

function caseClick(afbeeldingen) { 
    $(document).on('click', '.portfolio_item', function() { 
     var lightbox = $('.portfolio_detail'); 
     $(".ajax_image").empty(); 
     lightbox.show().children().hide(); 
     lightbox.animate({ 
     width: '100%', 
     height: "100%" 
     }, 'fast'); 
     lightbox.children().fadeIn('slow'); 
     var inhoud = "<img src='" + afbeeldingen + "'>"; 
     $(".ajax_image").append(inhoud); 
    }); 
} //<-----------';' not required same applies to function mouseover(){}

你應該使用;時

var caseClick = function(afbeeldingen){ 
    // all your code stuff 
}; // <----------------------here `;` needed

這樣做的功能。

來源

2013-02-07 08:43:26 Jai

var $body=$(document.body); 
$body.on({ 

    'mouseover':function(e) { 
    //.. 
     } 
    ,'mouseout':function(e) {//... 
    } 

    ,'click', function() { 
    var lightbox = $('.portfolio_detail'); 
    $(".ajax_image").empty(); 
    lightbox.show().children().hide(); 
    lightbox.animate({ 
     width: '100%', 
     height: "100%" 
    }, 'fast'); 
    lightbox.children().fadeIn('slow'); 
    var inhoud = "<img src='" + $(this).data("imgsrc") + "'>"; 
    $(".ajax_image").append(inhoud); 
} 
, '.portfolio_item'); 


$.ajax({ 
type: 'GET', 
url: "hellojames.commefort.com/onepager/data.xml", 
dataType: "xml", 
success: function (data) { 
    var html=''; 
    //console.log(data); 
    $(data).find("case").each(function() { 
     var dezeCase = $(this); 
     var id = dezeCase.find("id").text(); 
     var titel = dezeCase.find("titel").text(); 
     var thumb = dezeCase.find("thumb").text(); 
     var full = dezeCase.find("full"); 


     html += '<div class="portfolio_item col" data-imgsrc="'+full.find('img')+'" id="' + titel + '"><img src="' + thumb + '" alt="' + titel + '"><p class="caption">' + titel + '</p></div>'; 



    }); 
    $(html).prependTo($('.portfolio')); 
} 
});

優化多一點包住您的項目在一個容器pefore預謀/附加

來源

2013-02-07 08:48:56 mikakun

jQuery從XML獲取數據並將其轉換爲lightbox

回答

相關問題