jQueryカラーボックスアプリケーションに説明行を追加

Question

カラーボックス1.3.9の画像に説明行を追加できません。私は次のコードを使用しています：

(function($) {  
$(document).ready(function(){ 
$ (".colorbox").colorbox({ opacity:"0.8",width:"80%",height:"90%",current: "image : {current}/{total}" 
}); 
}); 

})(jQuery); 

カラーボックスに説明行を追加する方法はありますか？

Answer 1

これは非常に簡単で、ColorBoxのドキュメントに記載されています。次のように

は、写真や他のデジタル資産の簡単な説明を格納するためのTITLE属性を使用します。

<a class="group1 cboxElement" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a> 

各資産は独自の記述を有することができます。

Answer 2

あなたはtitle属性にHTMLを挿入することができます。

<a class="cboxElement" rel="group1" href="path/to/image" title="<h1>Title</h1><p>Description</p>">Grouped Photo 1</a> 

あなたはCSSを使って出力をスタイルすることができるはずです。

Answer 3

私は、これは非常に古いスレッドです知っている - しかし、私は最近、この出くわしたとだけではなく、ページネーション要素を使用して、それを解決した（あなたにもあることを必要としないと仮定し！）：

 


    $('.gallery a').colorbox({rel:'gal', current:function() { 
    var description = $(this).attr('alt'); 
    if (description == null) { 
     return ""; 
    } else { 
     return ""+description+""; 
    } 
    }}); 

 

私は画像がオーバーレイされている間に説明をスパンに配置し、存在しない場合は、半透明の背景が見えないようにしました。この説明は、リンクのalt要素からも得られます。同様に勝利のビットです！

希望すると便利です。

Answer 4

リンクのalt属性から説明を読み上げるように変更しました。

例

<a href="test.jpg" alt="test description in alt tag" title="test title" class="groupGallery"> 

Javacript

IはCSS が#cboxCurrent素子

01以下の次の行を追加し、JSファイルの行

