我目前正在使用title:function来显示两个唯一的链接,并希望在cboxPhoto对象或cboxLoadedContent上方直接显示其中一个链接。任何建议赞赏...
//定义标题链接
$('a.aw14title').colorbox({title:function () {
return "<div align='center' style='color:#000000; font-weight:bold;'>" + $(this).data('image-link') + "</div> <br><br> <span style='color:#000000; font-style:italic;'>*To download full set of Alienware 14 images, " + "click HERE!".link("/ASP/PageStat.asp?VID=45&Page=Resources_Images_Alienware_14Laptop_ZIP&Link=http://www.liveandlearndell.com/resources/productimages/Alienware 14 Laptop.zip" + "</span>");
}}); `enter code here`
$(".aw14image").colorbox({rel:'aw14image', transition:"none", width:"75%", height:"75%", scalePhotos: true, scrolling: false});
答案 0 :(得分:0)
我在此论坛中找到了类似的问题和解决方案,并修改了代码以满足我的需求。我现在在图像下面有一个链接,使用标题和图像上方的链接使用data-image-link。这是我使用的代码:
$(".aw14image").colorbox({rel:'aw14image', transition:"none", width:"75%", height:"75%" , scalePhotos: true, scrolling: false});
接下来标题框中图像下方链接的标题代码。
$('a.aw14title').colorbox({title:function () {
return "<span style='color:#000000; font-style:italic;'>To download full set of Alienware 14 images, </span> " + "<span style='font-weight:bold;'>click HERE! </span>".link("/ASP/PageStat.asp?VID=45&Page=Resources_Images_Alienware_14Laptop_ZIP&Link=http://www.liveandlearndell.com/resources/productimages/Alienware 14 Laptop.zip");
}});
最后这篇文章是使用oncomplete函数来预先添加到cboxloadedcontent:
$(".aw14image").colorbox({
onComplete:function(){
$("<div align='center' style='color:#000000; font-weight:bold;'>" + $(this).data('image-link') + "</div>").prependTo("#cboxLoadedContent");
}
});
答案 1 :(得分:0)
这是HTML
<a class="aw14image aw14title" data-image-link="<a href='/ASP/PageStat.asp?VID=45&Page=Resources_Images_Alienware_14Laptop_01&Link=http://www.liveandlearndell.com/resources/productimages/Alienware_14_Laptop/01.jpg' target='_blank'> Click HERE</a> to download & save product image" href="productimages/Alienware_14_Laptop/01.jpg" >Alienware 14</a>