I'm using a front-end template that I downloaded for my rails app, and mostly it works fine, but I can't get the elevateZoom functionality to work properly.

Here's their code:

```
<div class="thumbnails-show grid_6 omega">
    <img src="images/details-thumb-1.jpg" data-zoom-image="images/details-1.jpg" />
</div>

```

and here's mine:

```
<div class="thumbnails-show grid_6 omega">
    <img src="<%= image_tag(@product.avatar.url(:medium)) %>" data-zoom-image="<%= image_tag(@product.avatar.url(:large)) %>" />
</div>

```

This is the relevant js:

```
var zoom_config = {zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            tint:true,
            tintColour:'#ebebeb',
            tintOpacity:0.5,
            borderSize: 0,
            zoomWindowWidth:100,
            zoomWindowHeight:300,
            lensBorderSize: 3,
            lensBorderColour: '#66bdc2', };

    $('.thumbnails-show img').elevateZoom(zoom_config);

    $('.thumbnails a').click(function(){
        var img = $('img', $(this)).clone();
        img.attr('data-zoom-image', $(this).attr('href'));

        img.elevateZoom(zoom_config);

        $('.thumbnails-show').html(img);
        return false;
    });

```

Basically what's happening is this text is still displayed in the view: " data-zoom-image="" /> along with the image for an unfound image, and the second 'zoomed' image isn't displaying properly.

Can anyone see where I'm going wrong or show me how to make it behave properly as in the original template? It seems as though a mysterious extra " is being added in somehow but I can't tell why or how.

Thanks for any help...