problemem jest ten fragment kodu:
Kod
$('a').on('click', function(event){
event.preventDefault();
var img_url = $('this').attr('href')
$('body').append('<img id="center" src=" '+ img_url+' "/>')
event.preventDefault();
var img_url = $('this').attr('href')
$('body').append('<img id="center" src=" '+ img_url+' "/>')
cały kod:
Kod
<body>
<a id = "jeden" href="http://o.aolcdn.com/os/kol/DansImages/Brave593" ><img src="http://www.bren.us/sites/default/files/images/brave.jpg"></a>
<a id= "dwa" href="http://www.maskotkowo.pl/galerie/p/puzzle-wall-e-i-eva_496.jpg" ><img src="http://tapety-na-telefon.com.pl/gallery/photos/Wall-E/Wall-E_320x240.jpg"></a>
</body>
<script src="jquery.js"></script>
<script>
duzyBrave = new Image()
duzyBrave.src = $('#jeden').attr('href')
duzyWalle = new Image()
duzyWalle.src = $('#dwa').attr('href')
$('a').on('click', function(event){
event.preventDefault();
var img_url = $('this').attr('href')
$('body').append('<img id="center" src=" '+ img_url +' "/>')
var wysokosc = $('#center').height() /2
var szerokosc = $('#center').width() /2
console.log(wysokosc)
$('#center').css({
position: "fixed",
top: "50%",
left:"50%",
marginTop: "-" + wysokosc + "px",
marginLeft:"-" + szerokosc + "px",
display: "none",
}).fadeIn('slow')
})
</script>
</html>
<a id = "jeden" href="http://o.aolcdn.com/os/kol/DansImages/Brave593" ><img src="http://www.bren.us/sites/default/files/images/brave.jpg"></a>
<a id= "dwa" href="http://www.maskotkowo.pl/galerie/p/puzzle-wall-e-i-eva_496.jpg" ><img src="http://tapety-na-telefon.com.pl/gallery/photos/Wall-E/Wall-E_320x240.jpg"></a>
</body>
<script src="jquery.js"></script>
<script>
duzyBrave = new Image()
duzyBrave.src = $('#jeden').attr('href')
duzyWalle = new Image()
duzyWalle.src = $('#dwa').attr('href')
$('a').on('click', function(event){
event.preventDefault();
var img_url = $('this').attr('href')
$('body').append('<img id="center" src=" '+ img_url +' "/>')
var wysokosc = $('#center').height() /2
var szerokosc = $('#center').width() /2
console.log(wysokosc)
$('#center').css({
position: "fixed",
top: "50%",
left:"50%",
marginTop: "-" + wysokosc + "px",
marginLeft:"-" + szerokosc + "px",
display: "none",
}).fadeIn('slow')
})
</script>
</html>
jak w podobny sposób (czyli dynamicznie) odwoływać się do obrazków juz załadowanych? Bez sensu jest (tak jak niżej) wpisywać za każdym razem src danego obrazka do którego odwołuje się link:
Kod
$('body').append('<img id="center" src=" '+ duzyBrave.src +' "/>')
jak dopasować link do juz załadowanego obrazka?
kod w Fiddle demo