javascriptのプラグインBOOK BLOCK について質問です。
http://tympanus.net/codrops/2012/12/11/fullscree …

現在作っているページにこのプラグインを実装しています。
一通りデモ通りの動きができるようになり、自分のページに合ったように調整しているのですが、メニューの所で困っています。

デモはページ数が少ないので、メニューに各ページへのページ内リンクがなされていますが、私の場合ページ数が多いので、主要ページへのリンクをこのメニューにしたいと考えています。

そこで、飛ばしたいページ、例えば30ページに飛ばしたいときは30ページのコンテンツにid="item30"を振り、メニューに<a href="#item30">30ページの本文</a>のようにHTMLを書き直しました。

ところがこのリンクをクリックしても、最初にデモであった順番のページ番号にしかリンクしてくれません。

いったいなぜなのかしばらく考えていますがわからないので質問させていただきました。
詳しい方いらっしゃいましたらご回答お願いいたします。

A 回答 (1件)

BOOKBLOCKって知りませんけれど、配布サイトを見てみると



public methodで、ページ指定ができそうなことが書いてあります。(英語よくわかりませんが)
これを利用すればいいんでないかな。

http://tympanus.net/codrops/2012/09/03/bookblock …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。お礼が遅れてしまってすみません。
なかなかうまく動きませんが、頑張ってみたいとおもいます!

お礼日時:2013/11/09 14:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q東京ビックサイトから南行徳に帰るには?

今度、東京ビックサイトに行きます。
東京ビックサイトから、東京メトロの南行徳駅まで帰る
おすすめの方法を教えてください。

東京ビックサイトの近くの駅も教えてください。

Aベストアンサー

すべて電車で帰るなら
国際展示場正門
↓ ゆりかもめ
豊洲
↓ 東京メトロ有楽町線
月島
↓ 都営大江戸線
門前仲町
↓ 東京メトロ東西線
南行徳
ですが、
時間さえ合えば
http://tobus.jp/cgi-bin/pctimetable.cgi?act=timel&bsn=13992324&lcd=TE810115&hcd=1
東京ビッグサイト
↓ 都営バス海01系統
門前仲町
↓ 東京メトロ東西線
南行徳
のほうがかなり楽な上安いです。

QJavaScriptプラグインが読み込めません

「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。
MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に

<script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script>
<script type="text/javascript" src="easyslider1.7/js/jquery.js"></script>

と記述し、
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto:true
});
});
</script>
で動作させようとしているのですが、
ブラウザで試すと動かず、コンソールには

ReferenceError: Can't find variable: jQuery
TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function.


と出てきます。
上段の”jQuery”はeasySlider1.7.js内に記述されているものです。

ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。


何が原因なのでしょうか。ご回答宜しくお願いします。

「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。
MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に

<script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script>
<script type="text/javascript" src="easyslider1.7/js/jquery.js"></script>

と記述し、
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto:true
});
});...続きを読む

Aベストアンサー

asyslider.jsを読み込む前に、jquery.jsを読み込んでいますか?

ご質問文の表記の通りだと逆順ですが…

Q仙台でイベントのチラシをおいてくれる店

 5月下旬に仙台に行きます。
 そのときにイベントのチラシをおいてくれるお店を回って、お願いしたいと思っています。
 アニメショップ、漫画専門店、模型店など、チラシを置かせてくれる店をご存知の方、教えてください。

Aベストアンサー

 こちら、参考URL先に掲載されているお店の方に問い合わせて見られてはいかがでしょうか。
 正直なところ、足を運んだ事の無い店ばかり(特にメイド喫茶など…)なので、どの程度の期待が持てるかは私にも分からないのですが^^;;。

参考URL:http://www.kahoku.co.jp/weekly/trend/051103_2.html

QFlashプラグイン判定

環境 Windows, FireFox, IE6+
対応するFlashのプラグインが入っている場合Flashを表示し、
Flashのバージョンが5以下またはプラグインが入ってない場合は画像を表示させるスクリプトを入れたいと思ってます。
対象環境はWindowsのFireFox, Ie6以上です。
参考になるスクリプトありましたら教えていただきたいのですが。
よろしくおねがいします!

Aベストアンサー

英語で書かれてますし、私自身あまりソースは見ていませんが
http://www.adobe.com/products/flashplayer/download/detection_kit/

