JQuery File extension rewrite, load new url into hidden div

Question

I have a thumbnail gallery in a div on my sidebar. Each of these jpg images links to the larger jpg image in the main div of the same page. I have these loading in a div via fadein jquery with the following:

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

What I'm trying to do is rewrite that url string so the .jpg extension is dynamically rewritten as an .flv extension. That link would then be inserted into the main div area and displayed. Here is the code I've been trying to get to work.

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

What currently happens: Image is not rewritten, the JPG loads in the browser like a normal image link. I'm not really a Javascript programmer, so I'm out of my depth. Any ideas to help me along would be lovely! Thanks in advance.

Answer 1

Use a regular expression with the Javascript string replace() method.

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

That check may not be strictly necessarily but it's better than not checking.

Answer 2

So I've taken cletus' suggestion of rewriting the url with regex. I'm sure I'm doing something wrong. I've put the code in place like so:

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

});

The same behavior occurs, and in the Javascript console an error for the code appears:
Error: missing ) after argument list
Line: 175, Column: 54
Source Code:
$(this).attr("src", src.replace(/.jpg$/i, ".flv");

Any ideas?

Answer 3

I worked with my good friend f8xmulder, the missing piece from Cletus' solution: the $(this) calls are referring to the link, not the element. So Cletus' solution should look like this:

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

Thanks for getting us almost there, Cletus.

Answer 4

I seem to be unable to make comments upon previous answers.

@xanadont, after noticing curious behavior I realized that (y)our solution, specifically the first line, is actually pulling in the image that opens by default in the .ngg-imagebrowswer div. Which unfortunately always loads the same image and therefore converts that same file path to the same flv. What we need to do is pull the href from the click event. Like so:

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

Which to me makes at least moderate sense to me. But not to Javascript.

EDIT: I've done more digging and figured out the solution.
Essentially, I need to grab the click src of the thumbnail being selected, put that into ConvertToFLV, and call it inside the url wrap.
Full code below:

$(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: Additional problems have cropped up. Clicking on the first video thumbnail brings up the proper URL. Clicking subsequent thumbs brings up a clone of the same URL. Revised code for style is below:

$(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 solved!**

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