0

私は初心者の Web デザイナーで、Drupal を使用して最初の Web サイトを作成することができました。ページの1つに、ユーザーが画像をスクロールできるようにするボタン付きの複数のjqueryスライダーがあります。スライダーは正常に機能し、そのままにしておくと自動的にスクロールしますが、1 つのスライダーのボタンをクリックして画像をスクロールすると、ページ上の他のすべてのスライダーも画像をスクロールします。

各スライダー ボタンも正しい画像に移動します。たとえば、1 番目のスライダーの 2 番目のボタンをクリックすると、1 番目のスライダーの 2 番目の画像にスクロールしますが、1 つおきのスライダーも 2 番目の画像にスクロールします。

私のウェブサイトで問題を見ることができます: http://carlingeneralbuilders.co.uk/?q=gallery

スライダーは、無料の drupal テーマである bluemasters から取得されます。

これは、スライダーの jquery コードです。

jQuery(document).ready(function($) {    

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //1.Get size of images, 2.how many there are, 3.then determine the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    //var imageSum = $(".image_reel").map(function() {
    //return($(this).find("img").length)
    //}).get();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

        // Code for caption that pops up for each individual image
        //$(".desc").stop(true,true).slideUp('slow');

        //$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 

        //Slider Animation
        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 500 ); 


    }; 

    //Rotation + Timing Event
    rotateSwitch = function(){  
    $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");   
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 10000); //Timer speed in milliseconds (3 seconds)    

    };

    rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    

});

次に、次の html および php コードを使用して、drupal のブロックを介して各スライダーを実装します。

<div class="main_view">
<div class="window">
<div class="image_reel">
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/61.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/62.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/63.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/64.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/65.jpeg'; ?>"></a>
<img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/jobs/bathroom/66.jpeg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Bathroom</div>
</div>
</div>

<div class="paging">
<a rel="1" href="#">61</a>
<a rel="2" href="#">62</a>
<a rel="3" href="#">63</a>
<a rel="4" href="#">64</a>
<a rel="5" href="#">65</a>
<a rel="6" href="#">66</a>
</div>
</div>

問題は、jquery ファイルがすべてのスライダーに対して 1 回だけ呼び出されるという事実に関係していると思います。その結果、すべての画像が何らかの方法でグループ化されますが、私は本当の初心者であり、HTML コーディングの知識があります。 jquery と drupal は現在非常に制限されています。

前もって感謝します

4

2 に答える 2

0

Web 開発のエキサイティングな世界へようこそ!

あなたが言及していないと思われる密接に関連した問題があります: 画像の数は各スライダーで異なるため、右にスクロールすると一部の画像はまったく表示されません。

おそらくこれを回避する方法はたくさんあります。ここにそれらの1つがあります：

<div class="main_view">それぞれ個別に実行するように書き換えることができます。各スライダーがこれらの要素のいずれかに囲まれていると想定しています。jQuery オブジェクトのメソッドを使用して main_views を反復処理できます (それ自体の statisメソッドeachと混同しないでください)。次に、ループの各反復で、 を使用してドキュメント全体の jQuery 検索を行う代わりに、メソッドを使用してスライダーのコンテキストで検索します。次のサンプル コードはテストされていません。each$$(selector)findcurrentSlider.find(selector)

jQuery(document).ready(function($) {    

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");

    // iterate through the sliders
    $(".main_view").each(function() {
        //0.this is a raw HTML DOM element; convert it to a jQuery object.
        var currentSlider = $(this);
        //1.Get size of images, 2.how many there are, 3.then determine the size of the image reel.
        var imageWidth = currentSlider.find(".window").width();
        var imageSum = currentSlider.find(".image_reel img").size();
        var imageReelWidth = imageWidth * imageSum;

        //Adjust the image reel to its new size
        currentSlider.find(".image_reel").css({'width' : imageReelWidth});

        //Paging + Slider Function
        rotate = function(){    
            var triggerID = $active.attr("rel") - 1; //Get number of times to slide
            var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

            currentSlider.find(".paging a").removeClass('active'); //Remove all active class
            $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
            // etc
        };

        rotateSwitch = function(){
            // etc
        };

        rotateSwitch();

        currentSlider.find(".paging a").click(function() {
            // etc
        });
    });
});
于 2013-06-23T16:49:12.470 に答える
0

この理由は、回転中にクラスで要素を選択しているためです。すべての画像スライダーを返し、このコード セグメントでそれらすべてをアニメーション化します。

//return all elements with class image_reel and performs animate for all of them
$(".image_reel").animate({ 
   left: -image_reelPosition
}, 500 );

特定の要素で動作するように関数をリファクタリングする必要があります。正しい画像スライダーを見つけるには、次のコードを使用する必要があります。

$(".paging a").click(function() {    
    //this is the correct image slider.
    $selectedImageSlider = $(this).parent().siblings(".window").find('.image_reel');

    //your codes

});

回転関数を呼び出すときに、この画像スライダーを引数として回転関数に渡し、スライダーで必要な操作を行うことができます。

ps: このリンクをチェックして、基本的にクラスと id 属性の考え方を理解できます。

于 2013-06-23T16:00:20.313 に答える