detectionkit.zipの中にある
Client-Side Detection
とかは参考に出来ませんか?

何かこういう解説記事もあるみたいだし。アドバイスまで
http://www.adobe.com/jp/devnet/flashplayer/articles/detectionkit.html

Q9/22-23の東京イベント教えてください!

9/22-24に地方から東京に遊びに行く予定です。
(24日に東京ゲームショー)
以前東京にちょっとだけ住んでいたので、観光ではなく、
9/22~9/23(もしくは前後)で特別なイベント等を見て
まわりたいと思います。

候補としては

・地方では見られないお芝居/ミュージカル/映画等
・マンガやアニメのオンリーイベント
・博物館や美術館のイベント
・催事イベント
・その他イベント(お祭り等)

この日はこんなものがあります OR 上記が解るような、
サイトなどを教えていただけると助かります。

Aベストアンサー

こんばんは

参考までにですが
http://www.rurubu.com/event/list.asp

http://www.minipara.com/kanto-mini/theater/index.shtml

9月がまだ出ていないので
http://www.nact.jp/

http://www.syabi.com/schedule/schedule.shtml

http://www.nmwa.go.jp/jp/exhibitions/upcoming.html

http://www.mot-art-museum.jp/exhibition/98/

http://www.teien-art-museum.ne.jp/exhibition/stitchi/index.html

http://www.tobikan.jp/museum/torino_egypt.html

http://www.ueno-mori.org/special/2009_tibet/index.html

http://www.setagayaartmuseum.or.jp/exhibition/sp_detail.php?id=sp00149

http://www.setagayaartmuseum.or.jp/exhibition/pc_detail.php?id=col00020

http://www.idemitsu.co.jp/museum/honkan/exhibition/schedule/200904.html

http://www.bunkamura.co.jp/museum/lineup/index.html

http://www.suntory.co.jp/sma/exhibition/future.html

http://www.bridgestone-museum.gr.jp/

http://www.tnm.go.jp/jp/servlet/Con?pageId=A01&processId=02&event_id=4467

http://www.edo-tokyo-museum.or.jp/kikaku/page/2009/0919/0919.html

こんばんは

参考までにですが
http://www.rurubu.com/event/list.asp

http://www.minipara.com/kanto-mini/theater/index.shtml

9月がまだ出ていないので
http://www.nact.jp/

http://www.syabi.com/schedule/schedule.shtml

http://www.nmwa.go.jp/jp/exhibitions/upcoming.html

http://www.mot-art-museum.jp/exhibition/98/

http://www.teien-art-museum.ne.jp/exhibition/stitchi/index.html

http://www.tobikan.jp/museum/torino_egypt.html

http://www.ueno-mori.org/special...続きを読む

Qjqueryのプラグイン

jqueryでなくてもいいのですが・・・
セレクトボックスをカストマイズして、上下に展開するようなプラグインご存知ないですか?
もしくはそんな感じの動きをするサイトでも結構です。

Aベストアンサー

セレクトボックスが上下に展開がよくわからないので「そんな感じ」か疑問ですが、
「なめらかアコーディオンパネル」と言うものです。

これは「jQueryデザイン入門」という書籍に載っていたもので、たぶんこれを理解すれば、お望みのものを自作することも可能だと思います。
「go.ascii.jp/?jq03」

参考URL:http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/03/sample2.html

Q6月、7月の降水日

6月1日から6月30日までと、7月1日から7月31日までの月の平均の降水日を教えてくれませんか?

ようは、6月の平均の雨が降る日と7月の平均雨が降る日を教えてください、ということです。

よろしくお願いします。

Aベストアンサー

 どこにお住まいですか?
6月半ばからのひと月は、北海道や沖縄を除き全国的に梅雨です。
その梅雨でも地方によって雨の降り方は違うと思いますよ。

QFireFox プラグイン作成のマニュアル

firefoxのプラグインを作成したいと考えていますが、マニュアル的なものや、参考になるサイトは無いでしょうか。

「検索プラグインの作成法」以外でお願いします。

Aベストアンサー

プラグインなのか拡張なのか、プラグインであればどのフォーマットに対するプラグインなのか、拡張であれば何を目的とした拡張なのかを書くと的確な回答をもらえる可能性が高くなると思います。
http://ja.wikipedia.org/wiki/%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD_(Mozilla)#.E7.AA.93.E3.81.AE.E6.9D.9C.E3.80.8C.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.80.8D.E5.95.8F.E9.A1.8C

