Question

无法找到左下方箭头的删除位置，但显然会保持正常播放的幻灯片。

以下是我认为I / YouToo应该关注的内容：

(function ($, window) {

var
// ColorBox Default Settings.   
// See http://colorpowered.com/colorbox for details.
defaults = {
    transition: "elastic",
    speed: 350,
    width: false,
    initialWidth: "662",
    innerWidth: false,
    maxWidth: false,
    height: false,
    initialHeight: "600",
    innerHeight: false,
    maxHeight: false,
    scalePhotos: true,
    scrolling: false,
    inline: false,
    html: false,
    iframe: false,
    photo: false,
    href: false,
    title: false,
    rel: false,
    opacity: 0.6,
    preloading: true,
    current: "image {current} of {total}",
    previous: "previous",
    next: "next",
    close: "close",
    open: false,
    loop: true,
    slideshow: true,
    slideshowAuto: true,
    slideshowSpeed: 3000,
    slideshowStart: "Play",
    slideshowStop: "Pause",
    onOpen: false,
    onLoad: false,
    onComplete: false,
    onCleanup: false,
    onClosed: false,
    overlayClose: true,     
    escKey: true,
    arrowKey: false
},

谢谢你的帮助

Answer 1

选项中似乎没有任何可以帮助您的内容。您将需要修改插件源或找到与箭头对应的元素并使用JavaScript或CSS隐藏它们。

使用Chrome检查，看起来2个箭头键的ID为cboxNext和cboxPrevious。

在灯箱加载后尝试以下操作：

$("#cboxPrevious").hide();
$("#cboxNext").hide();

或添加到您的CSS：

#cboxPrevious, #cboxNext{
    display: none;
}

Answer 2

你实际上可以做到这一点。

包含colorbox.js和colorbox.css之后，必须对其进行初始化。如果你这样做，你可以有3个单独的选项。

<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>

class =“iframe”可以触发外部页面。

class =“photo”可以显示没有箭头的单张照片，只显示关闭按钮

class =“group1”将显示图库和图库的所有控件。

请注意，只有group1包含rel：group1

其他两个是例如iframe和照片，他们被iframe调用＆gt;真实和照片＆gt; true而不是由rel＆gt;调用的group1组1

注意代码，你就会知道

<a href="page.html" class="iframe">Go to page</a>
<a href="big-photo.jpg" class="photo"><img src="image.jpg"></a>
<a href="groups-of-photo-photo-1.jpg" rel="group1"><img src="image1.jpg"></a>

Answer 3

最好是将配置选项rel设置为false。 rel是用于对相关颜色框实例进行分组的函数。

    $(".target").colorbox({rel: false});

Answer 4

禁用导航链接的最简单方法是未定义 HTML元素中的rel属性并使用类选择器。例如：

<强> HTML：

<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">

<强>使用Javascript：

$(".js-colorbox").colorbox({iframe:true});

通过定义rel属性， colorbox 会尝试查找所有 相关的 元素（具有相同rel值的元素）并通过它们创建导航。

Colorbox删除框架箭头导航

4 个答案: