diaporama Jquery en utilisant JSON dynamique ne fonctionne pas

Question

Im essayant de créer un diaporama vidéo sur youtube en utilisant
http://www.aerowebstudio.net/codecanyon/jquery.slider/example_a_1.html

Il fonctionne très bien, sauf si annexant dynamiquement en utilisant JSON

partie Json fonctionne très bien et donne le choix sortie

$(document).ready(function() { 
$.ajax({ 
    url: 'http://localhost/?feed=true&json=true&callback=?', 
    type: 'get', 
    dataType: "jsonp", 
    success: function(data) { 
     var posturl = ""; 
     var htmlcode = ""; 

     <!-- 
        json parser code goes here 

       -->    

      htmlcode += '<div><div class="caption"><a href="'+postUrl+'"><h4>'+posttitle+'</h4></div><img src="'+imageUrl+'" alt=""/></a> </div>'; 

      $(".slider").append(htmlcode); 

    } 
}); 
    }); 

Json sortie

<div class="slider"> 

<div> <!-- slide 1 --> 
<div class="caption"><a href="http://localhost/exercitation-ullamco-laboris.html"> 
<h4>Exercitation ullamco laboris perspiciatis unde omnis iste voluptate</h4></a></div> 

<a href="http://localhost/exercitation-ullamco-laboris.html"> 
<img alt="" src="http://img.youtube.com/vi/wOUgRif7JRc/0.jpg"></a> 
</div> 


<div> <!-- slide 2 --> 
<div class="caption"><a href="http://localhost/lorem-ipsum-dolor-sit-amet-consectetur.html"> 
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit incididing</h4></a></div> 

<a href="http://localhost/lorem-ipsum-dolor-sit-amet-consectetur.html"> 
<img alt="" src="http://img.youtube.com/vi/K2ia36quNyo/0.jpg"></a> 
</div> 
</div> 

et la fonction de curseur

jQuery(document).ready(function($) { 
    $(".slider").slideshow({ 
    width  : 580, 
    height  : 400, 
    pauseOnHover : false, 
    transition : 'SwipeLeft' 
    //['slideLeft', 'slideRight', 'slideTop', 'slideBottom'] 
    }); 

    $(".caption").fadeIn(500); 

    // playing with events: 

    $(".slider").bind("sliderChange", function(event, curSlide) { 
    $(curSlide).children(".caption").hide(); 
    }); 

    $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) { 
    $(curSlide).children(".caption").fadeIn(500); 
    }); 
}); 

Lorsque la sortie est hardcoded cela fonctionne, mais quand il fait dynamiquement via JSON, il échoue. Il semble que déjà les styles css ne sont pas appliqués à la sortie

Quelqu'un s'il vous plaît aidez-moi à aller de l'avant. grâce

Answer 1

Enveloppez votre fonction de curseur dans une fonction nommée:

function sliderIni(){ 
    $(".slider").slideshow({ 
    width  : 580, 
    height  : 400, 
    pauseOnHover : false, 
    transition : 'SwipeLeft' 
    //['slideLeft', 'slideRight', 'slideTop', 'slideBottom'] 
    }); 

    $(".caption").fadeIn(500); 

    // playing with events: 

    $(".slider").bind("sliderChange", function(event, curSlide) { 
    $(curSlide).children(".caption").hide(); 
    }); 

    $(".slider").bind("sliderTransitionFinishes", function(event, curSlide) { 
    $(curSlide).children(".caption").fadeIn(500); 
    }); 
} 

donnons le nom sur le succès de votre ajax:

$.ajax({ 
    url: 'http://localhost/?feed=true&json=true&callback=?', 
    type: 'get', 
    dataType: "jsonp", 
    success: function(data) { 
     var posturl = ""; 
     var htmlcode = ""; 

     <!-- 
        json parser code goes here 

       -->    

      htmlcode += '<div><div class="caption"><a href="'+postUrl+'"><h4>'+posttitle+'</h4></div><img src="'+imageUrl+'" alt=""/></a> </div>'; 

      $(".slider").append(htmlcode); 
      sliderIni(); 

    } 
}); 

Assurez-vous que vous avez défini sliderIni() avant qu'il ne soit exécuté. Essayez de le définir avant la fonction AJAX ou à défaut en dehors de $(document).ready