症状と原因

Colorboxを使用して画像のモーダル表示を行った際に、画像がテキストとして表示されてしまう場合があった。

原因としてはColorboxがURLから画像ではなくテキストと判断してしまうのが問題の様子。

対応策

Colorboxを呼び出す際にphotoオプションを指定して対象が画像である旨を明示する

photo
: If true, this setting forces Colorbox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like ‘photo.php’ instead of ‘photo.jpg’)

サンプル

$('.colorbox').colorbox({
photo: true
});