初期費用(1,050円)が無料になりました!

プチ・ホームページサービス

助け合い掲示板

困った時はみんなで解決!お気軽にご投稿ください

↑メインページに戻る

2
2016/07/26(火)  12:24 | カスタマイズ・デザイン | No.2017
はじめまして
ホームページを制作中のミナトと申します。

フリーレイアウトページにjQuery のbxsliderを設置しようと思っているのですが、
うまくできません。

こちらの掲示板での以前の質問
http://www.petit.cc/help/message/1565?category_id=&keyword=jquery
http://www.petit.cc/help/message/787?category_id=&keyword=jquery
を参考に、設置してみましたが、縦に写真が並ぶだけで、スライドになりません。

サーバーについては、dropboxではPublicフォルダを有効にできるのは、Dropbox Pro または Dropbox Business ユーザーに限られているようなので、使用できませんでした。
google driveやboxを試してみましたが、動作しません。

PC(Win8.1、Chrome・IE11)(Mac、OS X 10.9.5 Safari)で確認済みです。


フリーレイアウトページに記述したソースは以下の通りです。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/https://app.box.com/s/p8c9gtxwecr28d1pdze14taenmsrjvt7"></script>
<!-- bxSlider CSS file -->
<link href="/https://app.box.com/s/xcxt4hzi28ddc6x85r6tdpoul64c3c1a" rel="stylesheet" />

<ul class="bxslider">
<li><img src="../1img/1locker_img/img20160721180327.jpg"></li>
<li><img src="../1img/1locker_img/img20160721220227.jpg"></li>
<li><img src="../1img/1locker_img/img20160721220202.jpg"></li>
<li><img src="../1img/1locker_img/img20160721220527.jpg"></li>

</ul>


以上、現在お試し期間中ですが、よろしくお願い致します。
2016/07/26(火)  19:04
ミナトさん、こんにちは。

自分のプチで試してみたのですが、
このbox内のファイルのURLを記載する方法では、ファイルそのものを読み込むことはできていないようです。
※bxsliderの配布サイトで使用しているjs・cssを一時的に利用して実装したところ動作しました。

Dropbox内のファイルを読み込む方法、
こちらのURLの方法は試してみられましたか?
http://ameblo.jp/wazameba/entry-11855284870.html

私も試してみましたところ、
Dropbox内に作った「js」という名前のフォルダに保存した
jquery.min.js / jquery.bxSlider.min.js / jquery.bxslider.css
の3つのファイルへのリンクURLを使って、動作するのを確認しました。

jquery.min.js はgoogleのものを利用すればOKと配布サイトにもありましたが、
どうもそれを利用すると、前後のスライドに進む・戻るためのボタンがprev / next の文字になってしまうので、
配布サイトで使用している
http://bxslider.com/js/jquery.min.js
こちらの内容をテキストエディットなどにコピペして「jquery.min.js」という名前を付けてDropboxに保存しました。

また、配布サイトの「Step.3」が記述されていませんでした。
Jquery / js / CSS の読み込みの記述のすぐ下で良いです。
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
を記述してください。


これでひとまず動作すると思いますが、
前後のスライドに移動するための左右の矢印画像は「jquery.bxslider.css」内で指定されています。
ので、この矢印画像をプチの画像置き場に保存して、
その相対パスを「jquery.bxslider.css」に記述する必要があります(全部で4箇所)。

細かいところをいうと、
http://bxslider.com/lib/images/bx_loader.gif
のローディング画像も同じCSSファイル内で指定されていますので、
こちらも同じ方法で差し替えてあげるとカンペキになると思います!

一度Dropbox内のファイルを読み込む方法をお試しください!


動作ページです。
http://testest.petit.cc/grape5/
2016/07/27(水)  11:31
ミナト
デコポンさん、さっそくの御回答ありがとうございました。

ご教授頂きましたDropbox内のファイルを読み込む方法で動作しました。
左右の矢印画像については、オリジナルで作成したのものを使用したいと思っておりますので、また改めて試してみます。

↑メインページに戻る

1. 内容はみんなに分かるように、できるだけ詳しく書きましょう。
2. 質問する人も答えてあげる人も、相手を傷つけるような発言は控えてください。
3. 自分が言われて嫌なことは人にも言わないように。
4. ちょっとしたユーモアも忘れずに。
5. 寒いユーモアも暖かく見守ってあげましょう。
6. これらが守られていないコメントは削除することがあります。

助け合い掲示板への投稿は、プチをご利用のお客様のみ可能です。

投稿の際は、認証のためログインしてください。

※ご契約窓口に移動します

旧助け合い掲示板

旧助け合い掲示板の閲覧は、閲覧のみ可能です。
旧助け合い掲示板へ »