在colorbox中插入cboxPhoto上方的href链接

时间:2014-04-01 01:02:32

标签: jquery colorbox

我目前正在使用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&amp;Page=Resources_Images_Alienware_14Laptop_ZIP&amp;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});

2 个答案:

答案 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&amp;Page=Resources_Images_Alienware_14Laptop_ZIP&amp;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&amp;Page=Resources_Images_Alienware_14Laptop_01&amp;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>