特大サイズのフルスクリーンスライダーAPI

Question

http://buildinternet.com/project/supersized/

私はトラブルこのjQueryプラグインと一緒に行くJavaScriptを考え出すを抱えています。私がしようとしているのは、これをより多くのjsプラグイン、つまり私が持っているアコーディオンのプラグインとマージすることです。最終的な目標は、Supersizedの2つのインスタンスを同じコントロール、異なるイメージで1つの画面で実行することです。私は知っている、想像するのは難しいが、ここに例がある。

本文はフルスクリーンの背景で、画像はimage1.jpgで白黒です。次に、体の中央に960ピクセル幅の小さなdivがあり、必要なすべての画像をアコーデオンで表示しますが、カラーで表示します。ですから、アコーデオンを変更すると、背景が変わります。だからアコーディオンボックスにimage1.jpgの色をつけていると、体の背景はimage1.jpg白黒です。

私は問題を抱えています。なぜなら、超大型のjは、すべてのサムネイルではなく、前と次のサムネイルを定義するように見えるからです。だから、理論的には、すべてのサムネイルを表示しないようにしてから、これらのサムネイルのイメージを変更してスライド遷移を制御する方法を見つけなければなりません。実際はバックグラウンドのサムネイルではありません。こうして、私はアコーデオンのスライドを代わりにサムネイルに設定できますが、アコーディオンとバックグラウンドの両方をコントロールできます。

私は今は非常に混乱していると確信しています。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう。

Answer 1

は、私はあなたの質問の権利、

を得た場合は、divのか何かをクリックして上の（超大型で使用される）背景画像を変更する方法を探しているなら、やるには多くの方法があります見てみましょうそれ。

次のコードは、アクティブなスライドイメージ名を末尾の '-bw'に置き換えてくれます。例えば

：クラス名を持つdiv要素をクリック「をクリックして、私を」「画像bw.jpg」

function changeBg() { 
    var $supersizedImg = $("#supersized .activeslide img"), 
     imgSrc = $supersizedImg.attr('src'); 
    imgSrcArray = imgSrc.split('/'); //split the image source by '/' 
    fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name 
    fileName = fullFileName.split('.'); //split that file name by '.' 
    fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end) 
    fileName = fileName.join('.'); //join the new file name with its extension with a '.' 
    imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray. 
    imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/' 
    $supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized 
} 

$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked 

はそれが役に立てば幸いに「image.jpg」から背景画像を変更します。