Categories
SugiBlog ホームページ制作・システム開発

jQueryプラグイン Slider Pro

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

JavaScriptライブラリをダウンロード
jQuery
Slider Pro

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

1,312 views

jQuery スライドショー slick.js

レスポンシブに対応した多機能プラグイン「slick.js」のご紹介です。

slick.js

http://kenwheeler.github.io/slick/

個人的には、思ったようにしようとすると少しコツがいるな、という感じでした。

まずはjQueryとslick.js本体を読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.5.7/slick/slick.min.js"></script>

次にCSSを読み込み

<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>

スライドさせたい画像等のコンテンツをbodyタグ内に記述します。

<ul class="your-class">
    <li>
        コンテンツ1
    </li>
    <li>
        コンテンツ2
    </li>
</ul>

続きを読む…»

9,186 views

現在のURLを取得 JavaScript

JavaScriptで、現在表示しているページのURLを取得します。

document.write(window.location.protocol + "//" + window.location.host + window.location.pathname + "<br>\n");
document.write(window.location.protocol + "//" + window.location.hostname + window.location.pathname + "<br>\n");
document.write(document.URL);

出力結果

http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
471 views

ルート検索 最適経路

営業の仕事をしていると、複数の場所を効率よく回りたい、という要求が出てくるかと思います。
GoogleMap APIを利用すれば出発地点、到着地点、8ヶ所の経由地を指定し、効率よく回るルートを検索することができます。
所謂巡回セールスマン問題を踏まえた結果を返してくれます。
その際はリクエストプロパティの「optimizeWaypoints」にtrueを設定しておきます。

しかし、経由地8ヶ所以上の検索はできません。
費用が発生してよいならば、23ヶ所まで検索できるようです。
では、費用をかけずに8ヶ所以上検索したい場合はどうしたらよいでしょうか?

どうにか自前でできないかと色々調べました。
巡回セールスマン問題、組み合わせ最適化、パス表現法、ナップサック問題、欲張り法、遺伝的アルゴリズム等々。

巡回セールスマン問題、組み合わせ最適化を踏まえた最適ルートの検索で、何通りのルートを計測すればいいかと言いますと、以下の通り

n!/2n

nを10とすると(10×9×8×7×6×5×4×3×2×1)÷(2×10)で181,440通りとなります。

更にnが増加すると莫大な計算量になってしまうので、日常のプログラムとして使用するには
現実的ではありませんし、スーパーコンピューターでも100億年かかるという計算量になってしまいます。

…無理です。。。

何か打開策はないかと、物理の仕事(仕事率)も応用してみようと試みましたが、力(N)に当たるものが
ないので、比較する値としては単純な速さとなってしまうので最適な結果は得られず断念。

最終的に、遺伝的アルゴリズムを見ていると、ルートをランダムに作成するしかないのか、
という結論に至り、研究は終了しました。

というわけで、PHPとJavaScriptを使いプログラムを作成しました。

続きを読む…»

4,907 views

ページのトップへスクロールする

現在のページのトップへスクロールする小技です。
jQueryを使って実装します。

JavaScriptライブラリをダウンロード
jQuery

まずheadタグ内でjQueryライブラリを読み込みます。

<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>

bodyタグにIDを付けます

<body id="top">

ID付のdivタグで括ってリンクを作成します。

<div id="to_pagetop">
    <a href="#top">上に戻る</a>
</div>

最後に任意の場所に以下のコードを記述します。 続きを読む…»

517 views