开发者

Using prependTo to display full size images of thumbnails

I have a default image on my site using prependTo:

$('<li></li>').prependTo('#files')
              .html('<img src="/media/sample1.jpeg" alt="" /><br />')
              .addClass('success');

Above the default image are 3 thumbnails, which are written as:

<div id="gallery">
    <ul> 
        <li>
            <a href="/media/glasses1.png" title="styling yourself w/ this armani pair">
                <img src="/media/glasses1.png" width="72" height="72" alt="" /> 
            </a>
        </li> 
        <li>
            <a href="/media/glasses0.png" title="styling yourself w/ this guess pair">
                <img src="/media/glasses0.png" width="72" height="72" alt="" /> 
            </a>
        </li> 
        <li>
            <a href="/media/glasses2.png" title="styling yourself w/ this guess pair">
                <img src="/media/glasses2.png" width="72" height="72" alt="" /> 
            </a>
 开发者_Go百科       </li>
    </ul>
</div>

How do I detect a mouseover on the thumbnail so that I can replace the default image with the full size image of the thumbnail?


something like:

$('#gallery img').mouseenter(function() {
    $('#files img.success').attr("src", $(this).attr("src"));
});

you'll need to figure out what to do on .mouseleave()


You need to clone the actual image from the gallery container, just copying the image source does not force the browser to rerender.

EDIT: From what you describe in your comments I think this should work for you

$('#gallery img').mouseenter(function() {
  var img = $('<img alt=""/>').attr('src', $(this).data('other'));
  $('#files img').replaceWith(img);
});

And add a data-other attribute on your thumbnails:

<a href="/media/glasses1.png" title="styling yourself w/ this armani pair">
  <img src="/media/glasses1.png" data-other="replacementImage.png" width="72" height="72" alt="" /> 
</a>

If you have a naming convention or some other way to determine the url to the new image without adding the attribute, you can do that instead.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