A-Fu Design

Facebook Album Browser 臉書公開相簿的瀏覽套件使用 jQuery

Facebook Album Browser 直接抓取臉書的資料，Reponsive jQuery 套件，用於瀏覽Facebook帳戶的公開相簿。套件可以用在一班電腦或者是手機平板裝置。這一個套件主要是用來嵌入在您的網站上訂製相簿列表，不用受到 Facebook 的外觀限制，也可以讓你使用點擊相簿或者相片的事件。

使用方法：
第一步載入Facebook Album Browser 需要用到的 JavaScript 檔

<!-- 使用 Google AJAX API 取得 jQuery 框架 1.11.0 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 載入 Facebook Album Browser 的CSS 檔案 -->

<link rel="stylesheet" type="text/css" href="../src/jquery.fb.albumbrowser.css" />

<!-- 載入 Facebook Album Browser 的主程式碼 -->
<script type="text/javascript" src="../src/jquery.fb.albumbrowser.js"></script>

第二步放置相簿的Div 區塊位置
<div class="fb-album-container"></div>

第三步當網頁載入完成抓取相簿資料

<script type="text/javascript">
 $(document).ready(function() {
      $(".fb-album-container").FacebookAlbumBrowser({
        account: "natgeo",  // facebook 帳號ID
        skipAlbums: ["Profile Pictures", "Timeline Photos"],  // 需要跳過不顯示的相簿
        showAccountInfo: true,   // 是否顯示帳號資訊
        showImageCount: true,    // 是否顯示相片數量
        lightbox: true,          // 內頁是否使用 lightbox
        photosCheckbox: true,    // 允許多選的子項目
        photoChecked: function(photo) {
          //選取的相片項目
        },
        photoUnchecked: function(photo) {
          //沒有選取的相片項目
        },
        albumSelected: function(photo) {
          //相簿選擇的事件
        },
        photoSelected: function(photo) {
          //相片選擇的事件
        }
      });
    });
</script>

Facebook Album Browser with jQuery 相簿內容

作者網站：https://github.com/dejanstojanovic/Facebook-Album-Browser
檔案大小：16.3 KB
檔案下載：https://github.com/dejanstojanovic/Facebook-Album-Browser

No 意見

備忘錄幫助自己記憶所以並沒有寫得很詳細

使用 Ubuntu 14 64bit

1.使用 SSH 登入後先輸入指令更新套件內容

sudo apt-get update

2. 安裝 MySQL 與確認安裝
sudo apt-get install mysql-server mysql-client

安裝過程會提示輸入密碼，安裝完成後可透過以下指令確認是否安裝與啟動

ps auxf | grep mysql

3. 安裝 Nginx

sudo apt-get install nginx

接下來啟動 Nginx 伺服器

sudo service nginx start

4. 安裝PHP5-fpm

sudo apt-get install php5-fpm

5.參考 phalcon 官方文件配置 nginx
官方文件:http://docs.phalconphp.com/zh/latest/reference/nginx.html
Nginx 的設定文件預設在 /etc/nginx/nginx.conf

server {

    listen   80;
    server_name localhost.dev;

    index index.php index.html index.htm;
    set $root_path '/var/www/phalcon/public';
    root $root_path;

    try_files $uri $uri/ @rewrite;

    location @rewrite {
        rewrite ^/(.*)$ /index.php?_url=/$1;
    }

    location ~ \.php {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
 fastcgi_pass unix:/var/run/php5-fpm.sock;
 fastcgi_index index.php;
 include fastcgi_params;
    }

    location ~* ^/(css|img|js|flv|swf|download)/(.+)$ {
        root $root_path;
    }

    location ~ /\.ht {
        deny all;
    }
}

修改完成後可使用以下指令檢察文件正確性

sudo service nginx configtest

接下來重新加載文件
sudo service nginx reload

6.接下來依據官方文件安裝與編譯 phalcon

http://docs.phalconphp.com/zh/latest/reference/install.html

sudo apt-get install gcc make git-core libpcre3-dev php5-dev

git clone git://github.com/phalcon/cphalcon.git
cd cphalcon/build
sudo ./install

接下來需要載入模組

新增模組文件

/etc/php5/mods-available/phalcon.ini

; configuration for php phalcon module
; priority=20
extension=phalcon.so

接下來需要載入模組

使用指令
sudo ln -s /etc/php5/mods-available/phalcon.ini /etc/php5/fpm/conf.d/phalcon.ini

連結檔案後重新啟動 php5-fpm 和 nginx 後就可以再 phpinfo 裡面看到以下模組畫面

最後就可能自由的在 EC2 中使用
phalcon 框架了.預祝安裝使用愉快

No 意見

