Skip to content

Instantly share code, notes, and snippets.

@gacha

gacha/colorbox-title-hack.js

Created March 24, 2011 08:59
Show Gist options
  • Save gacha/884767 to your computer and use it in GitHub Desktop.
Save gacha/884767 to your computer and use it in GitHub Desktop.
Download ZIP
This solves the long title problem on ColorBox. Tested only for this design http://colorpowered.com/colorbox/core/example1/index.html
Raw
colorbox-title-hack.js
$(document).bind('cbox_complete', function(){
if($('#cboxTitle').height() > 20){
$("#cboxTitle").hide();
$("<div>"+$("#cboxTitle").html()+"</div>").css({color: $("#cboxTitle").css('color')}).insertAfter("#cboxPhoto");
$.fn.colorbox.resize();
}
});
@Gaccho
Copy link

Gaccho commented May 20, 2011

Thanks,
but for me it seems cboxPhoto is a class, so instead of insertAfter("#cboxPhoto") i had to use insertAfter(".cboxPhoto")

@gacha
Copy link
Author

gacha commented May 20, 2011

This differs from colorbox version.

@midenarif
Copy link

Thank you for giving this.
For ColorBox v1.3.17.2 this works fine.
$(document).bind("cbox_complete", function(){
if($("#cboxTitle").height() > 20){
$("#cboxTitle").hide();
$("#cboxLoadedContent").append("

"+$("#cboxTitle").html()+"
").css({color: $("#cboxTitle").css("color")});
$.fn.colorbox.resize();
}
});

@phallstrom
Copy link

For v1.4.4, I went with this slight modification in order to treat all captions the same. I found that even though some captions didn't wrap they still got in the way of the navigation elements.

$('a[rel*=colorbox]').colorbox({onComplete:function(){
  $("#cboxTitle").hide();
  $("#cboxLoadedContent").append($("#cboxTitle").html()).css({color: $("#cboxTitle").css("color")});
  $.fn.colorbox.resize();
}})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment