在颜色框中插入 href 链接上方的 cbox照片

Question

我目前正在使用title：函数来显示两个唯一链接，并希望在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});

Answer 1

我在这个论坛中找到了一个类似的问题和解决方案，并修改了代码以满足我的需求。我现在在图像下方有一个使用标题的链接，在图像上方有一个使用数据图像链接的链接。这是我使用的代码：

 $(".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 函数将 cboxloadcontent 前置：

    $(".aw14image").colorbox({        
            onComplete:function(){ 
            $("<div align='center' style='color:#000000; font-weight:bold;'>" +  $(this).data('image-link') +  "</div>").prependTo("#cboxLoadedContent");
            }
            });

Answer 2

这是 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>