Question

Possible Duplicate:
Get URL from background-image Property

I’m using the Cycle Plugin and i want to create a pager/thumbnail.

HTML

<div id="slide">
  <div class="panel" id="product">

  </div>
</div>

My Image is on the background of the div. Not inside the div itself

JS Call

pager:'#thumbs',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
},

return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';

I’m trying to grab the background image on product. So instead of returning + slide.src + what would i replace this with?

The above grabs the source of the image. How can i grab the background source on the div rather than the image source?

My image is on the div not inside a <img> tag.

**Thanks. **

Answer 1

Not 100% sure on which div you’re wanting the background image of, and where you’re wanting to use it, but…

$('#product').css('background-image') will give you the URL to the background image of the product div.

So, following on from this, in your code I think you’ll need it changing to:

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image") + '" width="50" height="50" /></a></li>'; },

Final answer, thanks to rsp:

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image").replace('url(', '').replace(')', '') + '" width="50" height="50" /></a></li>'; }