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東京ビックサイトとお台場の駐車場について・・・

 明日東京ビックサイトに行きその帰りにお台場に行く予定です。
駐車場ですが¥1500で一日置ける場所は知っていますが、
東京ビックサイトかお台場のいずれかに一日置きたいと思っています。
歩きで移動は難しそうですので、バス等何か良い方法がありましたら教えて下さい。

Aベストアンサー

ゆりかもめで移動できます。

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

Q東京ビックサイトへのアクセスが良好な駐車場を教えて

今週土曜日の早朝に、東名高速を利用して名古屋から東京ビックサイトへ向かいます。
ビックサイト周辺の混雑や駐車料金を考え、周辺で車を止めて電車で会場に向かおうと考えています。
ビックサイトへのアクセスが良い駐車場があれば教えてください。
よろしくお願いします。

Aベストアンサー

電車一本で行けるとなると、TWRりんかい線、ゆりかもめ、どちらかの駅周辺になります。

東名高速⇒首都高3号渋谷線⇒谷町JCTを右方向(首都高環状線C1方向、羽田・銀座方面)⇒首都高環状線C1⇒一ノ橋JCTを左車線直進(首都高環状線C1方向、銀座・羽田方面)⇒首都高環状線C1⇒浜崎橋JCTを右方向(首都高1号羽田線方向、羽田・湾岸線方面)⇒首都高1号羽田線⇒芝浦JCTを左方向(首都高11号B湾岸線方向、空港中央・湾岸線方面)⇒首都高11号台場線⇒レインボーブリッジ⇒台場出口左方向(台場出口1101)⇒右車線(アンダーパス方向、パレットタウン、東京ビックサイト方面)⇒アンダーパス⇒東京湾岸アンダー出口の交差点を右折⇒左車線(青海方向)⇒分岐後右車線⇒青海一丁目の交差点を右折⇒テレポート駅前信号交差点を右折⇒左側にコインパーキング有り

ここのコインパーキングから、徒歩数分で、TWR東京テレポート駅、ゆりかもめ青海駅があります。

Qjqueryのプラグイン

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

Aベストアンサー

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

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

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

Q山梨から東京ビックサイトまでの一番安い行き方

山梨県の甲府市から、東京ビックサイトまでの一番安い行き方を教えてください!!

Aベストアンサー

「安く」ってのを第一優先にするなら数日かけて徒歩でも自転車でも、あるいはヒッチハイクで0円。

ある程度時間も優先するなら以下のが2,390円で安い。
高速バス 甲府駅→新宿駅 1,900円
地下鉄新宿線 新宿3丁目→市ヶ谷
地下鉄有楽町線 市ヶ谷→新木場 290円
バス 新木場→東京ビッグサイト東棟前 200円

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東京ビックサイトの西館の地図

東京ビックサイトの西館の地図がわかりません。
ビックサイトの公式サイトに行っても細かく書いてなくて、
どんな感じの作りになってるとかわからないので、
地図を持ってる方やわかる方は教えてください。

Aベストアンサー

主催者向けの資料のページはいかがでしょうか。
PDFファイルには詳しい図面が載せられています。
http://www.bigsight.jp/organizer/guide/guide_west.html

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ランキング

おすすめ情報