タグ「jQuery」が付けられているもの


【jQuery】 Colorboxを使ったときに出る青い枠を消す方法

Colorboxの修正

Colorboxで表示させたモーダルウィンドウを閉じた後に出る、青い枠を消す方法を紹介します。

実はこの青い枠は a要素に付いた border じゃなくて、 a:focus の outline なんです。なので解決方法は以下のように値を割り当てます。

a:focus{
  outline: none;
}

これで青枠がでなくなります。

FireFoxではこの a:focus のアウトラインが表示されないので、今まで設定してこなかった人たちも要チェックです。

[Web Design] 今流行のLight Box風jQueryプラグイン「Magnific Popup」を導入してみた。

Magnific Popupのレビュー画面

とりあえずブログに書くネタが全然思いつかないので、ブログに施したカスタマイズをどんどん公開していきたいと思います。

今回はLight Box風jQueryプラグインの「Magnific Popupを導入してみました。

JavascriptやjQueryを全然理解していないので、いろいろな所からソースを引っ張ってきて、何とか導入しました。Movable typeで導入している人は少ない感じですかね。このプラグインは商用利用もできて、レスポンシブデザインに対応しているので、スマホでも問題なく表示できる感じです。


smartphone_magnific.jpg

導入方法は以下のサイトを参考にしました。

Magnific Popup を使って見る | Web Design Leaves

プログラマが紹介する、Webサイトを簡単に華やかにするjQueryプラグイン100選!


ちなみに私はMTを使っているので、以下のように編集しました。

HTMLヘッダー部分

<link rel="stylesheet" href="<$mt:BlogURL$>css/magnific-popup.css">

jQuery部分(ここから引用してきて、私の環境に合わせました。)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<$mt:BlogURL$>js/jquery.magnific-popup.min.js"></script>
<script>

$('.without-caption').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});

$('.with-caption').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
}
},
zoom: {
enabled: true
}
});
</script>

上記の設定だとの<a class="without-caption">が親要素の画像、Magnific Popupするように設定しています。なぜか、CSS設定しなくてもうまく動くみたいなので、あえてCSSを追記してません。他にもいろいろ、カスタマイズできるみたいです。