Qイベントevt?evt.target:event.srcElement;の意味合い

以下の理解で合っているのでしょうか?
よくイベントの取得で

エレメント.onclick = function(evt){
var e = evt?evt.target:event.srcElement;
}
でeにイベントオブジェクトの発生元要素をセットしているのを見かけますが、
これは、ブラウザーの違いの吸収なのでしょうか?

firefoxでは、イベントハンドラー関数にイベントオブジェクトが渡されるので、渡されたイベントオブジェクトよりevt.targetで発生元要素をセットし、一方IEでは、eventという名前のオブジェクトが存在している(?)ので、イベントハンドラー関数にイベントオブジェクトが渡されず、event.srcElementで発生元要素をセットする。
 ※Opera、Safariは何でも良い

IEの場合、後から、イベントが追加されたらeventオブジェクトはどうなるのでしょうか?ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?

Aベストアンサー

> ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?
attachEvent() を使えば、複数のイベントハンドラを定義できそうです。(未検証)
また、attachEvent() の第一引数からイベントオブジェクトを取得できる、とbabu_babooさんに教わりました。
http://okwave.jp/qa5081024.html?ans_count_asc=1

ただ、attachEvent は実行順が不定という欠点があるので、現実的には「出来ない」という結論になると思います…。

addEventListenerとattachEventでは実行される順番が違う at HouseTect, JavaScripter Blog
http://hisasann.com/housetect/2008/09/addeventlistenerattachevent.html
IEのイベント実行順序は不定? - inamenaiの日記
http://d.hatena.ne.jp/inamenai/20080915/p1

IEが addEventListener() に対応してくれればいいのですが…。

> ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?
attachEvent() を使えば、複数のイベントハンドラを定義できそうです。(未検証)
また、attachEvent() の第一引数からイベントオブジェクトを取得できる、とbabu_babooさんに教わりました。
http://okwave.jp/qa5081024.html?ans_count_asc=1

ただ、attachEvent は実行順が不定という欠点があるので、現実的には「出来ない」という結論になると思います…。

addEventListenerとattachEventでは実行される順番...続きを読む

QjQueryプラグインの併用について

jQueryプラグインの併用について

失礼します、WEB制作初心者です。
現在jQueryのプラグインであるcolorboxを使用し、
以下のように外部ファイル(PHP)を読み込んでいます。

$(document).ready(function(){
 $("#inline").colorbox({
  contentWidth:"500px",
  contentInline:"#inline-content"
 });
});

この際、読み込んだPHP内で同じくjQueryプラグインである
FlexPlayerをお借りして、音楽を再生しようとしたのですが・・・

個別では動作するものの、併用すると外部ファイルが読み込まれた後、
プレイヤーの表示がされるだけで、再生ボタンを押しても反応がない状態です。

情けない話ですがリファレンス等を見ても自力では解決できず
悩んでいたので、こちらでお伺いすることにした次第です。

これらのプラグインは同時に使うことはできないのでしょうか、初心者丸出しの
質問で申し訳ないですが、参考になるページだけでも教えてもらえたら幸いです。

jQueryプラグインの併用について

失礼します、WEB制作初心者です。
現在jQueryのプラグインであるcolorboxを使用し、
以下のように外部ファイル(PHP)を読み込んでいます。

$(document).ready(function(){
 $("#inline").colorbox({
  contentWidth:"500px",
  contentInline:"#inline-content"
 });
});

この際、読み込んだPHP内で同じくjQueryプラグインである
FlexPlayerをお借りして、音楽を再生しようとしたのですが・・・

個別では動作するものの、併用すると外部ファイルが読み込まれた後、
プ...続きを読む

Aベストアンサー

(続き)というわけで、オリジナルサイトのサンプルをまねっこして、
Colorboxで動くFlexPlayerのサンプルを作ったら、実現できました。
 参考URL
やったあと思ったら、FireFoxでうまくいっただけで、IEさんは
駄目でした。なんかやっぱりColorboxとFlexPlayerでコンフリクト
している部分があるようで、Colorbox終了時に苦肉の策で、
$(document).bind('cbox_cleanup', function(){
location.reload();
});
として、エラーを手抜き対応したが、IEだとColorboxのオープンさえできん。
それとも他に問題があるのやら....。

