0

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

このjqueryプラグインに付随するJavaScriptを理解するのに問題があります。私がやろうとしているのは、これをより多くのjsプラグイン、つまり私が持っているアコーディオンプラグインとマージすることです。最終的な目標は、基本的に、同じコントロール、異なる画像を使用して、Supersizedの2つのインスタンスを1つの画面で実行することです。私は知っています、想像するのは難しいですが、ここに例があります。

本体はスーパーサイズのフルスクリーン背景で、画像はimage1.jpgで、白黒です。次に、ボディの中央に幅960ピクセルの小さなdivがあり、必要なすべての画像がアコーディオンで表示されていますが、カラーです。したがって、アコーディオンを変更すると、背景も変更されます。したがって、アコーディオンボックスにimage1.jpgのカラーがある場合、ボディの背景はimage1.jpg白黒になります。

スーパーサイズのjsは、すべてのサムネイルではなく、前のサムネイルと次のサムネイルのみを定義しているように見えるため、問題が発生しています。したがって、理論的には、すべてのサムネイルを表示する方法を理解してから、これらのサムネイルの画像を変更して、スライドトランジションを制御しているが、実際には背景のサムネイルを制御していないようにする方法を理解する必要があります。このようにして、代わりにアコーディオンスライドをそれらのサムネイルに設定し、アコーディオンと背景の両方を制御させることができます。

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

4

1 に答える 1

1

私があなたの質問を正しく理解したかどうか見てみましょう、

divなどをクリックして背景画像（スーパーサイズで使用）を変更する方法を探している場合は、さまざまな方法があります。

次のコードはあなたを助けるかもしれません、それはそれの終わりの「-bw」でアクティブなスライド画像名を置き換えます。

例：クラス名が「click-me」のdivをクリックすると、背景画像が「image.jpg」から「image-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

それが役に立てば幸い。

于 2012-04-18T00:09:05.820 に答える