Colorbox Remove Frame Arrow Navigation

Working on THIS Page: newsite.702wedding.com/live/

Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.

Here is what I think I/YouToo should be looking at:

(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: "p开发者_开发知识库revious",
    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
},

Thanks for you help

---

There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.

Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.

Try the following after the lightbox loads:

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

Or add to your CSS:

#cboxPrevious, #cboxNext{
    display: none;
}

---

You actually can do this.

After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.

<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" can trigger an external page.

class="photo" can show single photo without arrow but just close button

class="group1" will display the gallery and all controls for the gallery.

Note that only group1 contains rel:group1

Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1

Pay attention in the code and you will know

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

---

Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.

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

---

The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:

HTML:

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

Javascript:

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

---

By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.