jquery/javascript replace image filename in path

Question

i need to replace a filename in a path. I found a few solutions for this but I couldnt get any of them to work with my particular situation.

I have 3 elements to work with here....

the trigger image: http://domainname.com/path/to/files/product_thumb_small/public/THUMB-1.jpg

the replaced image: http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg

the replaced href: http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg

So what I need to do is when I mouse over the trigger image it replaces the replaced image and replaced href image file names but keeps the path as it was.

so when I mouse over the trigger image eg:

<div class="product-img-thumb-small">
  <a title="" href="">
    <img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-4.jpg" />
  </a>
</div>

this:

  <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg">
  </a>

becomes this:

  <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/THUMB-4.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/THUMB-4.jpg">
  </a>

Here is my HTML code:

<div class="product-preview-wrapper">
  <div class="product-img-thumb">
    <div id="wrap">
    <a class="cloud-zoom" href="http://domainname.com/path/to/files/product_full/public/FULL-IMAGE.jpg">
    <img src="http://domainname.com/path/to/files/product_preview/public/PREVIEW-IMAGE.jpg">
    </a>
    </div>
  </div>
</div>
<div class="product-image-wrapper">
  <div class="item-list">
    <ul>
      <li class="first">
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-1.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-2.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-3.jpg" /></a></div>
      </li>
      <li>
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-4.jpg" /></a></div>
      </li>
      <li class="last">
        <div class="product-img-thumb-small"><a title="" href=""><img src="http://domainname.com/path/to/files/product_thumb_small/public/THUMB-5.jpg" /></a></div>
      </li>
    </ul>
  </div>
 </div>

I'm using jQuery. I have this so far:

$('.product-image-wrapper .product-img-thumb-small img').hover(function () {

   var newImg = $(this).attr("src");
   $(".product-preview-wrapper a.cloud-zoom").attr("href",newImg); 
   $(".product-preview-wrapper a.cloud-zoom img").attr("src",newImg);

});

But the issue is with the path.. I dont want ot replace the path.. just the image filename.

Any help with this is much appreciated.

Regards C

I think you should add the jquery you have right now and remove all the unnecessary code...just add what is necessary to clearify your question. — Bas Slagter
– Bas Slagter, Commented Oct 25, 2011 at 7:53
I dont really have any jquery.. I have as far as this: $('.product-image-wrapper .product-img-thumb-small img').hover(function () {}) — Cybercampbell
– Cybercampbell, Commented Oct 25, 2011 at 8:10
I tried loads of things eg: preview.attr('src').substring(0,preview.attr('src').lastIndexOf('/')+1 ) but I dont see the point of pasting the things i tried that DONT work. — Cybercampbell
– Cybercampbell, Commented Oct 25, 2011 at 8:28

Bart Vangeneugden · Accepted Answer · 2011-10-25 08:14:31Z

2

To replace the href in your cloud-zoom element. Try this:

$(".product-img-thumb-small img").mouseover(function(){
   var imgUrl = $(this).attr("src");
   $(".cloud-zoom").attr("href",imgUrl); 
   $(".cloud-zoom img").attr("src",imgUrl);
});

jsFiddle

edited Oct 25, 2011 at 8:14

answered Oct 25, 2011 at 7:58

Bart Vangeneugden

3,4464 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cybercampbell Over a year ago

sorry for the confusion. I waht the filenames (without path) for the image in <div class="product-img-thumb-small"> to replace the filname (leaving the path as it is) the the href in <a class="cloud-zoom" href=""> and also replace the image src in that same <a> tag while also keep the original path as they where.. just replaceing the image filename. I hope that makes more sence.

Cybercampbell Over a year ago

the replacement take place with the image in <div class="product-img-thumb-small"> has mouse over/hover

Bart Vangeneugden Over a year ago

Oh I see, check if the updated solution matches your question

Cybercampbell Over a year ago

Thank but I still have the issue of the path need to stay the same as it was ... only the filename is replaced.

Cybercampbell Over a year ago

is it better to use mouseover() rather than hover()

Cybercampbell · Accepted Answer · 2011-10-25 15:54:43Z

I worked it out:

$('.product-image-wrapper .product-img-thumb-small img').mouseover(function () {

        var preview = $('.product-preview-wrapper .product-img-thumb img');
        var previewPath = preview.attr('src').substring(0,preview.attr('src').lastIndexOf('/') +1 );
        var zoom = $('.product-preview-wrapper .product-img-thumb a.cloud-zoom');
        var zoomPath = zoom.attr('href').substring(0,zoom.attr('href').lastIndexOf('/') +1 );
        var imageName = $(this).attr('src').substring($(this).attr('src').lastIndexOf('/') +1);

       $(".product-preview-wrapper a.cloud-zoom").attr("href", zoomPath + imageName); 
       $(".product-preview-wrapper a.cloud-zoom img").attr("src", previewPath + imageName);

    });

Please let me know if there is a better way though.

Collectives™ on Stack Overflow

jquery/javascript replace image filename in path

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related