javascript - Colorbox Remove Frame Arrow Navigation - Stack Overflow

admin管理员组

文章数量:1356284

Working on THIS Page: newsite.702wedding/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  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
},

Thanks for you help

Working on THIS Page: newsite.702wedding./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./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
},

Thanks for you help

• javascript
• colorbox

Share Improve this question Follow asked Mar 4, 2011 at 20:33 VaraziVarazi 59322 gold badges1010 silver badges2727 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

本文标签： javascriptColorbox Remove Frame Arrow NavigationStack Overflow