Authentication




Cancel OK
B!コメントする  2011-02-13 01:23:00 by old

画像アップ機能追加のついでにLightboxを使用してみる

今まで記事の投稿は出来ていたんですが画像をくっつけて投稿する機能がなかったので機能追加しました。
普通にPHPで書くとmoveuploadedfileやらエラー処理やら何やらあったりしたんですがCodeigniterで書くと実質2行で終わるといういう・・・。
uploadのライブラリ読み込んで$this->upload->doupload()するだけ。
アップロードするファイルの条件を指定したければ

$config['uploadpath'] = './sample/';
$config['allowedtypes'] = 'gif|jpg|png';
$config['max
size'] = '1024';
$config['maxwidth'] = '1280';
$config['max
height'] = '1280';
として
$this->upload->doupload($fieldname)
するときに一緒に渡してあげるだけでいいという。
慣れるとCodeigniter無しには戻れんかも・・・。

でもそれだけじゃ芸がないので、以前より個人的に気になっていた
画像をクリックしたら別窓を開かずにその場で拡大画像を表示してくれる機能
を入れてみました。
ちょっとしたブログなんかでもよく見られるやつです。
自作してみようと思ったんですが、既存のものを組み込んで見るのもお勉強ですので今回はJavascriptとCSSを使ったLightboxというものを組み込んで見ました。
ソースはhttp://serennz.sakura.ne.jp/toybox/lightbox/?ja
ダウンロードファイルの中のresourceフォルダの中身だけを使うので
サイトにそのままコピー。
次にHEAD要素内に以下を追加
<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script>
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js">

これで準備は完了。
仕上げは拡大した画像にリンクを追加すればOK
<a href="sample.jpg rel=lightbox>
<img src="sample.jpg" alt="sample">
<⁄a>
これだけでOK。
実際にはこんな感じになります。

意外にいい感じです。


CodeIgniter  

  • コメント
  • コメントはまだありません