jQuery

WordPressプラグイン「Pretty Photo Link Tag Generator」国際化対応施しました。

WordPressプラグイン「Pretty Photo Link Tag Generator」をVersion0.2に更新しました。


WordPress › Pretty Photo Link Tag Generator « WordPress Plugins.


内容は国際化対応です。

以前、このブログで書いた記事の通り、Pretty Photo Link Tag Generatorプラグインのソース内の文言すべてを国際化出来るようなコードに置き換えた上で、日本語版を作り置いておきました。

▼ WordPressプラグイン日本語化 moファイルの作成法


日本語版のWordPressをご利用であれば日本語で使用出来るようになりました。


また、昨日書いた「WordPressのコーディング基準」に従いコードの修正も行いました。

▼ WordPressプラグイン・テーマ制作時に気をつけるべき「コーディング基準」


このプラグインはまだまだやりたいことが沢山あるので(いわば現在は未完成・・・)


大事に育てていきたいと思っています。


また、WordPressのプラグインとして制作を検討していらっしゃるものがある方がいらっしゃいましたらお気軽にご相談ください。


多分、お力になれます。


相談だけなら無料ですのでお気軽にどうぞ!

▼ 株式会社ジーティーアイ お問い合わせ

WordPress用プラグイン 「Pretty Photo Link Tag Generator」 をリリースしました!

WordPress用プラグイン 「Pretty Photo Link Tag Generator」 をリリースしました!

このプラグインは「jQuery」のライブラリで当方のブログでもよく検索されている「Pretty Photo」を効率良く使うためのツールです。

Pretty Photo Link Tag Generator
 for WordPress Plugin

pretty photoのタグを簡単に生成することが出来るプラグインです。



また、[pp]というショートコードの使用も可能にします。

使用例:[pp url='http://www.yahoo.com' width='800' height='500' comment='Yahoo!' caution='** Yahoo!' class='link' style='display:block;']Yahoo! com[/pp]

このショートコードは下記のHTMLを出力します。

<a href="javascript:void(0);" onclick="openPPLT('http://www.yahoo.com','800','500','Yahoo!','** Yahoo!');" class="link" style="display:block;">Yahoo! com</a>


It is plug-in which can generate the tag of pretty photo easily.

Moreover, use of the short code [pp] is also enabled.

Example of use : [pp url='http://www.yahoo.com' width='800' height='500' comment='Yahoo!' caution='** Yahoo!' class='link' style='display: block;']Yahoo! com [/pp]

This short code outputs the following HTML.

<a href="javascript:void(0);" onclick="openPPLT('http://www.yahoo.com','800','500','Yahoo!','** Yahoo!');" class="link" style="display:block;">Yahoo!

com</a>


利用方法 The usage
1.PrettyPhotoで開くリンクにしたい文字列を書きます。
A character string to make the link opened by PrettyPhoto is written.




2.文字列を選択し[prettyPhoto]ボタンを押します。すると、Pretty Photoの設定画面が表示されます。

A character string is chosen and the [prettyPhoto] button is pushed.
Then, the setting screen of Pretty Photo is displayed.



3.必要事項を記入し「Submit」ボタンを押します。

Necessary information is filled in and the "Submit" button is pushed.




4.選択された文字列に対し、prettyPhotoで開くようなHTMLタグが生成されます。

A HTML tag which is opened by prettyPhoto is generated to the selected character string.




5.そのまま投稿した記事はイメージのようになります。

The report which contributed then becomes like an image.




※リンクを押下したところ

*The place which clicked the link


ダウンロードはこちら
Download is here.


http://wordpress.org/extend/plugins/pretty-photo-link-tag-generator

[pp url='http://www.yahoo.com' width='800' height='500' comment='Yahoo!' caution='** Yahoo!' class='link' style='display: block;']Yahoo! com [/pp]

このコードが下記のHTMLタグに変換されます。

<a href="void(0);" class="link" style="display:block;">Yahoo!
com</a>


この機能は装備されてはおりますが、編集画面においてこのコードを出力するようにはしていないため
別途、「AddQuickTag」等のプラグインを入れて出力出来るようにしておくのもいいかもしれません。

