Blog: HTML

顯示具有 HTML 標籤的文章。顯示所有文章

2017年4月13日星期四

[woocommerce]woocommerce 3.0 product image gallery

woocommerce 3.0升級上去後，在product image gallery這邊有了非常大的變化。

2.6以前在"設定"->"商品"選項裡可以選擇的燈箱效果拿掉了，
導致商品頁的lightbox等效果通通失效。

主要是因為3.0後，woocommerce採取更多樣化的選擇提供給使用者去選擇更多的功能。

詳細資訊可看
https://woocommerce.com/2017/04/woocommerce-3-0-release/

目前解決方式如下

在主題的function.php裡面增加下列程式碼

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

回到前台商品頁
功能有出來了但是css的部分能然要設定一下

/* WooCommerce 3.0 Gallery */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

.woocommerce-product-gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 99;
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #169fda;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #1781ae;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: "\f00e";
line-height: 2;
text-indent: 0;
}

參考資料
https://createandcode.com/broken-photo-gallery-and-lightbox-after-woocommerce-3-0-upgrade/

2017年3月24日星期五

[HTML]簡易選單製作

首先html部分

<div class="header" style="height:300px;">
</div>
<section class="section section--menu" id="Alonso">
<nav class="menu menu--alonso">
<ul class="menu__list">
<li class="menu__item"><a href="#" class="menu__link">NEWS</a></li>
<li class="menu__item"><a href="#" class="menu__link">PROJECT</a></li>
<li class="menu__item"><a href="#" class="menu__link">RESERVATION</a></li>
<li class="menu__item"><a href="#" class="menu__link">CONTECT</a></li>
</ul>
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">RESERVATION</a></li>
<li><a href="#">CONTECT</a></li>
</ul>
</div>
</nav>
</section>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>
<div style="height:300px;">
</div>

CSS部分

<style>
body{
padding:0;
margin:0;
}
a {
text-decoration: none;
color: #4e3c3e;
outline: none;
}
a:hover,
a:focus {
color: #f48b95;
}
.section {
}
.menu--alonso{
display:block;
}
.section--menu {
position: relative;
}
.menu {
line-height: 1;
margin: 0 auto 3em;
}
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
background: burlywood;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__list .selected a{
color: #f48b95;
}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* mobile style */
#dl-menu{
display: none;
}
.dl-menuwrapper button {
background: #ccc;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
}
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: #aaa;
}
.dl-menuwrapper button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: #fff;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 #fff,
0 20px 0 #fff;
}
.dl-menuwrapper ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.dl-menuwrapper li {
position: relative;
min-width: 300px;
}
.dl-menuwrapper li a {
display: block;
position: relative;
padding: 15px 20px;
font-size: 16px;
line-height: 20px;
font-weight: 300;
color: #fff;
outline: none;
}
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
.dl-menuwrapper .dl-menu {
margin: 5px 0 0 0;
width: 100%;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.dl-menuwrapper .dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
@media screen and (max-width:1025px) {
.menu__list {
display: none;
}
#dl-menu{
display: block;
width: 100%;
text-align: center;
}
}
</style>

javascript部分

<script>
jQuery(document).ready(function(){
jQuery('.menu__item').click(function(){
jQuery(this).addClass('selected');
jQuery(this).siblings('.selected').removeClass('selected');
});

var flag = false;
jQuery('.dl-trigger').click(function(){
if(flag == false){
jQuery(this).parents().find('.dl-menu').addClass('dl-menuopen');
flag = true;
}else{
jQuery(this).parents().find('.dl-menu').removeClass('dl-menuopen');
flag = false;
}
});
});
</script>
<script>
jQuery(document).ready(function(){
var hh = jQuery('.header').height();
var window_height;
jQuery(window).scroll(function() {
window_height = jQuery(document).scrollTop();
if(window_height > hh){
jQuery('.menu__list').css({position: 'fixed',top: '0', width: '100%', 'z-index': '9999', background: 'rgb(255, 255, 255)', left: '0px', height: '120px'});
}else{
jQuery('.menu__list').css({position: "relative"});
}
});
});
</script>

2016年6月27日星期一

[CSS]calc()介紹

當要將layout切成3等分時，以往的做法通常是針對每個div去下width: 33.3%;來實現

現在可直接下width: calc(100%/3);即可自動切成3等分

另外此方法相當彈性，可加減乘除。

例:
div{
width: calc(100%/3-5px);
}
以上div寬度變成33.3%在減5px

最後補充，不僅可以使用在width上面，padding、margin亦可使用。
例:
div{
width: calc(100%/3-5px);
margin-left: calc(5px*3/2);
}

2016年6月3日星期五

[javascript]簡單製作浮動視窗置底功能

#warnings {

position: fixed;
bottom: 0;
z-index: 999;

2016年5月18日星期三

[javacript]偵測螢幕scroll bar 滑動

2016年5月11日星期三

[CSS]select html element name

input[name="goButton"] {

/*your css code*/

}

用來隱藏google分析的iframe如下

iframe[name="google_conversion_frame"] {

display: none;

2016年3月8日星期二

[CSS]圖片灰階處理

在html部分加上filter屬性

 html {

filter: grayscale(100%);

}

兼容於各瀏覽器

html {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

增加一個svg濾鏡

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="greyscale">

<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/>

</filter>

</svg>



 html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

}

兼容於IE

html{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: url(desaturate.svg#greyscale);

filter: gray;

}

[javascript]上傳圖片預覽

html部分:

<div>

<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">

<div class="img_size"></div>

<input type="file" name="img_upload" id="img_upload">

</div>

javascript部分:

jQuery(document).ready(function() {

 

  function img_preview(input){

    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function (e) {

        jQuery('.img_preview').attr('src', e.target.result);

        var kb = format_float(e.total / 1024, 2);

        jQuery('.img_size').text("檔案大小：" + kb + " KB");

      }

      reader.readAsDataURL(input.files[0]);

    }

  }

 

  jQuery("body").on("change", "#img_upload", function (){

   img_preview(this);

  });

});

2016年2月24日星期三

[jQuery]計算文字框輸入的字數

HTML部分:
<div>
<textarea id="desc" name="desc"></textarea>
<div class="change">您還剩下「<span id="word"></span>」字，即可進行下一步</div>
<div class="next">滿200個字囉！您可以繼續填寫或進行下一步</div>
</div>

javacript部分:
jQuery(document).ready(function() {
jQuery('#word').text('200');
jQuery('.next').hide();
jQuery('#desc').on("keyup", KeyIn).on("keydown", KeyIn).on("change", KeyIn);
});

function KeyIn(evt) {
var maxLength = 200;

var nowContent = jQuery(this).val();
var nowLehgth = nowContent.length;

if (nowLehgth > maxLength){
jQuery('.change').hide("slow");
jQuery('.next').show("slow");
}
else{
jQuery('.next').hide("slow");
jQuery('.change').show("slow");
jQuery("#word").html(maxLength - nowLehgth);
}
}

2014年11月19日星期三

[HTML]網頁中文字亂碼解法

在HTML <head>標籤內插入<meta http-equiv="content-type" content="text/html; charset=utf-8">

訂閱：文章 (Atom)

Blog

2017年4月13日星期四

[woocommerce]woocommerce 3.0 product image gallery

2017年3月24日星期五

[HTML]簡易選單製作

2016年6月27日星期一

[CSS]calc()介紹

2016年6月3日星期五

[javascript]簡單製作浮動視窗置底功能

2016年5月18日星期三

[javacript]偵測螢幕scroll bar 滑動

2016年5月11日星期三

[CSS]select html element name

2016年3月8日星期二

[CSS]圖片灰階處理

[javascript]上傳圖片預覽

2016年2月24日星期三

[jQuery]計算文字框輸入的字數

2014年11月19日星期三

[HTML]網頁中文字亂碼解法

[Laravel]環境架設，使用docker + laradock

搜尋此網誌

2017年4月13日 星期四

2017年3月24日 星期五

2016年6月27日 星期一

2016年6月3日 星期五

2016年5月18日 星期三

2016年5月11日 星期三

2016年3月8日 星期二

2016年2月24日 星期三

2014年11月19日 星期三

2017年4月13日星期四

2017年3月24日星期五

2016年6月27日星期一

2016年6月3日星期五

2016年5月18日星期三

2016年5月11日星期三

2016年3月8日星期二

2016年2月24日星期三

2014年11月19日星期三