Quelqu'un me dit pourquoi ce Jquery ne fonctionne pas dans IE?

Question

Le code suivant fonctionne très bien en chrome FF etc, mais pas IE, quelqu'un sait pourquoi?

Fondamentalement, tout fonctionne accepter le remplacement de l'image attribut

$("#container #main_image img#largeId").attr({ src: largePath }); 

Même le reste de la fonction-à-dire les classes de permutation fonctionne, tout simplement pas le remplacement de l'image. L'exemple complet peut être vu ici example cliquez sur une image et essayez d'échanger entre les vignettes sur la droite dans la fenêtre modale.

L'effet que je vais faire est similaire à celui de ce site Web webdesignerwall, le jQuery est presque exactement le même - bien que cela fonctionne avec IE !!!!

jQuery(document).ready(function($) { 

    $("a.group").fancybox({ 
    'frameWidth':966, 
    'frameHeight': 547, 
    'hideOnContentClick': false, 
    'overlayOpacity': 0.85, 
    'callbackOnShow': function() { 
     $("#container ul#thumbnails li a").click(function(){ 
     var largePath = $(this).attr("title"); 
     $("#container #main_image img#largeId").fadeOut().hide(); 
     $("#container #main_image img#largeId").attr({ src: largePath }); 
     $("#container #main_image img#largeId").fadeIn("slow"); 
     $('.active').removeClass('active'); 
     $(this).addClass("active");return false; 
     }); 
    } 
    }); 

}); 

Answer 1

Fondamentalement, cela a été résolu en changeant l'élément de destination d'un «ID» à une «classe».

Cela doit être fait parce que Fancybox duplique l'identifiant lors de l'appel de la fenêtre modale!

Un grand merci pour tout le monde aide ici!

Answer 2

Avez-vous utilisé Fiddler pour voir si l'image est demandée?

Cela fonctionne toujours pour moi: $ ("# foo"). Attr ("src", url);

Vous pouvez aussi simplement faire un remplacement à la place.

$ ('# foo'). Before ('< img src = "" .../>') .remove();

Answer 3

Les chemins répertoriés dans l'attribut title de vos balises <a> sont incorrects (case à cocher). Plus précisément,

<a class="group" href="#hidden" title="images/2_large.jpg"> 

devrait être

<a class="group" href="#hidden" title="Images/2_large.jpg"> 

Firefox est un peu plus indulgent, mais IE est de rejeter ces manigances.

Answer 4

En plus de la réponse de BipedalShark, j'ai remarqué quelques petites choses qui sorta coincé dans mon esprit:

1. Vous appelez jquery.min.js de Google dans la tête de votre page.
2. Plus tard, vous appelez fancybox.js vers le bas de la page.
3. Enfin, vous appelez un autre jquery.js après lui.

Donc, je sais (ainsi qu'une solution possible) est-il possible que ce soit partiellement responsable du problème? Ou est-ce que fancybox doit être chargé en bas de la page?

Answer 5

Ok, je l'ai compris. c'était douloureux et je conclus que le plugin est complètement faux :)

Le plugin duplique le contenu caché et l'insère dans la 'boîte'. Cela signifie que vous vous retrouvez avec des identifiants en double partout, ce qui bien sûr est invalide et des choses amusantes commencent à se produire. Lorsque vous faites votre sélecteur pour $ ('# largeId'), il fait référence à la photo originale cachée. Vous pouvez le voir si vous supprimez le style display: none de #hidden. La conclusion est d'utiliser une lightbox qui ajoute réellement le contenu plutôt que de le dupliquer. Je n'aime pas ce que l'auteur a fait entendre.

Vous pouvez modifier le code du plugin pour utiliser append au lieu d'utiliser (ligne 112 du plugin) comme celui-ci

var newHtml = $('<div id="fancy_div" />').append(target); 
_set_content(newHtml.html(), opts.frameWidth, opts.frameHeight); 

Vous devrez alors faire face à remettre le code html lorsque la visionneuse est fermée. Cependant je serais plus enclin à trouver une meilleure lightbox!