javascript - Nivoスライダーサム

Question

サムネイルを作成しようとしているnivo-sliderとimを使用していますが、動作させることができません。

これが私が持っているものです：

ニノスライダーデモ

これがその方法のチュートリアルですが、私はそれを機能させることができません。

NiveSliderWebサイト

誰かが私が間違っていることを見ることができることを願っています

Answer 1

サムネイルがどこにあるかを見つけるのにも苦労しました。「絶対」に配置することで最終的にそれらを見つけ、最終的にスライドショーの途中に表示されました:)

しかし、私はそれらの表示方法があまり好きではないので、スクリプトを少し編集する必要がある簡単な修正を行いました。

jquery.nivo.slider.js で、これをファイルの先頭に追加します。

var thumbnails = $("#thumbnails"); // this is where your thumbnails will be

次に、これを見つけます：

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    slider.append(nivoControl);

そして、

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    thumbnails.append(nivoControl);

これを見つけます：

$('.nivo-controlNav a', slider).live('click', function(){

と置換する：

$('.nivo-controlNav a', thumbnails).live('click', function(){

次に、ページのどこかに配置すると、完了です:)

もちろん、多くの改善を行うことができますが、私が言ったように、それは簡単な修正です. Nivo スライダーの次のバージョンで、サムネイルを別の場所に配置するオプションがあればいいのですが。

これが役に立てば幸いです;）

Answer 2

テーマ「default.css」が img スタイルと競合することがわかりました (チュートリアルに記載されています)。次のクラスについては、default.css の css スタイルをコメントアウトする必要があります。

.theme-default .nivoSlider img
.theme-default .nivoSlider a
.theme-default .nivo-controlNav
.theme-default .nivo-controlNav a
.theme-default .nivo-controlNav a.active

そして、チュートリアルに記載されているように、次のスタイリングを追加する必要があります。

#slider .nivo-controlNav {
    position:absolute;
    bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
}

私もこれで問題がありました。誰かの役に立てば幸いです。

Answer 3

Nivoサイトには、サムネイルがどのように機能するかを示す新しいデモがあります：http: //nivo.dev7studios.com/demos/

関連する例には、次のCSSスタイルがあります。

#slider3 {
    margin-bottom:110px;
}
#slider3 .nivo-controlNav {
    position:absolute;
    left:185px;
    bottom:-70px;
}
#slider3 .nivo-controlNav a {
    display:inline;
}
#slider3 .nivo-controlNav img {
    display:inline;
    position:relative;
    margin-right:10px;
    -moz-box-shadow:0px 0px 5px #333;
    -webkit-box-shadow:0px 0px 5px #333;
    box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
    border:1px solid #000;
}

クラス内のaとimgタグの両方がどのように使用されているかに注意してください。これは、クラスを機能させるための鍵です。.nivo-controlNavdisplay: inline

その他のプロパティは、ナビゲーションバーの配置とドロップシャドウの追加用です。

Answer 4

画像のサムネイルを自分で正しく機能させるのは非常に困難でした。これは私のために働いた。私のブログエントリで完全な詳細。

このCSSスタイルを最後にロードするものとして追加します（他のコアNivo CSSシートの下のLINKに含めます）

.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}

#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}

#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our images in the slider */
}

また、Nivoを呼び出すときは、次のパラメータを設定することを忘れないでください。

$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});