邏輯生活

2016年12月29日星期四

Owl-Carousel 控制 height 的問題

Owl-Carousel 真的很強的照片輪撥外掛
只是因加入了[透明遮照] 高度問題,一直控制不了 !
翻找好久 , 總算找到這篇依原照片寬高來呈現的方法
Image slider: maintaining equal height for all images while keeping slider responsive
--
也能符合手機的瀏覽尺寸

          
//自動依圖尺寸
          $(".owl-carousel").each(function () {
              var $this = $(this);

              $this.owlCarousel({
                  afterUpdate: function () {
                      updateSize($this);
                  },
                  afterInit: function () {
                      updateSize($this);
                  }
              });
          });

          function updateSize($carousel) {
              var maxHeight = 0;

              $('.owl-item', $carousel).each(function () {
                  var $this = $(this);
                  var $image = $this.find('img');

                  //Max height
                  var prevHeight = $this.height();
                  var thisHeight = $this.height('auto').height();
                  $this.height(prevHeight);
                  maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);

                  //Set image as background
                  var imageSource = $image.attr('src');
                  $this.css('backgroundImage', 'url(' + imageSource + ')');
              });

              //Set equal height
              $('.owl-item', $carousel).height(maxHeight); //maxHeight

              $('#max-height').text(maxHeight + 'px'); //maxHeight
          }
          //

2016年12月28日星期三

vs2015 aspx 儲存沒回應問題

第一次遇到 , 按儲存後 ; 沒回應...
結果強制中斷後 , 再啟動 *.aspx 標驚嘆號!
--
vs2015 還是會把原檔先作一份 TMP , 在轉存的!

如圖:

Making image captions using jQuery

Making image captions using jQuery (適用輪撥照片外掛加掛文字 link)
hover-caption
----
找好久,目前測試下;是可以使用的!
PS:chrome . ie 都失效 ; 再研究看看

20161229:
總算調整可以了,請查看底下1篇和2執行demo
Informações ao Passar Mouse na Foto
demo (1)
demo (2)
----
主要是採用了輪撥 owl.carousel 但並沒有 caption + link , 只能自加了!
字體還是醜...再慢慢調整了!