JQuery Bild Last

Question

Ich brauche Hilfe in jQuery. Was ich versuche zu tun, so etwas wie ein kleines Bild Galerie zu erstellen. In dieser Galerie habe ich ein paar kleine Bilder bekam und ein großes Bild. Durch ein kleines Bild klicken Ich mag jQuery, das große Bild laden und zu ersetzen.

Hier ist ein wenig versuchen, das funktioniert nicht! Aber wahrscheinlich könnte jemand mir sagen, warum.

$(function(){
   $("a.smallpics").click(function(e){
      $(".bigpic")
      .load(function () {
          $(this).hide();
          $('#loader')
            .append(this);
            .removeClass('loading')
          $(this).fadeIn();
      });
      .attr('src', this.href);
      e.preventDefault();
   });
});

und die html

<a href="pic1_big.jpg" class="smallpics" /><img src="pic1_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic2_big.jpg" class="smallpics" /><img src="pic2_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic3_big.jpg" class="smallpics" /><img src="pic3_small.jpg" style="width: 20px; height: 20px" /></a>
<div id="loader" class="loading" /><img src="pic3_big.jpg" class="bigpic" /></div>

So im besten Fall das Skript, das große Bild mit einem grauen halbtransparente Schicht bedecken würde, einen Spinner beginnen und nach dem Laden in das Bild verblassen. (Spinner ist im Hintergrund der Klasse 'Laden')

Danke für Ihre Hilfe.

Answer 1

Möglicherweise, Sie werden immer eine Menge von js Fehler, wie Sie die Dinge nicht Verkettungs korrekt sind, aber die Logik in Ihrer Lösung ist auch ein bisschen fehlerhaft.

Aber wenn ich Ihre Frage richtig verstanden habe, müssen Sie die bigpic verbergen vor die load Ereignis und auf load Ereignis, zeigen Sie sie wieder:

$(function(){
    $('a.smallpics').click(function() {        
        var $bigpic = $('.bigpic');
        var $loader = $('#loader').show();        
        $bigpic.hide().load(function () {
            $loader.fadeOut();
            $(this).fadeIn();
        }).attr('src', $(this).attr('href'));
        return false;
    });
});

Answer 2

Sie sind neu zu erfinden Art das Rad ... für die 4000000. Zeit, aber es ist eine gute Übung für jQuery lernen.

Für Javascript Debugging auf einer Webseite nichts schlägt Firefox + Firebug Plugin.

Answer 3

Sie mögen diese jQuery loader-Plugin überprüfen ... oder dieses .