IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / バグ修正:はてなブログ用スライダー改訂版

バグ修正:はてなブログ用スライダー改訂版

2017/11/15 javascript, はてなプラグイン, はてなブログ

前記事で公開した「はてなブログ用スライダー改訂版」にバグがあります。

バグと言いますか、私の知識不足ではあるのですが(ペコリ)、本体の Javascriptではなく、記事内に書くスライダーの呼び出しスクリプトに問題があります。

<!-- idはオプションのidと一致させれば任意 -->
<div id="myslider">
[f:id:ausnichts:20171113140837j:plain]
[f:id:ausnichts:20171113140931j:plain]
[f:id:ausnichts:20171113140911j:plain]
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var slider = new imzSlider({
    id: 'myslider',
    arrows: true
  });
});
</script>

ここの new でスライダーコンストラクタを呼び出している呼び出し方が間違っています。

document.addEventListener("DOMContentLoaded", function() {

のイベントターゲットが document では動かないブラウザがあるようで、window にすべきです。

また、本体のスクリプトをフッタに入れていますので、呼び出しを HTMLドキュメント読み込み完了時の DOMContentLoaded でいけるかと思ったのですが、おそらく CSSファイルが読み込まれていないせいなのかうまくスライド画像が表示されない場合があります。

ということで、こうなりました。

<!-- idはオプションのidと一致させれば任意 -->
<div id="myslider">
[f:id:ausnichts:20171113140837j:plain]
[f:id:ausnichts:20171113140931j:plain]
[f:id:ausnichts:20171113140911j:plain]
</div>
<script>
window.addEventListener("load", function() {
  var slider = new imzSlider({
    id: 'myslider',
    arrows: true
  });
});
</script>

スライド画像が多い場合にそれらが一瞬表示される場合がありますが、これは次回解消できるはずです。

はてなブログ用スライダー改訂版
はてなブログ用カルーセル仕様スライダー「imzCarousel」jQueryなし
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/26

IntersectionObserverで要素の位置を知る

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript101
  • Joomla!88
  • Wordpress79
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com