php - Display a specific slide on page load based on the link selected


I'm using a JQuery slider that displays 4 adjacent Wordpress posts in one slide. The posts are displaying services that the user can click on to view the selected service. There are 2 slides that show these service - 4 in each slide. Each service page includes the slider at the top, with the service descriptions under it.

The problem is that I want the 2nd slide to load first - only when the user chooses a product on the 2nd slide.

How do I set this up? Here's the script for loading the slider - it's inside of a plugin in Wordpress.

I will upload additional code if needed.

   //$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 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").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
    var sliderPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $j("#rps .paging a").removeClass("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").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




Adding this jQuery to your page will make the slider move so the current product is visible

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

Make sure your.slide's always have a width of 955px, otherwise you should make that 955 variable.

(It's not the most beautiful and less resource using snippet, but it will do the job with minimum effort ;-)

People are also looking for solutions to the problem: php - Using indexes correctly in SQL query


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.