Расширение файла JQuery переписать, загрузить новый URL в скрытый div

Question

У меня есть галерея миниатюр в div на моей боковой панели. Каждое из этих изображений jpg ссылается на увеличенное изображение jpg в главном разделе той же страницы. У меня есть эти загрузки в div через Fadein JQuery со следующим:

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

Я пытаюсь переписать эту строку URL, чтобы расширение .jpg динамически переписывалось как расширение .flv. Затем эта ссылка будет вставлена ​​в основную область div и отображена. Вот код, который я пытался заставить работать.

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

Что происходит в настоящее время: изображение не перезаписывается, JPG загружается в браузер как обычная ссылка на изображение. Я на самом деле не программист Javascript, поэтому я не в себе. Любые идеи, чтобы помочь мне было бы здорово! Заранее спасибо.

Answer 1

Используйте регулярное выражение с методом Javascript string replace () .

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

Эта проверка может быть не обязательно строго, но лучше, чем не проверка.

Answer 2

Я не могу комментировать предыдущие ответы.

@ xanadont, заметив любопытное поведение, я понял, что (y) наше решение, особенно первая строка, фактически вытягивает изображение, которое открывается по умолчанию в div .ngg-imagebrowswer. К сожалению, всегда загружает одно и то же изображение и поэтому преобразует тот же путь к файлу в один и тот же FLV. Что нам нужно сделать, это извлечь href из события click. Вот так:

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

Что для меня имеет хотя бы умеренный смысл. Но не в Javascript.

РЕДАКТИРОВАТЬ: я сделал больше копать и выяснил решение.
По сути, мне нужно захватить клик src выбранного эскиза, поместить его в ConvertToFLV и вызвать его внутри переноса URL.
Полный код ниже:

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

РЕДАКТИРОВАТЬ: дополнительные проблемы возникли. Нажав на первый эскиз видео, вы получите правильный URL. Нажатие последующих больших пальцев приводит к клону того же URL. Пересмотренный код для стиля ниже:

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

** ЗАКЛЮЧИТЕЛЬНОЕ РЕДАКТИРОВАНИЕ: Проблема решена! **

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

Answer 3

Я работал с моим хорошим другом f8xmulder, отсутствующим фрагментом решения Cletus: вызовы $ (this) относятся к ссылке, не элемент Так что решение Cletus должно выглядеть так:

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

Спасибо, что почти привели нас туда, Клетус.