JQuery Dateiendung neu schreiben, neue URL in verstecktes div laden

Question

Ich habe eine Thumbnail-Galerie in einem div auf meiner Sidebar. Jedes dieser JPG-Bilder ist mit dem größeren JPG-Bild im Hauptteil derselben Seite verlinkt. Ich habe in einem div diese Beladung über fadein jquery mit dem folgenden:

$(function() { 
$('.vid-gallery-thumbnail a').click(function() { 
    newImg = $(this).attr('href'); 
    $('.ngg-imagebrowser img').fadeOut('slow', function(){ 
    $('.ngg-imagebrowser').css({ height: $(".ngg-imagebrowser img").height() }); 
    $('.ngg-imagebrowser img').attr({ src: newImg }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.ngg-imagebrowser').animate({ height: $(".ngg-imagebrowser img").height() }, 'slow', function(){ 
    $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    }); 
    return false; 
}); 
}); 

Was ich versuche, die URL-Zeichenfolge zu tun ist, neu zu schreiben, so dass die Erweiterung .jpg dynamisch als Erweiterung .flv neu geschrieben wird. Dieser Link wird dann in den Hauptbereich eingefügt und angezeigt. Hier ist der Code, den ich versucht habe zu arbeiten.

$(function() { 
$('.vid-gallery-thumbnail a').click(function() { 
    if (var suffix == null) { suffix = ".flv"; } 
    fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf(".jpg")); 
    var newFLV = $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix)); 
    $('.ngg-imagebrowser img').fadeOut('slow', function(){ 
    $('.ngg-imagebrowser').css({ height: $(".ngg-imagebrowser img").height() }); 
    $('.ngg-imagebrowser img').attr({ src: newFLV }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.ngg-imagebrowser').animate({ height: $(".ngg-imagebrowser img").height() }, 'slow', function(){ 
    $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    }); 
    return false; 
}); 
}); 

Momentan passiert: Bild wird nicht neu geschrieben, das JPG wird im Browser wie eine normale Bildverknüpfung geladen. Ich bin nicht wirklich ein Javascript-Programmierer, also bin ich überfordert. Irgendwelche Ideen, um mir zu helfen, wäre schön! Danke im Voraus.

Answer 1

Verwenden Sie eine regular expression mit der Javascript string replace() Methode.

