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

Popular posts from this blog

c++ - Function signature as a function template parameter -

algorithm - What are some ways to combine a number of (potentially incompatible) sorted sub-sets of a total set into a (partial) ordering of the total set? -

How to call a javascript function after the page loads with a chrome extension? -