Strength.js 套件能用在註冊時就先檢查密碼的強度，現在很多網站都有會員機制，很多人怕密碼會忘記或是偷懶都會用一些很簡短簡單的密碼，這樣就讓其它惡意的使用者就有機可趁，這也讓網站的管理者很頭大。

此套件主要的標準分數為:
密碼必須包含8個字符以上
密碼必須包含1個小寫字母
密碼必須包含1個大寫字母
密碼必須包含1個數字
當然有特殊的字元也是加分的關鍵

使用方法:
第一步載入 JavaScripts 和 CSS 的樣式檔案

<!-- 樣式檔案 -->
<link href='strength.css' rel='stylesheet' type='text/css'>
<!-- 使用 Google 的 API 取得 jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Strength.js 的主程式檔案-->
<script type="text/javascript" src="strength.js"></script>

第二步在您要使用密碼檢查的欄位加上 ID

<input id="myPassword" type="password" name="" value="">

第三步使用 jQuery 的載入完成後執行 Strength.js

$('#myPassword').strength({
     strengthClass: 'strength',
     // 輸入框的樣式名稱
     strengthMeterClass: 'strength_meter',
     // 輸入的文字樣式名稱
     strengthButtonClass: 'button_strength',
     // 切換按鈕的樣式名稱
     strengthButtonText: 'Show password',
     // 是否顯示密碼文字
     strengthButtonTextToggle: 'Hide Password'
     // 是否要有切換顯示隱藏
});

作者網站：http://git.aaronlumsden.com/strength.js/
檔案大小：13 KB (包含範例)
檔案下載：https://github.com/aarondo/Strength.js/archive/master.zip
備份下載：下載

No 意見

form2js 轉換後資料內容

現在的網頁越來越多使用AJAX 的方式來撰寫，目前在網頁上常見的格式以 JSON 、XML 較為常見，而在使用 jQuery 因為它本身對 JSON 格式的資料支援度很好，所以常常被拿來做資料交換或轉換，現在要介紹的這一個 jQuery 套件就是能夠直接把表單的內容和元素個體，先轉為 JSON 格式，讓 JavaScripts 可以先處理內容也可以直接把一整個 JSON 的物件傳送給伺服器端做處理，在程式的處理上就會減少很多的步驟。

使用方法：
第一步載入 jqIpLocation 的 JavaScript 檔案


<!--form2js 轉換的主程式碼-->

<script type="text/javascript" src="../src/form2object.js"></script>

<!--JSON 的格式內容-->

<script type="text/javascript" src="json2.js"></script>

第二步寫入表單內容


<form id="testForm" action="javascript:test()">

 <dl>

  <dt><label for="nameFirst">First name:</label></dt>

  <dd><input id="nameFirst" type="text" name="person.name.first"/></dd>

 </dl>



 <dl>

  <dt><label for="nameLast">Last name:</label></dt>

  <dd><input id="nameLast" type="text" name="person.name.last"/></dd>

 </dl>



 <dl>

  <dt>Gender:</dt>

  <dd><label><input type="radio" name="person.gender" id="genderMale" value="male" /> Male</label></dd>

  <dd><label><input type="radio" name="person.gender" id="genderFemale" value="female" /> Female</label></dd>

 </dl>



 <dl>

  <dt>City</dt>

  <dd>

   <select name="person.city">

    <optgroup label="Russia">

     <option value="msk">Moscow</option>

     <option value="spb">St. Petersburg</option>

     <option value="nsk">Novosibirsk</option>

     <option value="ekb">Ekaterinburg</option>

    </optgroup>

    <optgroup label="Europe">

     <option value="london">London</option>

     <option value="paris">Paris</option>

     <option value="madrid">Madrid</option>

    </optgroup>

   </select>

  </dd>

 </dl>



 <dl>

  <dt>Favorite food</dt>

  <dd><label><input type="checkbox" name="person.favFood[]" value="steak"/> Steak</label></dd>

  <dd><label><input type="checkbox" name="person.favFood[]" value="pizza"/> Pizza</label></dd>

  <dd><label><input type="checkbox" name="person.favFood[]" value="chicken"/> Chicken</label></dd>

 </dl>



</form>

<pre><code id="testArea">

</code></pre>

第三步寫入 JavaScript 的動作內容


<script type="text/javascript">

 function test()

 {

  var formData = form2object('testForm', '.', true,

    function(node)

    {

     if (node.id && node.id.match(/callbackTest/))

     {

      return { name: node.id, value: node.innerHTML };

     }

    });



  document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');

 }

</script>

作者網站：http://maxatwork.github.io/form2js/
檔案大小：23 KB (包含範例)
檔案下載：http://github.com/maxatwork/form2js/zipball/master
備份下載：下載

No 意見

A-Fu Design

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive