jQueryやCSS3を利用したスクリプト。
写真を画面いっぱいに並べて表示できるかっこいいスクリプトです。
画面の切り替え時もさりげなく広がっていく写真の数々。
豊富な写真を一目で見てもらうためには使ってみたいスクリプトですね。
Archive for the Category »WEB制作 «
写真の一覧表示に使える、写真をパネルのように貼り付けるスクリプト
26 9月 2013
Category: jQuery
Leave a Comment
JavaScriptでブラウザの画面サイズの高さを取得する方法
21 12月 2010
ブラウザの描画領域の高さを調べないといけないことがあったので備忘メモ。
以下のコードで取得してみた。
function getBrowserHeight() {
if ( window.innerHeight ) {
return window.innerHeight;
}
else if ( document.documentElement && document.documentElement.clientHeight != 0 ) {
return document.documentElement.clientHeight;
}
else if ( document.body ) {
return document.body.clientHeight;
}
return 0;
}
Category: Script, 備忘メモ
Leave a Comment
PHPからImageMagickを使って画像のコピーとかリサイズとかする方法
21 12月 2010
タイトルがだいぶアバウトだけど、
透過状態を保持しながら画像を縮小する必要があったためGDでは対応できずImageMagickを使うことに。
PHPはよく使うけど細かいことはよくわからない私。
そんな人もいると思うので、備忘も兼ねて簡単に紹介。
まずImageMagickが使えるかどうかだけれど、
レンタルサーバーを借りている場合はサポートとか質問に書いてある。
XServerとかさくらインターネットだと使える。
で、使い方。
意外と簡単だった。
ImageMagickは独立した実行モジュールのためコマンドを通して動かす。
PHPからだったらSystem(命令);とすればよい。
使えるコマンドは以下に書かれています。
ImageMagick: Command-line Tools: Convert
例えば次のようにしたらリサイズできる。
しかも拡張子を変えても自動でフォーマットを変換してくれる。
system('convert -geometry 32x32 filein.png filein.jpg);
いろいろコマンドがあるので試してみてはどうでしょうか。
Category: PHP, 備忘メモ
Leave a Comment
URLで渡したパラメータに勝手に円(¥)マークが挿入されてしまうのを防ぐ方法
30 11月 2010
新しいWEBサービスで、無料で簡単にヘッダーバナー画像が作れるツールを公開したんだけれど、
その際にローカルで起こらなかったことがサーバー上で起こってたのでちょっと困っていた。
その解決方法についての備忘用メモ。
その現象というのは、ページ遷移の際にパラメータを受け取ったら¥マークが入ってしまう現象。
まあ、自動で特殊文字をエスケープしてくれてるんだろうなというのはわかったけど、
どうやって直すのかがわからなかった。
PHPのどのパラメータをいじればいいのかわからなかったので色々調べていたら見つけた。
たまたま見つけて参考にしたサイト。
PHPで、円マークが意図しないのに混入する場合
magic_quotes_gpc の設定
まあ、magic_quotes_gpcの設定をoffにするだけでよい。
php.iniファイルに
magic_quotes_gpc=off
と入れるだけ。
同じように悩んだ人がいたらこのページを見つけてもらえたら幸いです。
Category: PHP, 備忘メモ
Leave a Comment
WordPressで勝手に段落タグが入って改行されてしまうのを防ぐ方法
20 11月 2010
WordPressをCMSとしてお客さんに提供する際、
厳密にレイアウトを作るために勝手に<p>タグが入ってしまうのを防ぎたい。
改行タグを消すだけなら改行変換部分のコードをコメントアウトすれば良いだけなのですが、
お客さんにもさわってもらうため、リッチテキストエディタでの改行が反映されないといけない。
そこで、いろいろ調べて今使ってる方法がこちら。
まずは無駄な改行タグが入らないようにしてくれるプラグインを入れる
プラグインはこちら
で、お客さんにはリッチテキストエディタでの改行を反映してもらいたいので
brBrbr.phpの22,23,27行目を以下のコメントアウトすれば、改行が入る上、<p>タグが付かなくなります。
// $brbr = preg_replace(‘|<blockquote([^>]*)>|i’, “</p>\n<blockquote$1><p>”, $brbr);
// $brbr = str_replace(‘</blockquote>’, “</p></blockquote>\n<p>”, $brbr);
// $brbr=”<p>\n”.$brbr.”</p>\n”;
とりあえずこれで動かしてます。
この記事が書かれていたブログエントリーがなくなってたのであわててキャッシュから取ってきて備忘としてここに載せました。
これは使える！かっこいいトランジション効果で写真を切り替えるjQueryスライドショー
14 10月 2010
様々なトランジション効果で写真を切り替えるjQueryベースのスライドショースクリプト。
切り替えのスピードからトランジション効果の設定までオプションも充実。
自動で切り替わるので、サイトのタイトルとかちょっとしたアクセントとしてスライドを入れたいときにお勧め。
取り付け方も簡単なので、ぜひ使ってみてください。
超簡単に説明。
スライドショーにさせたい画像を次のように好きなだけ配置。
<div id="container"> <img src="image1.jpg" alt="image 1" width="500" height="250" /> <img src="image2.jpg" alt="image 2" width="500" height="250" /> <img src="image3.jpg" alt="image 3" width="500" height="250" /> . . . </div>
あと、スクリプトをページのどこかで読み込んでください。
</body>の前にでも置けばいいでしょう。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
それだけでとりあえずランダムなトランジションがかかったスライドショーが出来ます。
僕はPhotoshop,Illustratorチュートリアルのブログで使ってみました。
詳しい説明は控えますが、オリジナルサイト（英語）で詳しい使い方が解説されています。
※tweet数とかはてぶの数が増えそうなら詳しい説明入れようと思います。
jQuery Panel Gallery Plugin 2.0
デモはこちら、いろいろなパターンのスライドを試せます
ちなみに日本語で紹介されているページ
50以上のエフェクトから選べるベーシックなスライドギャラリーjQueryプラグイン
