JQuery Dateierweiterung umschreiben, laden neue url in versteckte div

Question

Ich habe eine Thumbnail-Galerie in einem Div in meiner Seitenleiste. Jedes dieser jpg-Bilder Links zu den größeren jpg-Bild in der Haupt-Div der gleichen Seite. Ich habe diese Laden in einem div über fadein Jquery mit den 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 zu tun versuche, ist umschreiben, dass url-String, so dass die .jpg-Erweiterung dynamisch als eine .flv-Erweiterung umgeschrieben wird. Dieser Link würde dann in den Haupt-Div-Bereich eingefügt und angezeigt werden. Hier ist der Code, den ich versucht habe, zum Funktionieren zu bringen.

$(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;
 });
});

Was derzeit geschieht: Das Bild wird nicht umgeschrieben, das JPG wird im Browser wie ein normaler Bildlink geladen. Ich bin nicht wirklich ein Javascript-Programmierer, so bin ich nicht in der Lage. Jede Idee, die mir weiterhilft, wäre toll! Vielen Dank im Voraus.

Answer 1

Verwenden Sie eine regulärer Ausdruck mit dem Javascript string replace() Methode.

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

Diese Kontrolle ist vielleicht nicht unbedingt notwendig, aber besser als keine Kontrolle.

Answer 2

Ich arbeitete mit meinem guten Freund f8xmulder, das fehlende Stück von Cletus' Lösung: die $(this)-Aufrufe beziehen sich auf den Link, nicht das Element. Cletus' Lösung sollte also wie folgt aussehen:

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

Danke, dass du uns fast dahin gebracht hast, Cletus.

Answer 3

Ich scheine nicht in der Lage zu sein, Kommentare zu früheren Antworten abzugeben.

@xanadont, nachdem ich merkwürdiges Verhalten bemerkt habe, habe ich festgestellt, dass (y)unsere Lösung, insbesondere die erste Zeile, tatsächlich das Bild einzieht, das standardmäßig im .ngg-imagebrowswer div geöffnet wird. Das lädt leider immer das gleiche Bild und wandelt daher den gleichen Dateipfad in die gleiche flv-Datei um. Was wir tun müssen, ist die href aus dem Klick-Ereignis zu ziehen. Etwa so:

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

Das macht für mich zumindest einigermaßen Sinn. Aber nicht für Javascript.

EDIT: Ich habe nachgeforscht und die Lösung herausgefunden.
Im Wesentlichen muss ich die Klick-SRC des ausgewählten Thumbnails erfassen, diese in ConvertToFLV einfügen und innerhalb des URL-Wraps aufrufen.
Vollständiger 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: Es sind weitere Probleme aufgetaucht. Wenn Sie auf das erste Video-Miniaturbild klicken, wird die richtige URL angezeigt. Wenn Sie auf die folgenden Thumbnails klicken, wird ein Klon der gleichen URL angezeigt. Der überarbeitete Code für den Stil ist unten zu sehen:

$(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;
  });
 });