动态添加基于id标签的图片
tsa*_*and 1 html javascript css
所以我有像这样的照片
他们有相应的id标签.当你点击其中一个时,他们会弹出一个弹出窗口:
这个javascript加载的:
google.setOnLoadCallback(function()
{
$('div.recentbox').click(function()
{
var name = $(this).attr('id');
$('#titlethumb').prepend('<img class="imgs" src="stuff/"+name+"/thumbnail.jpg" />');
$('.box-inner').fadeOut('fast',function()
{
$('.box-inner').load('stuff/'+name+'/description.html', function()
{
$('.box-inner').fadeIn('slow');
});
});
});
});
description.html
<div id="infobox-wrap">
<div id="infobox">
<div id="titlethumb">
<h2 class="infobox">linkur.com</h2>
<img id="imgs" src=""> <!--this image should be found in stuff/linkur/thumbnail.jpg-->
</div>
<div id="descriptionbuttons">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut leo quis ante sagittis volutpat ut quis dolor. Vivamus ut leo ut erat pellentesque imperdiet nec eget turpis. Nunc sit amet elit dictum nulla tristique venenatis ut sed purus. Nulla facilisi. Duis ac dictum lectus. Aliquam erat volutpat. Nam scelerisque eros ac lacus cursus pulvinar. Praesent lobortis ipsum sit amet tellus fringilla vel lacinia diam auctor. Aliquam vel mattis odio. Sed tincidunt turpis in neque ullamcorper euismod. Nulla sed ante erat. Duis cursus massa facilisis neque eleifend sed viverra mi pulvinar. Morbi ultricies cursus libero sed ultrices. Donec non magna nibh. Phasellus tempor massa diam, tincidunt cursus justo. Vestibulum bibendum nisi in odio tincidunt vel dignissim leo vestibulum.
</p>
<p>
Vivamus non nisi id ante congue suscipit ut ut urna. Morbi non sapien nulla. Suspendisse potenti. Suspendisse potenti. Sed at mauris ut turpis bibendum fringilla. Nam nec urna quis mauris porta venenatis. Sed tempus tortor vitae mauris viverra id mattis lectus aliquet.
</p>
<div id="overlaybuttons">
<a href="#"><span class="orangebtn" id="ourworkbtn">Button</span></a>
<a href="#"><span class="orangebtn" id="ourworkbtn">Button</span></a>
</div>
</div>
</div>
</div>
的index.php
<body>
<div class="backdrop"></div>
<div class="box">
<div class="box-inner">
</div>
</div>
但不幸的是图片没有加载.
您需要关闭单引号,而不是双引号:
var name = this.id;
$('#titlethumb').prepend('<img class="imgs" src="stuff/' + name + '/thumbnail.jpg" />');
或者更干净:
$('<img>', {
'class': 'imgs',
'src': 'stuff/' + name + '/thumbnail.jpg'
}).prependTo('#titlethumb');