ID:LA/fHY さんの質問

【 jQuery "bxslider"内へのissuu埋め込み】
WEBデザインを初めて一年足らずの初心者です。
この場をお借りして質問、ご教授お願いいたします。
jQueryプラグイン "bxslider" でコンテンツをスライドさせ、
そのコンテンツ内にオンライン文書共有サービス "issuu"で
アップロードしたコンテンツを埋め込みしました。
下記の環境で動作確認をしたところ
Mac(ver.10.8)でSafari (ver.6.0.5)のみ
埋め込みされたissuuコンテンツは表示されるものの
クリックすることが出来ませんでした。
【動作確認例】
Win7でGoogle Chrome→○
Win7でIE10→○
Mac(ver.10.8)でGoogle Chrome→○
Mac(ver.10.8)でSafari (ver.6.0.5)→×
下記、実際に使用しているhtml, cssになります。
【HTML】
<section id="content_wrap">
<div id="content">
<div class="bxslider">
<div id="content_A" class="slide">
<div id="issuu_A" class="issuuembed" data-configid="0123456/6543210" ></div>
<script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
</div>
<div id="content_B" class="slide">
<div id="issuu_B" class="issuuembed" data-configid="0123456/6543210" ></div>
<script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
</div>
</div>
</div>
</section>
----------------------------------------------------------------
【CSS】
#content_wrap{
width:100%;height:800px;
margin:0 auto;
background:#ffffff;
}
#content{
width:1200px;height:800px;
margin:0 auto;
background-color:transparent;
}
.bxslider #content_A,.bxslider #content_B{
width:1200px;height:500px;
background-color:transparent;
z-index:8000;
}
.bxslider #issuu_A,
.bxslider #issuu_B{
float:left;
width:525px;
height:525px;
margin:0 0 0 70px;
z-index:9999;
}
上記に加え、ダウンロードしたプラグインに元々入っている、jquery.bxslider.cssを<head>内で読み込み。
----------------------------------------------------------------
【javasript】
javaはヘッド内ではなく、
</body>タグの直前、
コンテンツの一番最後で読み込んでいます。
<script type="text/javascript" src="./js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function() {
$(’.bxslider’).bxSlider({
auto:false,
speed:500,
mode:’horizontal’,
slideMargin:0,
easing:’ease-out’,
captions:false,
responsive:false,
slideWidth:1200
});
$(".bx-wrapper .bx-loading").css("background","url(’./img/bx_loader.gif’) center center no-repeat #fff");
$(".bx-wrapper .bx-prev").css("background","url(’./img/control-prev.png’) no-repeat 0 0");
$(".bx-wrapper .bx-next").css("background","url(’./img/control-next.png’) no-repeat 0 0");});
// ]]>
</script>
----------------------------------------------------------------
以上、
ヨコ幅100%のラップ内に
ヨコ幅1200タテ幅800のdivを設け、
さらにその中に
ヨコ幅1200タテ幅500のbxsliderを設置しています。
issuuをクリック出来ない、Safari (ver.6.0.5)でも
bxslider内ではなく、そのまま埋め込めばクリックすることが出来たため、
原因はbxsliderあるのでは無いかと思い、
<head>内で読み込んでいるjquery.bxslider.cssなどを
いろいろいじってみたのですが、どうしても解決出来ませんでした。
なにより、まだまだ勉強の足りない、自分の力不足がいけないのですが、
どなたか解決法などご存知の方いらっしゃいましたら
ご教授いただけたらと思います。
どうぞ宜しくお願いいたします。

みんなの回答 1 件

ID:.BfU.5 さんの回答

ID:LA/fHY

ご回答ありがとうございました。

＞•javaとjavascriptは言語がまったく異なるので、javascriptだったら
＞javascriptと言った方が良いと思う。

ありがとうございます。
このような基本的なことも
まだ理解しきれていないので
お恥ずかしい限りです。
この2点の違いも含め基本的なところ
一度しっかりと勉強し直そうと思います。

＞•$(function(){ });←この閉じタグがなさそうなので、

こちらですが、下から3行目の

$(".bx-wrapper .bx-next").css("background","url(’./img/control-next.png’) no-repeat 0 0");});

↑のところで閉じているので、
問題は無かったようです。
いちおうご指摘いただいたように
さらに});を追加ところエラーが出てしまいました。

最終更新日:2013-09-19 (4,557 views)