レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons

JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

[html]<link rel="stylesheet" href="css/rrssb.css" />[/html]

HTMLはこんな感じで

[html]
<ul class="rrssb-buttons clearfix">
<li class="email"> … </li>
<li class="facebook"> … </li>

<li class="googleplus"> …</li>
</ul>
[/html]

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery.1.10.2.min.js"><\/script>’)</script>
<script src="js/rrssb.min.js"></script>
[/html]

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。

レスポンシブでスマホもOKで軽量なLightBox系jQueryプラグイン

IMAGE LIGHTBOX

IMAGE LIGHTBOX

おはようございます。JETBABY管理人です。

今回はさらっと更新しちゃいます。

LightBox系のjQueryプラグインは色々ありますが、PCでもスマホでもきれいに動くのはあまり多くないですね。

今回紹介する「IMAGE LIGHTBOX」はレスポンシブ対応で最初かスマホを意識作られているプラグインになります。
iOSでもAndroidでも動きますし、日本ではあまりなじみないというか関係ないと思いますがWindowsPhoneでも動作します。
もちろんPCでも普通に動きます。
しかもminで4kbと軽量。

画像に特化しているので、iframeで別HTML呼び出したりなどの機能はないのが残念。
ですが、ギャラリー系や画像を見せたいコンテンツではありだと思います。

使い方はこちらのサイトから。

Demoはこちらからご覧ください。
スマホでもご覧ください。