colorboxを改造して選択中が分かるようにする方法

viva

htmlの写真一覧の構成は以下の様にしておく

 <div>
 <a href="hoge.jpg">
 <img src="hoge.jpg" />
 </a>
 </div>

そして、jquery.colorbox.jsの約170行目付近に２行追加

function makeSettings() {
 var i,
 data = $.data(element, colorbox);

 // 選択中のIDを変更
 $('.imgbox.select').attr('class', 'imgbox'); //←追加行
 $(element).parent().attr('class', 'imgbox select'); //←追加行
}

※一行目の部分を’imgbox viewed’何てことをすれば閲覧済みにもできちゃいそうですね！

選択中のCSSを記述

.select {
background-color: red;
}

※次回はカラーボックスを開いた画面から記事へリンクしたい場合の方法を紹介

viva

More Posts