jQuery版lightbox的なprettyPhotoを試してみました

アイ・エス・シー実験室より

前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で 「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。

本家サイトをいろいろ見れば使い方がわかるんですが(なんだかすごいです。)
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する

で、こんな感じで出来ました!
下記を「test.html」としました。


<!DOCTYPE html>
<html>
<head>
<title>jQuery lightbox clone - prettyPhoto - by Stephane Caron</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.6");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javaScript">
function openInquiry() {
$.prettyPhoto.open('inquiry.html?iframe=true&width=500&height=500','お問い合わせフォーム','内容を入力してください。');

}
</script>
</head>
<body>
<div id="main">
<h2>Iframe JavaScriptから起動</h2>
<input type="button" value="click" onclick="openInquiry();" />

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</div>
</body>
</html>


で、中に表示されるhtml (その1:inquiry.html)


<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>お問い合わせ</TITLE>
</head>
<body>
<form name="form" action="result.html" method="get">
<dt>お名前(※)</dt>
<dd><input name="お名前" size="50" maxlength="255" value="" type="text"></dd>
<dt>メールアドレス(※)</dt>
<dd><input name="メールアドレス" size="50" maxlength="255" value="" type="text"></dd>
<dt>サイトアドレス<br>ホームページアドレス<br>(存在する場合のみ)</dt>
<dd><input name="ホームページアドレス" size="50" maxlength="255" value="" type="text"></dd>
<dt>タイトル</dt>
<dd><input name="タイトル" size="50" maxlength="255" value="" type="text"></dd>
<dt>内容</dt>
<dd><textarea name="内容" rows="10" cols="30"></textarea></dd>
<dt>&nbsp;</dt>
<dd><input value="送信" type="submit"></dd>
</form>
</body>
</html>


続いて、結果ページ result.html


<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>お問い合わせ</TITLE>
</head>
<body>
<form name="form" action="result.html" method="get">
<dt>お名前(※)</dt>
<dd>○○○○</dd>
<dt>メールアドレス(※)</dt>
<dd>abcd@efgh.ij</dd>
<dt>サイトアドレス<br>ホームページアドレス<br>(存在する場合のみ)</dt>
<dd>http://www.wwww.com/</dd>
<dt>タイトル</dt>
<dd>マイホームページ</dd>
<dt>内容</dt>
<dd>お花屋さんのサイト</dd>
</form>
</body>
</html>


※本来はPHPとかでやるはずです。

構成は下記の通り


prettyPhoto
│ inquiry.html
│ result.html
│ test.html

├─css
│ prettyPhoto.css

├─images
│ │
│ ├─fullscreen
│ │ 1.jpg
│ │ 2.jpg
│ │ 3.jpg
│ │ 4.jpg
│ │ 5.jpg
│ │ 6.jpg
│ │ high.gif
│ │ huge.gif
│ │ wide.gif
│ │
│ ├─prettyPhoto
│ │ ├─dark_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─dark_square
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─default
│ │ │ default_thumb.png
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │ sprite_next.png
│ │ │ sprite_prev.png
│ │ │ sprite_x.png
│ │ │ sprite_y.png
│ │ │
│ │ ├─facebook
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPatternBottom.png
│ │ │ contentPatternLeft.png
│ │ │ contentPatternRight.png
│ │ │ contentPatternTop.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─light_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ └─light_square
│ │ btnNext.png
│ │ btnPrevious.png
│ │ default_thumbnail.gif
│ │ loader.gif
│ │ sprite.png
│ │
│ └─thumbnails
│ flash-logo.png
│ quicktime-logo.gif
│ t_1.jpg
│ t_2.jpg
│ t_3.jpg
│ t_4.jpg
│ t_5.jpg

└─js
jquery-1.3.2.min.js
jquery-1.4.4.min.js
jquery.prettyPhoto.js


サンプルはこちらに置きました↓
http://ivankov.iscw.jp/prettyPhoto/test.html


↓↓↓


↓↓↓



アーカイブダウンロードはこちら
ダウンロード
QRコード
QRコード
  • ライブドアブログ