Question

我的侧边栏上有一个div的缩略图库。这些jpg图像中的每一个都链接到同一页面的主div中的较大的jpg图像。我通过fadein jquery将这些加载到div中，具有以下内容：

$(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

regular expression使用Javascript string replace()方法。

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

该检查可能不是严格必要的，但它比不检查更好。

Answer 2

我和我的好朋友f8xmulder合作，这是Cletus解决方案中缺失的部分：$（this）调用是指链接，不是元素。所以Cletus的解决方案应该是这样的：

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

感谢你让我们快到了，Cletus。

Answer 3

我似乎无法对之前的答案发表评论。

@xanadont，在注意到奇怪的行为后，我意识到（y）我们的解决方案，特别是第一行，实际上是拉入默认情况下在.ngg-imagebrowswer div中打开的图像。遗憾的是，它总是加载相同的图像，因此将相同的文件路径转换为相同的flv。我们需要做的是从click事件中提取href。像这样：

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

对我来说，至少对我来说至关重要。但不是Javascript。

编辑：我已经做了更多挖掘并找到了解决方案。
基本上，我需要获取所选缩略图的click src，将其放入ConvertToFLV，并在url wrap中调用它。
完整代码如下：

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

JQuery File扩展重写，将新url加载到隐藏的div中

3 个答案: