その買うを、もっとハッピーに。|ハピタス

Coin Sliderを高解像度画像に対応させる

jQueryプラグインで有名なCoin Sliderですが、使ってみて高解像度画像に対応していないことに気付きました。
Retinaディスプレイなどの高解像度画像に対応するためには、HTMLタグではimgの属性にwidth及びheight指定、CSSのbackground-imageならbackground-sizeを指定してあげる必要があります。
しかしimgタグにwidth/height指定してCoin Sliderを使ってもうまく反映されません。
なので恐らくプログラム側で動的にbackground-imageを使っているのかなと予想しましたが、DOMの要素解析をしてみるとやはりそうなってました。
ということで、ソースをイジることにしました。
ソースをイジると言っても自分はこんなプログラムは作れないし、どこにどうbackground-sizeを指定してあげれば良いのか少々苦戦しましたが、結果的にうまく行きました。


「set panel」と「positioning squares」のコメントアウトがある各種プロパティを設定している箇所に「'background-size': params[el.id].width+'px '+params[el.id].height+'px'」を追加すると望みの動作になると思います。
色々あるプロパティの途中に追加する場合は、勿論上記にプラスしてカンマ区切りを足してあげる必要があります。
「set panel」は土台の最初の表示、「positioning squares」は動作中の表示として反映されてるものと思います。


無事解決してめでたしめでたし。