IMUZA.com

<<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で送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

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

Another Sites

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

Contact Us

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

Copyright © 2022 · IMUZA.com