Question

我是一名新手网页设计师，刚刚设法使用Drupal创建了我的第一个网站。在其中一个页面上，我有多个带有按钮的jquery滑块，允许用户滚动图像。如果单独使用，滑块可以正常工作并自动滚动，但是单击一个滑块上的按钮滚动图像也会使页面上的所有其他滑块也滚动浏览它们的图像。

每个滑块按钮也会导航到正确的图像，例如点击第一个滑块上的第二个按钮将滚动到第一个滑块上的第二个图像，但它也会将每个其他滑块滚动到第二个图像。

您可以在我的网站上看到问题： 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文件只为所有滑块调用一次这样的事实，因此所有图像都以某种方式组合在一起，但是我是一个真正的新手和我的知识html编码，jquery和drupal目前非常有限。

提前致谢

Answer 1

原因是，在旋转时，您正在使用类选择元素。它返回所有图像滑块，并在此代码段中为所有图像滑块设置动画：

//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：你可以检查这个link以基本理解class和id属性的想法。

Answer 2

欢迎来到令人兴奋的网络开发世界！

我看到了一个我认为你没有提到的密切相关的问题：每个滑块的图像数量不同，所以如果你向右滚动，那么其中一些根本没有显示任何内容。

这可能有很多方法。这是其中之一：

您可以重写它，使其分别在每个<div class="main_view">中运行。我假设每个滑块都包含在其中一个元素中。您可以使用jQuery对象的each方法迭代main_views（不要与each本身的statis $方法混淆）。然后，在循环的每次迭代中，不使用$(selector)对整个文档进行jQuery搜索，而是使用find方法在滑块的上下文中搜索，即currentSlider.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
        });
    });
});

多个jquery滑块

2 个答案: