externes jQuery

[michey]

Hallo

Ich habe mir mit Hilfe eines Tuts, aus dem JS Missing Manuals, das ich erweitert habe, eine jQuery FadeIn-Out-Galerie gebastelt ->Beispiel.
Scheint auch alles wie gewollt zu funktionieren.
Da ich 4 Galerieseiten habe möchte ich den jQuery Code aus der HTML-Datei rausnehmen und extern laden im Stil eines PlugIn,was es ja streng genommen gar nicht ist, da es nur auf meine Umgebung zugeschnitten ist.
Habe also versucht daraus eine externe jQuery-Funktion zu machen, die dann bei document ready aufgerufen wird.

PHP-Code:

/*!
 * jQuery Fade Gallery 
*/ 
(function($){

$.fn.fade_gallery = function() {

    $('#gallery a:next').addClass("checked");                
    $('#gallery img').each(function(i) {
    
        var imgFile = $(this).attr('src');    
        var preloadImage = new Image();
    var clickImage = new Image();
      var imgExt = /(.w{3,4}$)/;
  preloadImage.src = imgFile.replace(imgExt,'_h$1');
  clickImage.src = imgFile.replace(imgExt,'_c$1');
    
    $(this).hover(
        function() {
            $(this).attr('src', preloadImage.src);
            
            },
        function () {
        var currentSource = $(this).attr('src');
            $(this).attr('src', imgFile);
            }); // end hover
    
    $(this).click(
                function() {
            $('#gallery img').removeClass("checked");
            
        $(this).addClass("checked");        
    }); // end click
    
    
        }); // end each

    
    $('#gallery a').click(function(evt) {
    
    //fade out _over div 
    var oldPrev_over = $('#prev_over img');
    oldPrev_over.hide();
                                          
                                          
    //hide caption                                              
    $('#caption').html( $(this).attr('alt') );
      var Caption = $("#caption");
      Caption.hide();
      
         evt.preventDefault();                      
         //don't follow link
        //get path to new image
       var imgPath = $(this).attr('href');
                
       //get reference to old image
       var oldImage = $('#photo img');
            var oldPrev = $('#preview img'); 
         //check to see if they're the same image
                
             //create HTML for new image
             var newImage = $('<img src="' + imgPath +'">'); 
            var  newPrev = $('<img src="' + imgPath +'">');
                          
             //make new image invisible
             newImage.hide();
            newPrev.hide();             
                          
             //add to the #photo div
             $('#photo').prepend(newImage);
             $('#preview').prepend(newPrev);                                       
                      
             //fade in new image
             newImage.fadeIn(1000);
             newPrev.fadeIn(850);             
             Caption.fadeIn(850);
                         
             //fade out old image and remove from DOM
             oldImage.fadeOut(1000,function(){
             $(this).remove();
                             });
             //fade out old Prev and remove from DOM                
            oldPrev.fadeOut(850,function(){
             $(this).remove();
                             });
         
    }); // end click
        
        $('#gallery a:first').click();
        $('#gallery a img:first').addClass("checked");
                
        //fade in _over div         
$('#gallery a').mouseover(function(evt) {

var imgPath = $(this).attr('href');    

var  newPrev_over = $('<img src="' + imgPath +'">');

$('#prev_over').prepend(newPrev_over);
newPrev_over.fadeIn(400);

    });
//fade out _over div
$('#gallery a').mouseout(function(evt) {

var oldPrev_over = $('#prev_over img');
oldPrev_over.fadeOut(400,function(){
             $(this).remove();
                                          });

var oldPrev_over = $('#prev_over img');    


oldPrev_over.fadeOut(600,function(){
              $(this).remove();                             
              });

    }); // end hover    

     
}; // fn.fade_gallery 


})(jQuery); 


PHP-Code:

$(document).ready(function() {
    
    fade_gallery () {        
    
    }; 
     
}); // end ready 


Funktioniert so aber nicht, darum meine Frage: ist irgendwo codemässig etwas falsch oder geht das, was ich beabsichtige prinzipiell gar nicht?

[Nightflyer]

Probier mal

$.fade_gallery () {};

[michey]

Danke, geht aber immer noch nicht.
Wahrscheinlich gibt es noch Fehler im externen jQ Code.

[Dharokan]

Warum denn überhaupt als Plugin?
Du kannst das doch als stinknormale JS Funktion schreiben und trotzdem auslagern...

Neugierig hinterfragende Grüße,

[michey]

...und wie würde das denn aussehen?

[Nightflyer]

function bla{
 //do something
}

bla();

[Dharokan]

Und den Aufruf bla() dann am besten in's document.ready packen:

PHP-Code:

$(document).ready(function() {
    
    bla (); 
     
}); // end ready 


[michey]

Seltsamerweise funktioniert es nicht mit der externen Funktion, die dann im html bei document ready aufgerufen wird.
Wenn ich alles auslagere, mitsamt document ready, genauso wie ich es vorher im html hatte, dann gehts.
Wird wohl irgend ein unscheinbarer, aber nachhaltig wirkender Anfängerfehler sein, den ich vielleicht noch ausmerzen kann und sonst hätte ich immer noch die Möglichkeit es als Ganzes auszulagern.

Jedenfalls vielen Dank euch beiden für die nette Hilfestellung.

[Nicmare]

nur noch als ergänzung. bei einem aktuellen projekt habe ich das auch so gemacht. die Datei nennt sich pulse.js und wird als funktion aufgerufen.