1つのスライドに4つの隣接するWordpress投稿を表示するJQueryスライダーを使用しています。投稿には、ユーザーがクリックして選択したサービスを表示できるサービスが表示されています。これらのサービスを示す2つのスライドがあります-各スライドに4つ。各サービスページの上部にはスライダーがあり、その下にサービスの説明があります。
http://www.richmindonline.com/virtual/service-options/
問題は、ユーザーが2番目のスライドで製品を選択した場合にのみ、2番目のスライドを最初にロードすることです。
これを設定するにはどうすればよいですか？スライダーをロードするためのスクリプトは次のとおりです。これは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>';