IEはデバッグしにくいのでもう作るの止めます。

そんなわけで、役に立たないかもしれませんが、せっかくだから作った
ソースコードを載せときます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>FlexPlayer Test By ColorBox</title>
<style type="text/css"></style>
<link type="text/css" media="screen" rel="stylesheet" href="/jslib/colorbox/example1/colorbox.css">
<link type="text/css" media="screen" rel="stylesheet" href="/jslib/flexplayer/mediaplayer.css">
<script type='text/javascript' src='/jslib/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='/jslib/colorbox/colorbox/jquery.colorbox-min.js'></script>
<script type='text/javascript' src='/jslib/flexplayer/jquery.flexplayer.min.js'></script>
<script type="text/javascript" charset="utf-8">
<!--
var myplayer;
var contents_path;
$(document).ready(function(){
$(".medialist").colorbox({
width:"600px",
inline:true,
href:"#mediaPlayer_box",
onLoad:function(){
contents_path=this;
mediaPlayer = new $("#mediaPlayer").flexplayer({
swfPath:"/jslib/flexplayer/flexplayer.swf",
bgcolor: "#ffffff",
swfReady:function(){
$(".player_play").click();
},
onProgress:function(bytesLoaded, bytesTotal, playedTime, totalTime){
if ($("#mediaPlayer").data("seekFlag")) return;
$("#mediaPlayer_box .info").text(millisec2str(playedTime)+" / "+millisec2str(totalTime));
var obj = $("#mediaPlayer_box .player_status");
$("#mediaPlayer_box .seekbar").css("width", 250*(playedTime/totalTime)+"px");
var w = 250*(bytesLoaded/bytesTotal);
if (w<=250) $("#mediaPlayer_box .progressbar").css("width", w+"px");
else $("#mediaPlayer_box .progressbar").css("width", "250px");
}
});
}
});
$(document).bind('cbox_cleanup', function(){
location.reload();
});
});
function millisec2str(millisec){
var min = Math.floor((millisec/1000)/60);
var sec = Math.floor((millisec/1000)-(min*60));
if (min<=0) min = "00";
else if (min<10) min = "0"+min;
if (sec<=0) sec = "00";
else if (sec<10) sec = "0"+sec;
return min+":"+sec;
}
function playStart(playObj,playBtnObj,pauseBtnObj,changeFlag){
if (playObj.playedTime() > 0 && !changeFlag){
playObj.resume();
playBtnObj.hide();
pauseBtnObj.show();
}else{
playObj.play({type:"mp3",path:contents_path});
//playObj.play({type:"flv",path:"/image/cat.flv"});
playBtnObj.hide();
pauseBtnObj.show();
}
}
function playPause(playObj,playBtnObj,pauseBtnObj){
playObj.pause();
pauseBtnObj.hide();
playBtnObj.show();
}
function playStop(playObj,playBtnObj,pauseBtnObj,seekValObj,seekInfoObj){
playObj.stop();
seekValObj.css("width", "0px");
seekInfoObj.text("00:00 / "+millisec2str(playObj.totalTime()));
pauseBtnObj.hide();
playBtnObj.show();
}
function volumeMute(playObj, vlmObj, vlmMuteObj){
if (vlmObj.hasClass("mute")) {
vlmObj.removeClass("mute");
playObj.volume(playObj.data("volumeTmp"));
vlmMuteObj.hide();
vlmObj.show();
}
else {
vlmObj.addClass("mute");
playObj.data("volumeTmp", playObj.volume());
playObj.volume(0);
vlmObj.hide();
vlmMuteObj.show();
}
}
function seekOvserve(event, playObj, valObj, infoObj){
var diff = (event.clientX - valObj.offset().left);
if (0<=diff && diff<=250) valObj.css("width", diff);
var restartFlag = false;
if (playObj.status()=="playing") {
playObj.pause();
restartFlag = true;
}
playObj.data("seekFlag", true);
$(document).mousemove(function(e){
diff = (e.clientX - valObj.offset().left);
if (0>diff) diff = 0;
else if (diff>250) diff = 250;
valObj.css("width", diff);
var tt = playObj.totalTime();
infoObj.text(millisec2str(tt*(diff/250))+" / "+millisec2str(tt));
});
$(document).mouseup(function(e){
diff = (e.clientX - valObj.offset().left);
if (0>diff) diff = 0;
else if (diff>250) diff = 250;
valObj.css("width", diff);
if (diff>=250) playObj.seek(playObj.totalTime());
else if (0>=diff) playObj.seek(0);
else playObj.seek(playObj.totalTime()*(diff/250));
if (restartFlag) playObj.resume();
$(document).unbind('mousemove');
$(document).unbind('mouseup');
playObj.data("seekFlag", false);
});
}
function voluemeSeekOvserve(event, playObj, valObj, vlmObj){
if (vlmObj.hasClass("mute")) return;
var diff = (event.clientX - valObj.offset().left);
if (0<=diff && diff<=40) valObj.css("width", diff);
$(document).mousemove(function(e){
diff = (e.clientX - valObj.offset().left);
if (0<=diff && diff<=40) valObj.css("width", diff);
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
$(document).unbind('mouseup');
var val = (((valObj.css("width")).slice(0,-2)-0)/40)*100;
playObj.volume(val);
playObj.data("volumeVal", val);
});
}
// -->
</script>
<body>
<h3>FlexPlayer Test By ColorBox</h3>
<ul>
<li><a class='medialist' href="/image/demo1_1.mp3">デモ1(直接読み込み)</a></li>
<li><a class='medialist' href="/php/songselect.php">デモ2(PHP経由・しばし時間がかかる)</a></li>
</ul>
<div style='display:none'>
<div id="mediaPlayer_box">
<div id="mediaPlayer"></div>
<div id="mediaPlayer_control">
<a href="javascript:void(0);" class="player_play" onclick="playStart(mediaPlayer,$('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'), false);this.blur();return false;"></a>
<a href="javascript:void(0);" class="player_pause" onclick="playPause(mediaPlayer,$('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'));this.blur();return false;" style="display:none"></a>
<a href="javascript:void(0);" class="player_stop" onclick="playStop(mediaPlayer, $('#mediaPlayer_box a.player_play'), $('#mediaPlayer_box a.player_pause'), $('#mediaPlayer_box .seekbar'), $('#mediaPlayer_box .info'));this.blur();return false;"></a>
<div class="player_status">
<div class="info">00:00 / 00:00</div>
<div class="seekbarOvserver" onmousedown="seekOvserve(event, mediaPlayer, $('#mediaPlayer_box .seekbar'), $('#mediaPlayer_box .info'));"></div>
<div class="seekbar"></div>
<div class="progressbar"></div>
</div>
<a href="javascript:void(0);" class="player_volume" onclick="volumeMute(mediaPlayer, $('#mediaPlayer_box a.player_volume'), $('#mediaPlayer_box a.player_volume_mute'));this.blur();return false;"></a>
<a href="javascript:void(0);" class="player_volume_mute" onclick="volumeMute(mediaPlayer, $('#mediaPlayer_box a.player_volume'), $('#mediaPlayer_box a.player_volume_mute'));this.blur();return false;" style="display:none"></a>
<div class="player_volumeSeek">
<div class="volumeSeekOvserver" onmousedown="voluemeSeekOvserve(event, mediaPlayer, $('#mediaPlayer_box .volume:first'), $('#mediaPlayer_box a.player_volume'));"></div>
<div class="volumeSeekfilm"></div>
<div class="volume"></div>
<div class="volumeSeekbg"></div>
</div>
</div>
</div>
</div>
</body>
</html>

PHP(songselect.php)はこれ
<?php
header('Content-Type: audio/mpeg');
readfile('../image/demo1_1.mp3');
?>

(続き)というわけで、オリジナルサイトのサンプルをまねっこして、
Colorboxで動くFlexPlayerのサンプルを作ったら、実現できました。
 参考URL
やったあと思ったら、FireFoxでうまくいっただけで、IEさんは
駄目でした。なんかやっぱりColorboxとFlexPlayerでコンフリクト
している部分があるようで、Colorbox終了時に苦肉の策で、
$(document).bind('cbox_cleanup', function(){
location.reload();
});
として、エラーを手抜き対応したが、IEだとColorboxのオープンさえできん。
それとも他に...続きを読む


人気Q&Aランキング

おすすめ情報