// 這是用滾輪放大縮小圖片 (此範例firefox不支援)

    $("#imgProductBig").bind("mousewheel", function (ev) {

        var delta = ev.originalEvent.wheelDelta > 0 ? 1 : -1;

        if (delta > 0 && zoomValue < 150) {

            zoomValue += 10;

        }

        else if (delta < 0 && zoomValue > 50) {

            zoomValue -= 10;

        }

        $(this).css("zoom", zoomValue + '%');

        return false;

    });

input[type="radio"]:not(old){

width:28px;

margin:0;

padding:0;

@include opacity(0);

}

input[type="radio"]:not(old) + label{

display: inline-block;

margin-left: -28px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:not(old):checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

.r-btn:not(old){

    input[type="radio"]{

     width:28px;

     margin:0;

     padding:0;

     @include opacity(0);

    }

    input[type="radio"] + label{

     display: inline-block;

     margin-left: -28px;

     padding-left: 18px;

     background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

     width:auto;

     line-height: 12px;

    }

    input[type="radio"]:checked + label{

     background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

     width:auto;

    }

}

input[type="radio"]:not(:checked), input[type="radio"]:checked {

    position: absolute;

    left: -9999px;

}

input[type="radio"]:not(checked) + label{

display: inline-block;

margin-left: 4px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

<ul class="aaa">

<li><img src="http://placehold.it/150x150" /></li>

</ul>



<ul class="bbb">

<li><div><img src="http://placehold.it/150x150" /></div></li>

</ul>

.aaa li{

display: inline-block;

width: 160px;

}



.aaa li img{

width: 150px;

border: 5px solid #ececec;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

.bbb li{

display: inline-block;

width: 160px;

}

​.bbb li div{

width: 150px;

padding: 5px;

background: #ececec;

overflow: hidden;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

.bbb li img{

width: 150px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

對於PC版大尺吋的螢幕，當網站要 feed 資料到 facebook 時，可以使用 javascript SDK 的
FB.ui => method:'feed' 方式處理，參考位置。此方法會popup小視窗讓user可以分享資料出去。

但是遇到手機版網頁就有點麻煩，實測上手機版的 chrome 會出現轉不停的情況，無法分享；而iPhone則是另開新頁面處理，可以成功但是會多一個分頁。所以手機版網頁建議使用 redirect 方式處理分享機制，參考位置
​

    var fbUrl = "https://www.facebook.com/dialog/feed?" +

    "app_id=122465741241119&display=touch" +

    "&link=" + encodeURIComponent("http://www.shopunt.com/tch/FixPage.aspx?id=525") +

    "&picture=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/fb_200x200.jpg") +

    "&description=" + encodeURIComponent("市價不斐的光療DIY教學，UNT傾囊相授！10場巡迴免費教學，讓妳輕鬆掌握光療DIY訣竅，並搶先體驗秋冬最新流行色！現場打卡，再送時尚美甲工具組") +

    "&redirect_uri=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/Handler.ashx?fun=FBCallback");

當然以 redirect 處理與 javascript 方式處理是兩種不同的方式，redirect 方式的 callback 網址 (redirect_uri)要接收facebook 導回的 post_id , javascript 方式則是 callback function 處理 post_id

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

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