jquery - Dynamically getting filename

Question

I'm pretty new to jquery and coding in general. I'm trying to implement the jquery slideshow from http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/. I made it work through click instead of hover. I want the background of a div (with background repeat x and y) to change in the same manner as the thumbnail controls the main image.

It works fine with a given image: $('#bgs').css('background-image','url(gallery/bgs/img_3.jpg)'); but I want it to work by dynamically getting the right filename in the same way that the main image does. I just don't know what to change.

The code is as follows: http://pastebin.com/hvVYQyru

I hope I've made myself clear :). I really hope you Guys can get me on the right track.

Regards Martin Schack

Answer 1

假设您的bgs图像结构与主图像和缩略图相同，请更改此行：

$('#bgs').css('background-image','url(gallery/bgs/img_3.jpg)');

至：

$('#bgs').css('background-image', 'url(' + $(this).attr('src').replace('thumb/', 'bgs/') + ')');

Answer 2

尝试这个：

$('#bgs').css('background-image','url(' + $(this).attr('src').replace('thumb/', 'bgs/') + ')');

更新

要使用动画达到相同的效果，需要做更多的工作。由于它不是您原始问题的一部分，因此我给您留下了一个很好的链接来检查：

http://snook.ca/archives/javascript/jquery-bg-image-animations/