WordPressでLitebox風に表示する方法

WordPressでの画像を

のように表示させたい事はありませんか?

一般的にLiteboxという形で認知させれいますが、
今回はJqueryを使って簡単にLitebox風に表示できるものをつくってみました。

まずは、Jqueryをテーマの部分に埋め込みます。

<script src="http://www.google.com/jsapi" type="text/javascript">
</script><script type="text/javascript">google.load("jquery","1.3");</script>

まずは、下からのプログラムをダウンロード、
プログラムはこちら>>
解凍してFTPでテーマ(/wp-content/themes/???)のところにアップします。※???がテーマの部分

そして、下記のコードをテーマの部分に埋め込みます。

<script src="/wp-content/themes/???/lightbox/lightbox.js" 
type="text/javascript"></script>
<link rel="stylesheet" href="/wp-content/themes/???/lightbox/style.css">

これで準備完了!!

後は、画像を追加した後のコードに

画像のように

class="modal"

を追加すればできあがり!


コメントする