jquery - Using "data-href" to load an image into a DIV -
i trying link that, when clicked, load image div. here's have far:
http://jsfiddle.net/andymp/kgvux/
jquery
$(function () { $(".link").click(function (e) { var url = $(this).data('href') $('.enclosure').load(url) return false; }); });
html
.enclosure { width: 400px; height: 200px; border: 1px solid black; overflow: hidden; } .link { cursor: pointer; }
html
<div class="enclosure"> <img src="http://news.bbcimg.co.uk/media/images/67419000/jpg/_67419697_hull-getty.jpg"> </div> <div class="link" data-href="http://news.bbcimg.co.uk/media/images/67424000/jpg/_67424686_67424685.jpg">click me</div>
you can't use .load()
images. also, request fail either way due cross-origin restrictions.
instead, change src
property of image:
$(function () { $(".link").click(function (e) { var url = $(this).data('href') $('.enclosure img').prop('src', url) return false; }); });
Comments
Post a Comment