發表文章

目前顯示的是 三月, 2017的文章

分享一個好用的jQuery跑馬燈套件als

圖片
最近在更新佈景程式要吧原本用很久的javaScript寫的跑馬燈換掉,改用HTML5+jQuery的跑馬燈,剛好找到這個http://als.musings.it/網站有很多最新的JS移動套件可以使用,且維護容易,不過參數及CSS需要修改一下才能使用,以下為修改過後跑馬燈CODE直接套用就可以使用了。

1、先去http://als.musings.it/網站下載jquery.als-1.7.js


2、然後引入jquery.als-1.7.js與加上設定參數(效果是文字由下往上滑動,更多滑動方式可以參考als網站的說明)
<script type="text/javascript" src="js/jquery.als-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lista1").als({
 visible_items: 1,
 scrolling_items: 1,
 orientation: "vertical",
 circular: "yes",
 autoscroll: "yes",
 interval: 4000,  //跑馬燈速度毫秒 
 speed: 50,
easing: "linear",
start_from: 0
 });
});
</script>
3、於CSS檔案中加上以下的設定,高度寬度及樣式可自行調整增加

#als-div {
        position: relative;
width: inherit;
height: 43px;
bottom: 37px;
opacity: 0.9;
z-index: 50;
}
.als-container {
position: relative;
width: 100%;
z-index: 0;
}
.als-viewport {
position: relative;
overflow: hidden;
text-align: left;
}
.als-wrapper {
posi…

使用php_class_upload的多圖上傳功能

圖片
這裡先要感謝吳弘凱老師寫的實戰php7書中提到的圖片上傳套件php_class_upload,真的非常好用,比起之前寫一大堆php程式這個套件簡單明瞭又好維護,真是太讚了,不過因為書中的範例只有單張圖片上傳的方法,最近在開發客戶新佈景時需要用到多張上傳的圖片功能,於是去php_class_upload官網查了一下faq有提到多圖上傳的程式寫法,經過修改之後已經可以多張圖片上傳了,吧這功能分享給大家參考。

1、先去php_class_upload官網下載php_class_upload套件
https://www.verot.net/

裡面有upload檔,放到模組的class目錄中。

2、html結構部分增加樣上傳的欄位,簡略說明,當然如果您要html5的多圖上傳框也行,這裡是用傳統的方式說明。


<form action="" method="post" enctype="multipart/form-data">

<input type="file" name="upfile[]" />

<input type="file" name="upfile[]" />

<input type="file" name="upfile[]" />

<input type="submit" value="Send" />

</form>

3、於php檔案中加上以下的code


<?php

function save_pic($up_id= "",$width="",$height=""){

include_once "class/upload/class.upload.php"; //引入class.upload.php檔


//多圖上傳

$files = array();

foreach ($_FILES['upfile'] as $k => $l) {

foreach ($l as $i => $v…

使用PHP解析FB網址撈出會員ID及會員name的方法

剛好最近在開發客戶網站上遇到需要使用到FB的會員id或是會員name才能使用的套件功能,當然可以請客戶自己去找FB的ID並不困難,但有些客戶就是找不到,所以乾脆寫一個php解析網址中內容的方法,這樣客戶只要輸入FB的會員網址就能自動解析出來會員的ID或是會員name了,增加user網站的操作便利性,方法如下:
<?php
$url='https://www.facebook.com/NeilHsu168/';  //FB的網址
$urlarr=parse_url($url); //解析網址
parse_str($urlarr['query'],$parr); // 存成陣列


if (strpos ($url, "-")){   //搜尋網址中是否有-
  $fduserid=split('-',$urlarr[path]);  //將-切割成陣列
$endfduserid=end($fduserid);
$endfduserid=str_replace("/","",$endfduserid); //取得$fduserid陣列最後一組數值並去除/
echo $endfduserid;

}elseif(strpos($url, "?")){    //搜尋網址中有沒有?
echo $parr[id];    //輸出ID數值

}else {
 $urlarr[path]=str_replace("/","",$urlarr[path]);    //去除/
  echo $urlarr[path];  //直接輸出name
}
?>
經測試如果FB網址是id數字類型的,例如:

https://www.facebook.com/profile.php?id=100009554504437&fref=ts

則輸出結果為 100009554504437

如果FB網址是英文字串類型的

https://www.facebook.com/NeohsuXoops

則輸出結果為 NeohsuXoops

如果FB網址是英文字串類型又有-分隔的

https://www.facebook.com/XO…

啟用mod_deflate網站壓縮功能

圖片
每次使用Google的PageSpeed Insights測試網站的seo效能,總是會顯示問題處要求【啟用壓縮功能】,問題是要怎麼壓縮檔案呢?



上網查了一下原來如果是Apache伺服器可以建立.htaccess檔案於根目錄中,然後貼上此下的內容。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

存檔後,再次使用Google的PageSpeed Insights測試網站的seo效能,已經沒有再問題中出現需要壓縮檔案的建議了,而是在通過規則處顯示【啟用壓縮功能】,這樣網站的seo效能又可以提高一些了。




 教學撰寫:徐嘉裕 Neil hsu