jQuery Girl
  1. jQuery Girl
  3. Images chargées d’Ajax dans le carrousel ‘elastislide’
Intereting Posts
Animation complexe dans jQuery Tri Boîte de sélection avec jQuery asp.net accéder à un contrôle de la fonction statique jQuery contenant sortingable scroll div avec débordement auto plugin de filtrage de colonnes dataTables avec balises de sélection Jquery – validation – Règles Le script pour animer la hauteur de DIV change soudainement la hauteur de DIV Quelle est la meilleure pratique pour organiser une application jQuery Mobile? Knockout + Jquery Valider problème de hauteur d’accordéon Kendo dropdown rebind en utilisant jquery Le rappel dans jquery ajax ne fonctionne pas lors de l’utilisation du code de cache jquery ajax ci-dessous Javascript regex pour limiter le champ de texte à seulement des nombres (doit autoriser les clés non imprimables) Exception nsresult: emplacement «0x805e0006 ()» lors de la soumission de modifications à l’aide de x-editable in yii jqGrid Actualisation des données locales (object JSON)

Images chargées d’Ajax dans le carrousel ‘elastislide’

Images chargées via ajax comme ceci: Les images sont contenues dans des balises 

$('#sandbox').load('./ajax/profile.html li a:eq(1),li a:eq(2),li a:eq(3)').hide();

Maintenant, je veux injecter les images avec leurs étiquettes dans un carrousel appelé “elastislide”. Le code ci-dessous fonctionne, aidez-moi! 

 for (k=0; k<=$('#sandbox').children().length;k++){ var ajaximg = $('#sandbox').children()[k]; var $q = $('
  • '+ajaximg+'
    •  '); $('#carousel3').append($q); $('#carousel3').elastislide( 'add', $q ); };

    Il y a deux points où vous avez besoin d’une modification IMO,

    1. var ajaximg = $('#sandbox').children()[k] vous donne un élément DOM et non un object jQuery; vous pouvez utiliser var ajaximg = $('#sandbox').children().eq(k) place; mais il vaut mieux utiliser $(this) ;

    2. Change var $q = $('

    3. '+ajaximg+'

      4. '); to var $q = $('

    4. ').append($(this));

    Votre code serait 

      for (k=0; k<=$('#sandbox').children().length;k++){ // var ajaximg = $('#sandbox').children()[k]; var $q = $('
  • ').append($(this)); $('#carousel3').append($q); $('#carousel3').elastislide( 'add', $q ); };
    •

    Le code ci-dessus pourrait être corrigé avec le code suivant: 

     $('#sandbox').load('./ajax/profile.html li a', function(result){ $(result).find('li a').each(function(){ var $q = $('
  • ').append($(this)); $('#carousel3').append($q); $q.add(); }); });
    •

    L’idée était de charger des images dans #carousel via ajax, donc le code ci-dessous le fait tout sans charger d’abord dans #sandbox. Il est important que la fonction .elastislide () soit appelée lors du chargement du document, comme indiqué ci-après, car les images figurant dans

    • ont été ajoutées. Sinon, le carrousel ne les montrera pas. 

     $('#carousel3').load('./ajax/profile.html li'); window.onload = initStyle; function initStyle() { $( '#carousel1' ).elastislide( {minItems : 2} ); $( '#carousel2' ).elastislide( {minItems : 2} ); $( '#carousel3' ).elastislide( {minItems : 2} ); };