根據所選鏈接在頁面加載時顯示特定幻燈片

Question

我使用的JQuery滑塊在一張幻燈片中顯示4個相鄰的Wordpress帖子。帖子顯示用戶可以點擊查看所選服務的服務。有兩張幻燈片顯示這些服務 - 每張幻燈片中有4張幻燈片。每個服務頁面都包含頂部的滑塊，並在其下包含服務描述。

http://www.richmindonline.com/virtual/service-options/

的問題是，我想第二個滑先裝入 - 只有當用戶選擇一個產品二號幻燈片。

我該如何設置？這是加載滑塊的腳本 - 它在Wordpress中的插件中。

如果需要，我會上傳其他代碼。

//$upload_dir = wp_upload_dir(); 
$output = '<!--Automatic Image Slider w/ CSS & jQuery with some customization-->'; 
$output .='<script type="text/javascript"> 
$j = jQuery.noConflict(); 
$j(document).ready(function() {'; 

//Set Default State of each portfolio piece 
if ($pagination_style != '3'){ 
    $output .='$j("#rps .paging").show();'; 
} 
$output .='$j("#rps .paging a:first").addClass("active"); 

$j(".slide").css({"width" : '.$width.'}); 
$j("#rps .window").css({"width" : '.($width).'}); 
$j("#rps .window").css({"height" : '.$height.'}); 

$j("#rps .col").css({"width" : '.(($width/$post_per_slide)-2).'}); 
$j("#rps .col").css({"height" : '.($height-4).'}); 
$j("#rps .col p.post-title span").css({"color" : "'.($post_title_color).'"}); 
$j("#rps .post-date").css({"top" : '.($height-20).'}); 
$j("#rps .post-date").css({"width" : '.(($width/$post_per_slide)-12).'});'; 

if (!empty($post_title_bg_color_js)){ 
    $output .='$j("#rps .col p.post-title").css({"background-color" : "'.($post_title_bg_color_js).'"});'; 
} 

$output .='var imageWidth = $j("#rps .window").width(); 
//var imageSum = $j("#rps .slider div").size(); 
var imageReelWidth = imageWidth * '.$paging.'; 

//Adjust the image reel to its new size 
$j("#rps .slider").css({"width" : imageReelWidth}); 

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

    $j("#rps .paging a").removeClass("active"); 
    $active.addClass("active"); 

    //Slider Animation 
    $j("#rps .slider").stop(true,false).animate({ 
     left: -sliderPosition 
    }, 500); 
}; 
var play; 
//Rotation + Timing Event 
rotateSwitch = function(){  
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
     $active = $j("#rps .paging a.active").next(); 
     if ($active.length === 0) { //If paging reaches the end... 
      $active = $j("#rps .paging a:first"); //go back to first 
     } 
     rotate(); //Trigger the paging and slider function 
    }, '.$slider_speed.'); 
}; 

rotateSwitch(); //Run function on launch 

//On Hover 
$j("#rps .slider a").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation 
}); 

//On Click 
$j("#rps .paging a").click(function() { 
    $active = $j(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 
}); 
}); 

</script>'; 

Answer 1

添加這個jQuery到您的網頁將使移動滑塊使當前的產品是可見

jQuery(".slider").css("left", jQuery("a[href='" + document.location.pathname + "']").parents().find(".slide").index() * -955); 

確保您​​的總是有955px寬，否則你應該做的是955變量。

（這不是使用片段中的最美麗，最佔用資源少，但它會做的工作用最小的努力;-)