こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CrossSlideが起動しません。

こんばんは、よろしくお願いします。
現在制作中のサイトのトップページにCrossSlideを設置しましたが、「Loading... 」の文字のみが表示され、CrossSlideが起動しません。
javascriptが全くわからず、以前、会社の先輩が他のサイトで使用したソースをそのまま使用しています。お手数ですが、原因のわかる方、教えていただけませんでしょうか。

○ソース○
【head】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
<link rel="stylesheet" href="stylesheet/thickbox.css" type="text/css" media="screen" />
<title>☆☆☆☆</title>
<script src="javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.cross-slide.js" type="text/javascript" charset="utf-8"></script>
</head>

【body】

<body style="background-color:#FEF8E8;">
<script type='text/javascript' id='visualArea'>//<![CDATA[
$(function() {
$('#visualArea').crossSlide({
speed: 45, //px/sec
fade: 1 //sec
}, [
{ src: 'move/move_1.jpg', dir: 'up' },
{ src: 'move/move_1.jpg', dir: 'down' },
{ src: 'move/move_1.jpg', dir: 'up' },
{ src: 'move/move_1.jpg', dir: 'down' },
{ src: 'move/move_1.jpg', dir: 'up' },
{ src: 'move/move_1.jpg', dir: 'down' },
{ src: 'move/move_1.jpg', dir: 'up' }
]);
});
//]]></script>

<div id="visualArea"> Loading...</div>

投稿日時 - 2010-12-20 22:00:28

QNo.6397155

すぐに回答ほしいです

質問者が選んだベストアンサー

不可思議だったんで、「cross-slide.js」入手して試してみたんですけど、
こいつ結構くせのある融通きかないプラグインですね!。

まず、コンテナーのサイズがCSS又はスタイル属性で固定指定されてないとだめです。
<div id="visualArea" style="width:600;height:300;"> Loading...</div>
みたいに..

それから、表示する画像のサイズがコンテナーより小さいとだめみたいです。
※エラー吐き出してます。

それから、
speed: 45, //px/sec
fade: 1 //sec
の指定ですが、フェード指定時間内に描画が終っちゃうようだとエラーだします。
うっとしい!。これはspeed指定せずに
sleep: 3,
fade: 1
みたいにspeed指定しなければ、気にしないで済みます。

そおいったところかな。

(結果)
私しゃ、こんなライブラリー使いたくない!他の探します。

投稿日時 - 2010-12-21 18:05:37

お礼

本当にありがとうございました!
とても勉強になりました。
他のライブラリーを使うことも考えてみたいと思います。
お手数おかけしました。

投稿日時 - 2010-12-22 18:11:14

ANo.3

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(3)

ANo.2

<script type='text/javascript' id='visualArea'>のid='visualArea'をはずしてしまうと、「Loading...」の文字も出なくなってしまうんです?

=>それは正しい動きではないかと、はずす事によって出力先が特定できて、「CrossSlide」が起動してるんじゃないかと..。画像が表示されないのは他に原因があるんじゃないですか。

「move/move_1.jpg」のパスとファイル名あってますか。そのページと同じディレクトリー
にmoveというディレクトリーがあって、その中にmove_1.jpg無いとだめですよ。UNIX系のサーバーだとパス名・ファイル名の大文字小文字も区別しますよ。

それから外部CSSに「stylesheet/thickbox.css」とあるけれど、他のライブラリーも一緒に使ってるんですか?

投稿日時 - 2010-12-21 11:20:29

お礼

ありがとうございます。
「move/move_1.jpg」のパスとファイル名とディレクトリーは何度も確認しましたが、合っています。

>それから外部CSSに「stylesheet/thickbox.css」とあるけれど、他のライブラリーも一緒に使ってるんですか?
このページではなく、別のページで使用しています。
無知すぎて申し訳ございません。

投稿日時 - 2010-12-21 11:49:48

ANo.1

とりあえず、
<script type='text/javascript' id='visualArea'>
のid='visualArea'ってタイプミスですか?
<div id="visualArea"> Loading...</div>
と重複してますけど....

投稿日時 - 2010-12-21 09:02:08

補足

ありがとうございます。
<script type='text/javascript' id='visualArea'>のid='visualArea'をはずしてしまうと、「Loading...」の文字も出なくなってしまうんです。

投稿日時 - 2010-12-21 10:42:13

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-