Highslide JSのコントローラーについて質問です。

質問

Highslide JSのコントローラーについて質問です。

http://2dpuppet.web.fc2.com/top.html

上記ページのギャラリーにおいて、画像を拡大した際に表示されるコントローラー（オンマウスで浮かび上がります）が変なリストのままなおりません。
どこをどうすれば画像のようなボタン式になるでしょうか？
初心者ですが、どうかご教授願います。

回答No.6

yuki4499 · ベストアンサー

とりあえずなんでスタイルが崩れるのかも動かない理由もだいたいは分かりました。
が、修正箇所が多いことや色々と思うことがあるので置いておきます。

正直なところ、あなたがやりたい事に知識が圧倒的に追いついていません。
初めてなのですから当然ですが、逆に言えば初めての人が
インラインフレームやらCSS、JavaScriptを使うということが無理があるように思えます。
簡単なページならコピー＆ペーストでもいけるでしょうが
あなたが作っているようなサイトだとコピー元に少し手を加える必要があります。

ですので提案としては二つ。
1.慣れている人にホームページの作成を委託する。
2.JavaScriptやCSSを使わず、まずは本当に簡単なホームページから作成し、理解を深める。
以上のどちらかをおすすめします。

お礼

丁寧なアドバイスありがとうございます。

実は、その慣れてる人にCSSを使うよう叩き込まれたのですが（CSSでやるべきだ、と）私には早いようなので、難しい事は控えるようにします。
とりあえず、他の友人がHTMLで代理で作ってくれると言ってくれたので今その最中です。
それが完成しましたら、また色々考えたいと思います。

補足

なんとか、友人のアドバイスの下、正しいページが自分でも作る事ができました。
色々とありがとうございました。

ただ、イラストを表示するのはどうしてもJavaScriptを使いたいのですが・・・。
それも、参考に頂いたサイトどおりにスムーズに表示する事ができました。
しかし、また、インラインフレームから出てくれないという事態が再びきてしまって困ってます。
これだけ完成させたいと願っています。
どうかご教授願えませんでしょうか？

以前のアドバイスどおりやってもフレームからは出ませんでした。

http://2dpuppet.web.fc2.com/

回答No.5

fujillin

No1、No2です。

正直に言って、私には質問者様がおっしゃっているのがどこなのか、未だにわかりません。
それを確認する意味からも、No1で特定しようとしましたが、それは無視されたままの状態です。

無視されたままのままなので…
＞これではコントローラーはなおらないままなのでしょうか。
＞もしそうなら、正しい表記をご教授願いたいです。
と言われても、エスパーでもない私には、正しい表記どころか何をしたいのかもわからないままです。

No3様もおっしゃっているように、私の環境でもHighslide JSが動作していることは確認できません。（←#1にも書いてありますが）
想像では、そもそもの設置方法が間違っていると思われます。（何をしたいのか不明なのでわかりませんが）
それなので、情報量が変わらない以上No1と同じ回答しかできません。

ここでの短い文章での回答よりも、多くのサイトで設置の方法を解説していますので、それらを確認しながら、まずは動作するように設置することが先決のように思います。（これまた想像ですが、現状は、多分動作していません）
他の要素を入れたり、レイアウトをいじくる前に、まずはご自分で、動作できるように設置できていることを確認することが重要です。
http://es.rojo.jp/js/es_js22.html
http://www.koikikukan.com/archives/2007/01/18-005102.php
http://blog.le-coeur.net/archives/253#
http://www.photoclip.net/blog/2010/02/06/highslide-js%E3%81%AEhighslide-editor%E3%81%AF%E3%81%99%E3%81%94%E3%81%8F%E4%BE%BF%E5%88%A9/

もちろん、本家の解説が一番情報が多いです。（全てあるはず）
あるいはDLしたものの中にも設置方法の説明があるはずだと思いますが？
http://highslide.com/

補足

それは大変失礼致しました・・・。
fujilin様が仰った箇所です。
こちらの画面では全て正常で、正直混乱しています。

最初は、HPを作って、そこにただHighslide JSを設置しただけでした。
その後、設置したインラインフレーム内から外まで画像がズームしないという状況に見舞われましたので前回の質問をするに至りました。

そもそもデザインが崩れているのは、Highslide JSのせいなのかもわかりません。
これから、一度Highslide JS関係のものをを全て外してみます。
その上でご確認をお願いできますでしょうか？

色んな参考サイトを見て設置してみたのですがうまく設置できずに困ったりもしました。
上記のURLのサイトも何度か見ていますが、うまくいかなかったり・・・。
とりあえず、Highslide JSのCSSやスプリクトを外してみます。

回答No.4

yuki4499

CSSになんか変なゴミがついてたので補足
↓に修正しておいてください。
http://2dpuppet.web.fc2.com/highslide/highslide.css

お礼

別の友人から見たページのSSを見ました。
自分の見ているページとはまったく違った位置にボックスがあったりして、どうなっているのかわかりません。
自分のページでは確かにデザインどおりにしか（ファイアフォックスでも多少のズレ程度で）表示されないので戸惑ってます。。。
どうしたら正しく表示されるようになるのでしょうか・・・。

