前提・実現したいこと
非エンジニア、HTML・CSSがかろうじて読めるレベルの初心者です。
Cocoonを積んだWordpressにおいて、ドラッグで回転する画像を実装しようとしています。
下記のスクリプト、
js-cloudimage-360-view / GitHub
を用いてデスクトップ、モバイルともに表示したい赤いソファの画像を作成時、問題が発生しました。ある程度模索していましたが、行き詰ってしまったので知恵をお借りしたいです。
浅学ゆえ言葉足らず感が否めませんが、どなたかよろしくお願いいたします。
作成テストページ
上から
js-cloudimage-360-viewのテスト(実装したい赤いソファ)
js-cloudimage-360-viewのデモ
を設置してあります。
コンテンツ幅は790px、画像は800×800pxです。
問題点
・Wordpressのプレビュー時やサーバー管理者権限のあるChromeブラウザだと表示されるが、公開するとデスクトップ、モバイルともに表示されない。(DEMOは表示される)
・ウインドウ幅を狭めると、高さはそのままに画像が潰れてしまう(触ると直る)
・デスクトップ表示の際に画像の拡大表示をすると、閉じるボタンの×が表示されない。(デスクトップ表示だとDEMOも表示されないが、モバイル表示だと表示される)
試したこと
・Chromeでサーバー内を閲覧編集していたが、IE/Edge/Firefoxでは画像を確認できず、サーバー管理者権限の無いPCからChromeで閲覧しても表示されなかった。
・CSSでheight:auto; width:100%;を設定しても画像が潰れる。
・画像のピクセル数を変更したり、コンテンツ幅を600px、1080pxと上下させても×ボタンは表示されなかった。
該当のソースコード
コードエディター
<!-- wp:paragraph --> <p>testです</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>下記、js-cloudimage-360-viewを使用したsofaのテスト</p> <!-- /wp:paragraph --> <div class="cloudimage-360" data-folder="http://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen=""> </div> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>下記、js-cloudimage-360-viewを使用したchair(DEMO)</p> <!-- /wp:paragraph --> <div class="cloudimage-360" data-folder="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36/" data-filename="chair_{index}.jpg?v1" data-amount="36" data-magnifier="3" data-full-screen=""></div> <div class="image-wrap"></div> <p><!-- Powered by Scaleflex team. All rights reserved. JS Cloudimage 360 View is provided under the MIT License --></p>
カスタムjavascript
window.addEventListener('load', function() { var el = document.createElement("script"); el.src = "https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js"; document.body.appendChild(el); });
補足情報(FW/ツールのバージョンなど)
Xfreeの無料サーバーを使用。
Cocoonを使用、スキンはイノセンスです。
使用しているプラグインは、
Akismet Anti-Spam (アンチスパム)
Contact Form 7
EWWW Image Optimizer
Jetpack by WordPress.com
Media Library Categories
Real Media Library (Free)
Regenerate Thumbnails
Wordfence Security
WP Multibyte Patch
XML Sitemaps
追記
下記が検証ツールを使用してそれぞれのHTMLを検証した際の差異部分です。
正常に動作しているDEMOは文節が1つ多いようです。
【テストに存在しないテキスト】
<div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg") 50% 50% / cover no-repeat;"></div>
◆cloudimage-360より下層部分
DEMO
<div class="cloudimage-360 initialized" data-folder="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36/" data-filename="chair_{index}.jpg?v1" data-amount="36" data-magnifier="3" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;"> <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas> <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg") 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div> <div style="position: absolute; top: 35px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg") 50% 50% / cover no-repeat;"></div> <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg") 50% 50% / cover no-repeat;"></div> </div> </div>
テストページ
<div class="cloudimage-360 initialized" data-folder="https://pomnit.wp.xdomain.jp/wp-content/uploads/2021/07/" data-filename="sofa_{index}.jpg?v1" data-amount="36" data-full-screen="" draggable="false" style="position: relative; width: 100%; cursor: grab;"> <div class="cloudimage-inner-box"><canvas width="802" style="width: 802px; font-size: 0px; height: 802px;" height="802"></canvas> <div style="position: absolute; inset: 0px; width: 100px; height: 100px; margin: auto; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg") 50% 50% / contain no-repeat rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 4px; transition: all 0.5s ease 0s; color: rgb(80, 80, 80); text-align: center; line-height: 100px; z-index: 2;"></div> <div style="position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; z-index: 101; cursor: pointer; background: url("https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg") 50% 50% / cover no-repeat;"></div> </div> </div>
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/14 06:36
2021/07/14 07:07
2021/07/14 10:01
2021/07/14 12:54
2021/07/17 06:29