/*! 
Colorbox v1.5.9 - 2014-04-25 
jQuery lightbox and modal window plugin 
(c) 2014 Jack Moore - http://www.jacklmoore.com/colorbox 
license: http://www.opensource.org/licenses/mit-license.php 
*/ 
(function ($, document, window) { 
. 
. 
. 
    rel: function() { 
     return this.rel; 
    }, 
    href: function() { 
     // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container') 
     return $(this).attr('href'); 
    }, 
    title: function() { 
     return this.title; 
    }, 
    description: function() { //code to add description at bottom 
     return $(this).attr('alt');; 
    } 
}, 


// Abstracting the HTML and event identifiers for easy rebranding 
colorbox = 'colorbox', 
prefix = 'cbox', 
boxElement = prefix + 'Element', 

// Events 
event_open = prefix + '_open', 
event_load = prefix + '_load', 
event_complete = prefix + '_complete', 
event_cleanup = prefix + '_cleanup', 
event_closed = prefix + '_closed', 
event_purge = prefix + '_purge', 

// Cached jQuery Object Variables 
$overlay, 
$box, 
$wrap, 
$content, 
$topBorder, 
$leftBorder, 
$rightBorder, 
$bottomBorder, 
$related, 
$window, 
$loaded, 
$loadingBay, 
$loadingOverlay, 
$title, 
$current, 
$description, //code to add description at bottom 
$slideshow, 
$next, 
$prev, 
$close, 
$groupControls, 
$events = $('<a/>'), // $({}) would be prefered, but there is an issue with jQuery 1.4.2 

. 
. 
. 

function launch(element) { 
    var options; 

    if (!closing) { 

     options = $(element).data('colorbox'); 

     settings = new Settings(element, options); 

     getRelated(settings.get('rel')); 

     if (!open) { 
      open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. 

      setClass(settings.get('className')); 

      // Show colorbox so the sizes can be calculated in older versions of jQuery 
      $box.css({ visibility: 'hidden', display: 'block', opacity: '' }); 

      $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden'); 
      $content.css({ width: '', height: '' }).append($loaded); 

      // Cache values needed for size calculations 
      interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height() + 25; //code to add description at bottom and increase height of light box 
      interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width() ; 
      loadedHeight = $loaded.outerHeight(true); 
      loadedWidth = $loaded.outerWidth(true); 

      // Opens inital empty Colorbox prior to content being loaded. 
      var initialWidth = setSize(settings.get('initialWidth'), 'x'); 
      var initialHeight = setSize(settings.get('initialHeight'), 'y'); 
      var maxWidth = settings.get('maxWidth'); 
      var maxHeight = settings.get('maxHeight'); 

      settings.w = (maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth; 
      settings.h = (maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight; 

      $loaded.css({ width: '', height: settings.h }); 
      publicMethod.position(); 

      trigger(event_open); 
      settings.get('onOpen'); 

      $groupControls.add($title).hide(); 
      $groupControls.add($description).hide(); //code to add description at bottom 

      $box.focus(); 

      if (settings.get('trapFocus')) { 
       // Confine focus to the modal 
       // Uses event capturing that is not supported in IE8- 
       if (document.addEventListener) { 

        document.addEventListener('focus', trapFocus, true); 

        $events.one(event_closed, function() { 
         document.removeEventListener('focus', trapFocus, true); 
        }); 
       } 
      } 

      // Return focus on closing 
      if (settings.get('returnFocus')) { 
       $events.one(event_closed, function() { 
        $(settings.el).focus(); 
       }); 
      } 
     } 

     $overlay.css({ 
      opacity: parseFloat(settings.get('opacity')) || '', 
      cursor: settings.get('overlayClose') ? 'pointer' : '', 
      visibility: 'visible' 
     }).show(); 

     if (settings.get('closeButton')) { 
      $close.html(settings.get('close')).appendTo($content); 
     } else { 
      $close.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4 
     } 

     load(); 
    } 
} 

// Colorbox's markup needs to be added to the DOM prior to being called 
// so that the browser will go ahead and load the CSS background images. 
function appendHTML() { 
    if (!$box && document.body) { 
     init = false; 
     $window = $(window); 
     $box = $tag(div).attr({ 
      id: colorbox, 
      'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS. 
      role: 'dialog', 
      tabindex: '-1' 
     }).hide(); 
     $overlay = $tag(div, "Overlay").hide(); 
     $loadingOverlay = $([$tag(div, "LoadingOverlay")[0], $tag(div, "LoadingGraphic")[0]]); 
     $wrap = $tag(div, "Wrapper"); 
     $content = $tag(div, "Content").append(
      $title = $tag(div, "Title"), 
      $current = $tag(div, "Current"), 
      $description = $tag(div, "Description"), //code to add description at bottom 
      $prev = $('<button type="button"/>').attr({ id: prefix + 'Previous' }), 
      $next = $('<button type="button"/>').attr({ id: prefix + 'Next' }), 
      $slideshow = $tag('button', "Slideshow"), 
      $loadingOverlay 
     ); 

     $close = $('<button type="button"/>').attr({ id: prefix + 'Close' }); 

     $wrap.append(// The 3x3 Grid that makes up Colorbox 
      $tag(div).append(
       $tag(div, "TopLeft"), 
       $topBorder = $tag(div, "TopCenter"), 
       $tag(div, "TopRight") 
      ), 
      $tag(div, false, 'clear:left').append(
       $leftBorder = $tag(div, "MiddleLeft"), 
       $content, 
       $rightBorder = $tag(div, "MiddleRight") 
      ), 
      $tag(div, false, 'clear:left').append(
       $tag(div, "BottomLeft"), 
       $bottomBorder = $tag(div, "BottomCenter"), 
       $tag(div, "BottomRight") 
      ) 
     ).find('div div').css({ 'float': 'left' }); 

     $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;'); 

     $groupControls = $next.add($prev).add($current).add($slideshow); 

     $(document.body).append($overlay, $box.append($wrap, $loadingBay)); 
    } 
} 

// Add Colorbox's event bindings 
function addBindings() { 
    function clickHandler(e) { 
     // ignore non-left-mouse-clicks and clicks modified with ctrl/command, shift, or alt. 
     // See: http://jacklmoore.com/notes/click-events/ 
     if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey)) { 
      e.preventDefault(); 
      launch(this); 
     } 
    } 

    if ($box) { 
     if (!init) { 
      init = true; 

      // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly. 
      $next.click(function() { 
       publicMethod.next(); 
      }); 
      $prev.click(function() { 
       publicMethod.prev(); 
      }); 
      $close.click(function() { 
       publicMethod.close(); 
      }); 
      $overlay.click(function() { 
       if (settings.get('overlayClose')) { 
        publicMethod.close(); 
       } 
      }); 

      // Key Bindings 
      $(document).bind('keydown.' + prefix, function (e) { 
       var key = e.keyCode; 
       if (open && settings.get('escKey') && key === 27) { 
        e.preventDefault(); 
        publicMethod.close(); 
       } 
       if (open && settings.get('arrowKey') && $related[1] && !e.altKey) { 
        if (key === 37) { 
         e.preventDefault(); 
         $prev.click(); 
        } else if (key === 39) { 
         e.preventDefault(); 
         $next.click(); 
        } 
       } 
      }); 

      if ($.isFunction($.fn.on)) { 
       // For jQuery 1.7+ 
       $(document).on('click.' + prefix, '.' + boxElement, clickHandler); 
      } else { 
       // For jQuery 1.3.x -> 1.6.x 
       // This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed. 
       // This is not here for jQuery 1.9, it's here for legacy users. 
       $('.' + boxElement).live('click.' + prefix, clickHandler); 
      } 
     } 
     return true; 
    } 
    return false; 
} 

// Don't do anything if Colorbox already exists. 
if ($.colorbox) { 
    return; 
} 

// Append the HTML when the DOM loads 
$(appendHTML); 


// **************** 
// PUBLIC FUNCTIONS 
// Usage format: $.colorbox.close(); 
// Usage from within an iframe: parent.jQuery.colorbox.close(); 
// **************** 

publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) { 
    var settings; 
    var $obj = this; 

    options = options || {}; 

    if ($.isFunction($obj)) { // assume a call to $.colorbox 
     $obj = $('<a/>'); 
     options.open = true; 
    } else if (!$obj[0]) { // colorbox being applied to empty collection 
     return $obj; 
    } 


    if (!$obj[0]) { // colorbox being applied to empty collection 
     return $obj; 
    } 

    appendHTML(); 

    if (addBindings()) { 

     if (callback) { 
      options.onComplete = callback; 
     } 

     $obj.each(function() { 
      var old = $.data(this, colorbox) || {}; 
      $.data(this, colorbox, $.extend(old, options)); 
     }).addClass(boxElement); 

     settings = new Settings($obj[0], options); 

     if (settings.get('open')) { 
      launch($obj[0]); 
     } 
    } 

    return $obj; 
}; 

