月別アーカイブ: 2012年12月

jQuery fancyBox 画像拡大プラグイン

ここでは画像拡大プラグインのjQuery fancyBoxの紹介をしていきます。

fancybox

デモはこちら
http://office-goto.info/demo/fancybox/

fancyBoxをダウンロード
http://fancyapps.com/fancybox/#license

headで読み込み

<link href="source/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-1.10.1.min.js"></script>
<script src="source/jquery.fancybox.pack.js"></script>

jquery.fancybox.css、jquery.fancybox.js(jquery.fancybox.pack.js)を読み込んでください。

パラメータの設定

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            openSpeed  : 700,
            closeSpeed  : 700,
            openEffect : 'elastic',
            closeEffect : 'elastic'
        });
    });
</script>

設定できるパラメータ
http://fancyapps.com/fancybox/#docs

html

<a href="img1.jpg" data-fancybox-group="group" class="fancybox" title="1"><img src="thum/img1.jpg"></a>
<a href="img2.jpg" data-fancybox-group="group" class="fancybox" title="2"><img src="thum/img2.jpg"></a>

idやclassなどでターゲットを指定してください。
グループ化する場合はdata-fancybox-group=”group”を記述してください。

CakePHP2.x AppControllerを複数作成

ここではCakePHP2.xでAppControllerを複数作成する方法について解説していきます。

cakephp

public function beforeFilter();
などで全ページにかかわる処理をしたい時に管理画面とフロントと処理が違う場合に役に立ちます。

FrontAppController.phpの作成

app/Controller/FrontAppController.php

<?php

    class FrontAppController extends Controller {
   
        /**
         * フロント画面はここが読み込まれます
         */
        public function beforeFilter() {
   
        }
    }

AdminAppController.phpの作成

app/Controller/AdminAppController.php

<?php

    class AdminAppController extends Controller {
   
        /**
         * 管理画面はここが読み込まれます
         */
        public function beforeFilter() {
   
        }
    }

各コントローラで継承

<?php

    // 読み込み
    App::uses('FrontAppController', 'Controller');
   
    class IndexController extends FrontAppController {
        public $components = array('Session', 'Cookie');
          
        public function beforeFilter() {
            parent::beforeFilter();
        }
          
        /**
         * アクションメソッド
         */
        public function index() {
          
        }
    }

これで管理画面とフロント部で処理を分けれます。