var src = $(this).attr("src"); 
if (typeof src != "undefined") { 
    $(this).attr("src", src.replace(/\.jpg$/i, ".flv"); 
} 

Diese Überprüfung ist nicht zwingend notwendig, aber es ist besser als nicht zu überprüfen.

Answer 2

Also habe ich den Vorschlag von Cletus genommen, die URL mit Regex neu zu schreiben. Ich bin mir sicher, dass ich etwas falsch mache. Ich habe den Code wie folgt eingefügt:

$(function() { 
$('.vid-gallery-thumbnail a').click(function() { 
newFLV = $(this).attr('href'); 
var src = $(this).attr("src"); 
if (typeof src != "undefined") { 
    $(this).attr("src", src.replace(/\.jpg$/i, ".flv"); 
    var a = $('<a/>').attr('href', src); 
} 
$('.ngg-imagebrowser img').fadeOut('slow', function(){ 
    $('.ngg-imagebrowser').css({ height: $(".ngg-imagebrowser img").height() }); 
    $('.ngg-imagebrowser img').wrap(a).attr({ src: newFLV }).css({ margin: "0", visibility: "hidden" }).show(); 
    .wrap("<a href='" + item.src + "'></a>"); 
    $('.ngg-imagebrowser').animate({ height: $(".ngg-imagebrowser img").height() }, 'slow', function(){ 
    $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
}); 
return false; 
}); 

});

Das gleiche Verhalten tritt auf, und in der Javascript einen Fehler Konsole für den Code erscheint:
Fehler: fehlt) nach Argumentliste
Line: 175, Säule: 54
Source Code:
$ (this) .attr ("src", src.replace (/ jpg $/i ".flv");.

Irgendwelche Ideen

Answer 3

ich mit meinem guten Freund f8xmulder gearbeitet, das fehlende Stück von Cletus' Lösung? : Die Aufrufe $ (this) beziehen sich auf den Link nicht das Element. Cletus 'Lösung sollte also so aussehen:

var img = $('.ngg-imagebrowser img'); 
var convertToFLV = img.attr("src"); 
if (convertToFLV != undefined) { 
    convertToFLV = convertToFLV.replace(/\.jpg$/i, ".flv"); 
} 

Danke, dass wir fast da sind, Cletus.

Answer 4

Ich bin anscheinend nicht in der Lage, Kommentare zu früheren Antworten zu machen.

@xanadont, nachdem ich merkwürdiges Verhalten bemerkt habe, erkannte ich, dass (y) unsere Lösung, speziell die erste Zeile, tatsächlich das Bild einzieht, das standardmäßig im .ngg-Bildbrowswer-div geöffnet wird. Das lädt leider immer das selbe Bild und konvertiert daher den selben Dateipfad in das selbe flv. Was wir tun müssen, ist, die href aus dem click-Ereignis zu ziehen. Wie so:

var img = $(this).attr('href'); 
var convertToFLV = img.attr("src"); 
if (convertToFLV != undefined) { 
convertToFLV = convertToFLV.replace(/\.jpg$/i, ".flv"); 
} 

Was für mich macht mindestens Sinn für mich. Aber nicht zu Javascript.

EDIT: Ich habe mehr Graben und herausgefunden, die Lösung.
Im Wesentlichen muss ich den Klick src der Miniatur wählen, die ausgewählt wird, setzen Sie das in ConvertToFLV und rufen Sie es innerhalb des URL-Wrap auf.
Voll Code unten:

$(function() { 
$('.vid-gallery-thumbnail a').click(function() { 
newFLV = $(this).attr('href'); 

var convertToFLV = $(this).attr('href'); 
if (convertToFLV != undefined) { 
    convertToFLV = convertToFLV.replace(/\.jpg$/i, ".flv"); 
} 

$('.ngg-imagebrowser').fadeOut('slow', function(){ 
    $('.ngg-imagebrowser').css({ height: $(".ngg-imagebrowser img").height() }); 
    $('.ngg-imagebrowser img').wrap('<a href="' + convertToFLV + '"></a>').attr({ src: newFLV }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.ngg-imagebrowser').animate({ height: $(".ngg-imagebrowser img").height() },'slow', function(){ 
    $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
}); 
return false; 
}); 
}); 

EDIT: Zusätzliche Probleme aufgetaucht sind. Wenn Sie auf das erste Video-Thumbnail klicken, wird die richtige URL angezeigt. Durch Klicken auf nachfolgende Thumbnails wird ein Klon derselben URL angezeigt. Überarbeitete Code für Stil ist unter:

$(function() { 
$('.ngg-gallery-thumbnail a').click(function() { 
    newImg = $(this).attr('href'); 
    $(function(){ 
    $('.ngg-imagebrowser img').attr({ src: newImg }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.ngg-imagebrowser').animate({ height: '650px;' }, 'slow', function(){ 
    $('.vid-imagebrowser div').hide(); // Hide video div 
$('.ngg-imagebrowser div').show(); // Show image div 
    $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    }); 
    return false; 
}); 

$('.vid-gallery-thumbnail a').click(function() { 
    newFLV = $(this).attr('href'); 

    var convertToFLV = $(this).attr('href'); 
    if (convertToFLV != undefined) { 
    convertToFLV = convertToFLV.replace(/\.jpg$/i, ".flv"); 
    } 

    $(function(){  
    $('.vid-imagebrowser img').wrap('<a href="' + convertToFLV + '"></a>').attr({ src: newFLV }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.vid-imagebrowser').animate({ height: '650px;' },'slow', function(){ 
$('.ngg-imagebrowser div').hide(); // Hide image div 
$('.vid-imagebrowser div').show(); // Show video div 
    $('.vid-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    Anarchy.FLV.go(); //recall An-Arcos script 
    }); 
    return false; 
}); 
}); 

** FINAL EDIT: Problem gelöst **

$(function() { 
$('.ngg-gallery-thumbnail a').click(function() { 
    $('div.vid-imagebrowser span').remove(); 
    newImg = $(this).attr('href'); 
    $('.ngg-imagebrowser img').attr({ src: newImg }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.ngg-imagebrowser').animate({ height: '650px;' }, 'slow', function(){ 
    $('.vid-imagebrowser div').hide(); // Hide video div 
    $('.ngg-imagebrowser div').show(); // Show image div 
     $('.ngg-imagebrowser img').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    return false; 
    }); 

    $('.vid-gallery-thumbnail a').click(function() { 
    $('div.vid-imagebrowser span').remove(); 
    newFLV = $(this).attr('href'); 

    var convertToFLV = $(this).attr('href'); 
    if (convertToFLV != undefined) { 
    convertToFLV = convertToFLV.replace(/\.jpg$/i, ".flv"); 
    } 
    $('.ngg-imagebrowser div').hide(); // Hide image div 
    $('.vid-imagebrowser img').attr({ src: newFLV }) 
    $('.vid-imagebrowser a').attr({ href: convertToFLV }).css({ margin: "0", visibility: "hidden" }).show(); 
    $('.vid-imagebrowser').animate({ height: '650px;' },'slow', function(){ 
$('.ngg-imagebrowser div').hide(); // Hide image div 
$('.vid-imagebrowser div').show(); // Show video div 
    $('.vid-imagebrowser object').css({ visibility: "visible", display: "none" }).fadeIn('slow'); 
    }); 
    Anarchy.FLV.go(); //recall An-Arcos script 
    return false; 
    }); 
});