publicMethod.position = function (speed, loadedCallback) { 
    var 
    css, 
    top = 0, 
    left = 0, 
    offset = $box.offset(), 
    scrollTop, 
    scrollLeft; 

    $window.unbind('resize.' + prefix); 

    // remove the modal so that it doesn't influence the document width/height 
    $box.css({ top: -9e4, left: -9e4 }); 

    scrollTop = $window.scrollTop(); 
    scrollLeft = $window.scrollLeft(); 

    if (settings.get('fixed')) { 
     offset.top -= scrollTop; 
     offset.left -= scrollLeft; 
     $box.css({ position: 'fixed' }); 
    } else { 
     top = scrollTop; 
     left = scrollLeft; 
     $box.css({ position: 'absolute' }); 
    } 

    // keeps the top and left positions within the browser's viewport. 
    if (settings.get('right') !== false) { 
     left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.get('right'), 'x'), 0); 
    } else if (settings.get('left') !== false) { 
     left += setSize(settings.get('left'), 'x'); 
    } else { 
     left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0)/2); 
    } 

    if (settings.get('bottom') !== false) { 
     top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.get('bottom'), 'y'), 0); 
    } else if (settings.get('top') !== false) { 
     top += setSize(settings.get('top'), 'y'); 
    } else { 
     top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0)/2); 
    } 

    $box.css({ top: offset.top, left: offset.left, visibility: 'visible' }); 

    // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, 
    // but it has to be shrank down around the size of div#colorbox when it's done. If not, 
    // it can invoke an obscure IE bug when using iframes. 
    $wrap[0].style.width = $wrap[0].style.height = "9999px"; 

    function modalDimensions() { 
     $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt($box[0].style.width, 10) - interfaceWidth) + 'px'; 
     $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt($box[0].style.height, 10) - interfaceHeight) + 'px'; 
    } 

    css = { width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left }; 

    // setting the speed to 0 if the content hasn't changed size or position 
    if (speed) { 
     var tempSpeed = 0; 
     $.each(css, function (i) { 
      if (css[i] !== previousCSS[i]) { 
       tempSpeed = speed; 
       return; 
      } 
     }); 
     speed = tempSpeed; 
    } 

    previousCSS = css; 

    if (!speed) { 
     $box.css(css); 
    } 

    $box.dequeue().animate(css, { 
     duration: speed || 0, 
     complete: function() { 
      modalDimensions(); 

      active = false; 

      // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. 
      $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px"; 
      $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px"; 

      if (settings.get('reposition')) { 
       setTimeout(function() { // small delay before binding onresize due to an IE8 bug. 
        $window.bind('resize.' + prefix, publicMethod.position); 
       }, 1); 
      } 

      if (loadedCallback) { 
       loadedCallback(); 
      } 
     }, 
     step: modalDimensions 
    }); 
}; 