補足

えっと、これをTOPのCSSに追加しておくといいのでしょうか？

回答No.3

yuki4499

質問内容ではなかったのでスルーしてましたが、初めからエラーが相当数出ていました。
FF、IE、Opera、スレイプニル、クロームで確認しましたがスタイルも崩れますしHighslide JSが質問者様の言うように作動していたことは一度も確認できませんでした。
別ページでやってると思って途中から気にしていませんでしたが。
ちなみにHTMLチェックとかしてみるとこうなりました。
http://2dpuppet.web.fc2.com/top.html を XHTML1.0 Transitional としてチェックしました。
109個のエラーがありました。このHTMLは -557点です。タグが 20種類 52組使われています。文字コードは Shift JIS のようです。

実際細かい警告を無視したとしてもbodyが二個あったりheadにbodyがあったり”が変な位置にあったりと
HTMLが滅茶苦茶な状態になっています。

本題のコントローラーについては
<link type="text/css" rel="stylesheet" http://2dpuppet.web.fc2.com/highslide/highslide.css" />
を追加すれば直りますが上記の理由によりまともに動作するかは保証できません。
イラスト同様、いきなり上手なHPを作るということは不可能に近いことなので、あまり凝ったことはせずに初めはシンプルな形式にした方が良いと思われます。

お礼

もうどこをどうすれば正しくなるのかわかりません・・・助けてください・・・。

補足

私の画面からは正常に反映されていたのでどうなっているのかよく把握できかねます・・・。
コントローラーはどのへんに追記すればよろしいでしょうか？

回答No.2

fujillin

No1です。回答から離れていってしまうけど…

＞ファイアフォックスだと崩れてしまうのは把握していました。
他のブラウザでも同様です。FF、IE、Operaもな同様でした。IE6は透過pingに対応していないので余計ですね。

＞エラーが出るというのははじめて聞きました。
これもどのブラウザでも出ています。（数は違うかも知れませんが）

ちなみに、Opera10の場合だと、
CSSで19個の警告とエラー、スクリプトで2個のエラー（動作するとエラーが増えます）が出ます。
文字数制限があるので、以下一部のみ。ご参考まで。
（最後の2つがスクリプトエラーです）
---------------------------------------------------------------
CSS - http://2dpuppet.web.fc2.com/2dpuppet/bace.css
Linked-in stylesheet
Invalid value for property: cursor
Line 109:
cursor: url(http://2dpuppet.web.fc2.com/highslide/graphics/zoomin.cur), pointer;
---------------------------------------------------------------
CSS - http://2dpuppet.web.fc2.com/2dpuppet/bace.css
Linked-in stylesheet
Invalid value for property: font-size
Line 114:
font-size: 10pxt;
---------------------------------------------------------------
CSS - http://2dpuppet.web.fc2.com/top.html
Inlined stylesheet
Invalid value for property: cursor
Line 1:
ighslide img {cursor: url(../highslide/graphics/zoomin.cur), pointer !important;
---------------------------------------------------------------
CSS - http://2dpuppet.web.fc2.com/top.html
Inlined stylesheet
Invalid value for property: cursor
Line 1:
ighslide img {cursor: url(../highslide/graphics/zoomin.cur), pointer !important;
---------------------------------------------------------------
JavaScript - http://2dpuppet.web.fc2.com/top.html
Event thread: DOMContentLoaded
Error:
name: TypeError
message: Statement on line 52: Cannot convert undefined or null to Object
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace
---------------------------------------------------------------
JavaScript - http://2dpuppet.web.fc2.com/top.html
Event thread: load
Error:
name: TypeError
message: Statement on line 52: Cannot convert undefined or null to Object
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace
---------------------------------------------------------------

補足

こういったものを初めて使うので、以前こちらで質問させていただいた時にこの形になりました。
http://okwave.jp/qa/q5822176.html

なのでよくわかりません・・・すみません。
これではコントローラーはなおらないままなのでしょうか。
もしそうなら、正しい表記をご教授願いたいです。

回答No.1

fujillin

ご質問の部分がどこを言っているのか良く分からないけれど…

Galleryとあるところの画像（kohane-top1-s.jpg）のことだろうか？
クリックしても大きな画像（kohane-top1.jpg）が表示されるだけで、
<a href="～～"><img src="～"></a>
のリンクタグで別画像に遷移しているだけと思われます。（Highslideが動作しているとは思えない）

他にはそれらしきものは見当たらないけれど…？？

ご提示のトップページ（？）も画像同士や画像と文字が重なってしまったりするけれど、これでいいのかしらん？
（それとも、実験中ということなのかな）
また、このページはIE6だとスクリプトエラーが何回か出るみたい。

補足

ファイアフォックスだと崩れてしまうのは把握していました。
初めてHPを作ったのですが、両方で崩れない方法がよくわからず、とりあえずIE対応の形になっています。

エラーが出るというのははじめて聞きました。

やりたい事は、画像が少し見づらいのですが、拡大した際にオンマウスで出るコントローラーのアイコンを表示したいと思っています。
現在は、アイコンではなく変なリスト形になってしまっているので・・・。