Filter the output images links with javascript

Question

I'm using prettyPhoto lightbox with wordpress

And i need the wordpress gallery thumbnails 150px showing instead of default prettyPhoto thumbnails (They using the big images as thumbnail)

This the code that create the thumbnails

for (var i=0; i < pp_images.length; i++) {
    if(!pp_images[i].match(/\b(jpg|jpeg|png|gif)\b/gi)){
        classname = 'default';
        img_src = '';
    }else{
        classname = '';
        img_src = pp_images[i];
    }
    toInject += "<li class='"+classname+"'><a href='#'><img src='" + img_src + "' width='75' height='75' alt='' /></a></li>";
};

And this is the output of the images links

<img src="http://127.0.0.1/wordpress/photopname1.jpg" width="75" height="75" alt="">
<img src="http://127.0.0.1/wordpress/photopname2.gif" width="75" height="75" alt="">
<img src="http://127.0.0.1/wordpress/photopname3.png" width="75" height="75" alt="">

I need the output to be like this

<img src="http://127.0.0.1/wordpress/photopname1-150x150.jpg" width="75" height="75" alt="">
<img src="http://127.0.0.1/wordpress/photopname2-150x150.gif" width="75" height="75" alt="">
<img src="http://127.0.0.1/wordpress/photopname3-150x150.png" width="75" height="75" alt="">

Adding befor the images extension "-150x150"

Thank you :)

Answer 1

Solution that handles multiple .s

var size = '-150x150';



for (var i=0; i < pp_images.length; i++) {
  if(!pp_images[i].match(/\b(jpg|jpeg|png|gif)\b/gi)){
      classname = 'default';
      img_src = '';
  }else{
      classname = '';
      img_src = pp_images[i];
  }

  //ex: img_src = a.b.png
  var src = img_src.split('.'); //ex: ['a', 'b', 'png']
  src[src.length - 2] = src[src.length - 2] + size; //ex: ['a', 'b-150x150', 'png']
  src = src.join('.');//a.b-150x150.png

  toInject += "<li class='"+classname+"'><a href='#'><img src='" 
           + src + "' width='75' height='75' alt='' /></a></li>";
};

Answer 2

If i understand you right , you need simply this:

 toInject += "<li class='"+classname+"'><a href='#'><img src='" + img_src.split(".").join("-150x150.") + "' width='75' height='75' alt='' /></a></li>";

Update after question edit: Is it possible for you to add a full path in the end like this:

 toInject += "<li class='"+classname+"'><a href='#'><img src='http://127.0.0.1/wordpress/" + img_src.split(".").join("-150x150.") + "' width='75' height='75' alt='' /></a></li>";

or you got your pp_images array already with full paths?