publicMethod.resize = function (options) { 
    var scrolltop; 

    if (open) { 
     options = options || {}; 

     if (options.width) { 
      settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth; 
     } 

     if (options.innerWidth) { 
      settings.w = setSize(options.innerWidth, 'x'); 
     } 

     $loaded.css({ width: settings.w }); 

     if (options.height) { 
      settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight; 
     } 

     if (options.innerHeight) { 
      settings.h = setSize(options.innerHeight, 'y'); 
     } 

     if (!options.innerHeight && !options.height) { 
      scrolltop = $loaded.scrollTop(); 
      $loaded.css({ height: "auto" }); 
      settings.h = $loaded.height(); 
     } 

     $loaded.css({ height: settings.h }); 

     if (scrolltop) { 
      $loaded.scrollTop(scrolltop); 
     } 

     publicMethod.position(settings.get('transition') === "none" ? 0 : settings.get('speed')); 
    } 
}; 

publicMethod.prep = function (object) { 
    if (!open) { 
     return; 
    } 

    var callback, speed = settings.get('transition') === "none" ? 0 : settings.get('speed'); 

    $loaded.remove(); 

    $loaded = $tag(div, 'LoadedContent').append(object); 

    function getWidth() { 
     settings.w = settings.w || $loaded.width(); 
     settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; 
     return settings.w; 
    } 
    function getHeight() { 
     settings.h = settings.h || $loaded.height(); 
     settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; 
     return settings.h; 
    } 

    $loaded.hide() 
    .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations. 
    .css({ width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden' }) 
    .css({ height: getHeight() })// sets the height independently from the width in case the new width influences the value of height. 
    .prependTo($content); 

    $loadingBay.hide(); 

    // floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width. 

    $(photo).css({ 'float': 'none' }); 

    setClass(settings.get('className')); 

    callback = function() { 
     var total = $related.length, 
      iframe, 
      complete; 

     if (!open) { 
      return; 
     } 

     function removeFilter() { // Needed for IE8 in versions of jQuery prior to 1.7.2 
      if ($.support.opacity === false) { 
       $box[0].style.removeAttribute('filter'); 
      } 
     } 

     complete = function() { 
      clearTimeout(loadingTimer); 
      $loadingOverlay.hide(); 
      trigger(event_complete); 
      settings.get('onComplete'); 
     }; 


     $title.html(settings.get('title')).show(); 
     $description.html(settings.get('description')).show(); //code to add description at bottom 
     $loaded.show(); 

     if (total > 1) { // handle grouping 
      if (typeof settings.get('current') === "string") { 
       $current.html(settings.get('current').replace('{current}', index + 1).replace('{total}', total)).show(); 
      } 

      $next[(settings.get('loop') || index < total - 1) ? "show" : "hide"]().html(settings.get('next')); 
      $prev[(settings.get('loop') || index) ? "show" : "hide"]().html(settings.get('previous')); 

      slideshow(); 

      // Preloads images within a rel group 
      if (settings.get('preloading')) { 
       $.each([getIndex(-1), getIndex(1)], function() { 
        var img, 
         i = $related[this], 
         settings = new Settings(i, $.data(i, colorbox)), 
         src = settings.get('href'); 

        if (src && isImage(settings, src)) { 
         src = retinaUrl(settings, src); 
         img = document.createElement('img'); 
         img.src = src; 
        } 
       }); 
      } 
     } else { 
      $groupControls.hide(); 
     } 

     if (settings.get('iframe')) { 
      iframe = document.createElement('iframe'); 

      if ('frameBorder' in iframe) { 
       iframe.frameBorder = 0; 
      } 

      if ('allowTransparency' in iframe) { 
       iframe.allowTransparency = "true"; 
      } 

      if (!settings.get('scrolling')) { 
       iframe.scrolling = "no"; 
      } 

      $(iframe) 
       .attr({ 
        src: settings.get('href'), 
        name: (new Date()).getTime(), // give the iframe a unique name to prevent caching 
        'class': prefix + 'Iframe', 
        allowFullScreen: true // allow HTML5 video to go fullscreen 
       }) 
       .one('load', complete) 
       .appendTo($loaded); 

      $events.one(event_purge, function() { 
       iframe.src = "//about:blank"; 
      }); 

      if (settings.get('fastIframe')) { 
       $(iframe).trigger('load'); 
      } 
     } else { 
      complete(); 
     } 

     if (settings.get('transition') === 'fade') { 
      $box.fadeTo(speed, 1, removeFilter); 
     } else { 
      removeFilter(); 
     } 
    }; 

    if (settings.get('transition') === 'fade') { 
     $box.fadeTo(speed, 0, function() { 
      publicMethod.position(0, callback); 
     }); 
    } else { 
     publicMethod.position(speed, callback); 
    } 
}; 

function load() { 
    var href, setResize, prep = publicMethod.prep, $inline, request = ++requests; 

    active = true; 

    photo = false; 

    trigger(event_purge); 
    trigger(event_load); 
    settings.get('onLoad'); 

    settings.h = settings.get('height') ? 
      setSize(settings.get('height'), 'y') - loadedHeight - interfaceHeight : 
      settings.get('innerHeight') && setSize(settings.get('innerHeight'), 'y') ; 

    settings.w = settings.get('width') ? 
      setSize(settings.get('width'), 'x') - loadedWidth - interfaceWidth : 
      settings.get('innerWidth') && setSize(settings.get('innerWidth'), 'x'); 

    // Sets the minimum dimensions for use in image scaling 
    settings.mw = settings.w; 
    settings.mh = settings.h; 

    // Re-evaluate the minimum width and height based on maxWidth and maxHeight values. 
    // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead. 
    if (settings.get('maxWidth')) { 
     settings.mw = setSize(settings.get('maxWidth'), 'x') - loadedWidth - interfaceWidth; 
     settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw; 
    } 
    if (settings.get('maxHeight')) { 
     settings.mh = setSize(settings.get('maxHeight'), 'y') - loadedHeight - interfaceHeight; 
     settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh; 
    } 

    href = settings.get('href'); 

    loadingTimer = setTimeout(function() { 
     $loadingOverlay.show(); 
    }, 100); 

    if (settings.get('inline')) { 
     var $target = $(href); 
     // Inserts an empty placeholder where inline content is being pulled from. 
     // An event is bound to put inline content back when Colorbox closes or loads new content. 
     $inline = $('<div>').hide().insertBefore($target); 

     $events.one(event_purge, function() { 
      $inline.replaceWith($target); 
     }); 

     prep($target); 
    } else if (settings.get('iframe')) { 
     // IFrame element won't be added to the DOM until it is ready to be displayed, 
     // to avoid problems with DOM-ready JS that might be trying to run in that iframe. 
     prep(" "); 
    } else if (settings.get('html')) { 
     prep(settings.get('html')); 
    } else if (isImage(settings, href)) { 

     href = retinaUrl(settings, href); 

     photo = new Image(); 

     $(photo) 
     .addClass(prefix + 'Photo') 
     .bind('error', function() { 
      prep($tag(div, 'Error').html(settings.get('imgError'))); 
     }) 
     .one('load', function() { 
      if (request !== requests) { 
       return; 
      } 

      // A small pause because some browsers will occassionaly report a 
      // img.width and img.height of zero immediately after the img.onload fires 
      setTimeout(function() { 
       var percent; 

       $.each(['alt', 'longdesc', 'aria-describedby'], function (i, val) { 
        var attr = $(settings.el).attr(val) || $(settings.el).attr('data-' + val); 
        if (attr) { 
         photo.setAttribute(val, attr); 
        } 
       }); 

       if (settings.get('retinaImage') && window.devicePixelRatio > 1) { 
        photo.height = photo.height/window.devicePixelRatio; 
        photo.width = photo.width/window.devicePixelRatio; 
       } 

       if (settings.get('scalePhotos')) { 
        setResize = function() { 
         photo.height -= photo.height * percent; 
         photo.width -= photo.width * percent; 
        }; 
        if (settings.mw && photo.width > settings.mw) { 
         percent = (photo.width - settings.mw)/photo.width; 
         setResize(); 
        } 
        if (settings.mh && photo.height > settings.mh) { 
         percent = (photo.height - settings.mh)/photo.height; 
         setResize(); 
        } 
       } 

       if (settings.h) { 
        photo.style.marginTop = Math.max(settings.mh - photo.height, 0)/2 + 'px'; 
       } 

       if ($related[1] && (settings.get('loop') || $related[index + 1])) { 
        photo.style.cursor = 'pointer'; 
        photo.onclick = function() { 
         publicMethod.next(); 
        }; 
       } 

       photo.style.width = photo.width + 'px'; 
       photo.style.height = photo.height + 'px'; 
       prep(photo); 
      }, 1); 
     }); 

     photo.src = href; 

    } else if (href) { 
     $loadingBay.load(href, settings.get('data'), function (data, status) { 
      if (request === requests) { 
       prep(status === 'error' ? $tag(div, 'Error').html(settings.get('xhrError')) : $(this).contents()); 
      } 
     }); 
    } 
} 

// Navigates to the next page/image in a set. 
publicMethod.next = function() { 
    if (!active && $related[1] && (settings.get('loop') || $related[index + 1])) { 
     index = getIndex(1); 
     launch($related[index]); 
    } 
}; 

publicMethod.prev = function() { 
    if (!active && $related[1] && (settings.get('loop') || index)) { 
     index = getIndex(-1); 
     launch($related[index]); 
    } 
}; 

// Note: to use this within an iframe use the following format: parent.jQuery.colorbox.close(); 
publicMethod.close = function() { 
    if (open && !closing) { 

     closing = true; 
     open = false; 
     trigger(event_cleanup); 
     settings.get('onCleanup'); 
     $window.unbind('.' + prefix); 
     $overlay.fadeTo(settings.get('fadeOut') || 0, 0); 

     $box.stop().fadeTo(settings.get('fadeOut') || 0, 0, function() { 
      $box.hide(); 
      $overlay.hide(); 
      trigger(event_purge); 
      $loaded.remove(); 

      setTimeout(function() { 
       closing = false; 
       trigger(event_closed); 
       settings.get('onClosed'); 
      }, 1); 
     }); 
    } 
}; 

// Removes changes Colorbox made to the document, but does not remove the plugin. 
publicMethod.remove = function() { 
    if (!$box) { return; } 

    $box.stop(); 
    $.colorbox.close(); 
    $box.stop().remove(); 
    $overlay.remove(); 
    closing = false; 
    $box = null; 
    $('.' + boxElement) 
     .removeData(colorbox) 
     .removeClass(boxElement); 

    $(document).unbind('click.' + prefix); 
}; 

// A method for fetching the current element Colorbox is referencing. 
// returns a jQuery object. 
publicMethod.element = function() { 
    return $(settings.el); 
}; 

publicMethod.settings = defaults; 

}(jQuery, document, window)); 

を追加しました

#cboxDescription{position:relative; top:-5px;left:0; color:#ccc; font-size:16px; padding:3px;}