Post Slider - activate on last selected post - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

September 26, 2018 at 6:01 pm #1014900

I am currently using the Post slider on my blog post pages. In a way I am using it to act as a menu navigation between different posts. The only issue I currently have is the following:

From the post slider I select a post from the second page “slide-entry-wrap” of the 5 column layout i.e. I select post 6 from second “slide-entry-wrap”
Page is refreshed to show post 6
Top post slider page is reset to page 1 i.e. first “slide-entry-wrap”- first 5 posts

Is there a way to save the selection and save the last active “slide-entry-wrap”?

At the moment I thought of using something similar to the following solution, where I check the post slider links and if it matches the current post url, then activate post slider on that url.

jQuery(".avia-content-slider .slide-entry-wrap .slide-entry").each(function( index ) {
    var postLink = jQuery(this).find("a").attr("href");
	var thisURL = window.location.pathname; 

	if(postLink.indexOf(thisURL) != -1){
	    jQuery(".slide-entry-wrap").removeClass("active-slide").attr("style","visibility: hidden; z-index: 2; opacity: 0; transition: none 0s ease 0s; transform: translateZ(0px);");
		jQuery(this).parent(".slide-entry-wrap").attr("style","visibility: visible; opacity: 1; transition: none 0s ease 0s; transform: translateZ(0px); z-index: 3;");
	}
});

But the previous and next buttons do not work correctly. I am sure there must be an easier solution.

September 27, 2018 at 10:05 am #1015201

Dude

Participant

Hey DigiCosmicAngel,

To be honest this is beyond the scope of our support forum and I can’t give you a working solution. I’d recommend to add the “goto” slide controls to the post slider. You could use php or JQuery to add the controls to the slider.

The structure should be:


<div class="avia-slideshow-dots avia-slideshow-controls">
<a href="#1" class="goto-slide active">1</a>
<a href="#2" class="goto-slide ">2</a>
<a href="#3" class="goto-slide ">3</a></div>

Then you could add a check which compares the slide urls of all slides to window.location.pathname and triggers the right control on page load (i.e. link 3 if it’s the third slide).

Best regards,
Peter

September 27, 2018 at 9:46 pm #1015527

DigiCosmicAngel

Participant

Hey! thanks for your help, however I believe you are referring to the “Easy Slider”? as the HTML structure is different for the “Post Slider”.
I used the following in the functions.php

<?php

function updatePostEntry(){
?>
<script>
jQuery(document).ready(function(){
    jQuery(".avia-content-slider .slide-entry-wrap .slide-entry").each(function( index ) {
        var postLink = jQuery(this).find("a").attr("href");
    	var thisURL = window.location.pathname; 
    
    	if(postLink.indexOf(thisURL) != -1){
    	    $(".slide-entry-wrap").removeClass("active-slide").attr("style","visibility: hidden; z-index: 2; opacity: 0; transition: none 0s ease 0s; transform: translateZ(0px);");
    		$(this).parent(".slide-entry-wrap").attr("style","visibility: visible; opacity: 1; transition: none 0s ease 0s; transform: translateZ(0px); z-index: 3;");
    	}
    });
});
</script>
<?php
}
add_action('wp_footer', 'updatePostEntry');

?>

It worked, however the 2 slide-entry-wraps are overlapping each other (see screenshot) and it still does not solve the navigation issue.

September 29, 2018 at 11:08 pm #1016183

Dude

Participant

Hi,

The post slider uses the same slideshow script like the easyslider. If you want to “activate” the “go to” slide buttons without javascript open up enfold/config-templatebuilder/avia-shortcodes/postslider/postslider.php and replace


		protected function slide_navigation_arrows()
		{
			$html  = "";
			$html .= "
<div class='avia-slideshow-arrows avia-slideshow-controls'>";
			$html .= 	"<a href='#prev' class='prev-slide' ".av_icon_string('prev_big').">".__('Previous','avia_framework' )."</a>";
			$html .= 	"<a href='#next' class='next-slide' ".av_icon_string('next_big').">".__('Next','avia_framework' )."</a>";
			$html .= "</div>
";

			return $html;
		}

with


		protected function slide_navigation_arrows()
		{
          	$number_of_go_to = ceil($this->entries->found_posts / $this->atts['columns']);
          	$buttons = '';

          	for ($i = 1; $i <= $number_of_go_to; $i++) 
          	{
    			$buttons .= '<a href="#'.$i.'" class="goto-slide">'.$i.'</a>';
			}

          	$buttons = '
<div class="avia-slideshow-dots avia-slideshow-controls">'.$buttons.'</div>
';

			$html  = "";
			$html .= "
<div class='avia-slideshow-arrows avia-slideshow-controls'>";
			$html .= 	"<a href='#prev' class='prev-slide' ".av_icon_string('prev_big').">".__('Previous','avia_framework' )."</a>";
			$html .= 	"<a href='#next' class='next-slide' ".av_icon_string('next_big').">".__('Next','avia_framework' )."</a>";
          	$html .= 	$buttons;

			return $html;
		}

(you can also copy the modified postslider.php to your child theme folder to overwrite the parent theme postslider.php). Then modify your javascript function to trigger a click event based on the current url.

Best regards,
Peter

October 3, 2018 at 10:38 pm #1017624

DigiCosmicAngel

Participant

Hi,
Thank you for your help, I was able to get closer to the final solution. I have added the following to overwrite parent theme postslider.php in child theme folder:

function slide_navigation_arrows(){
          	$number_of_go_to = ceil($this->entries->found_posts / $this->atts['columns']);
          	$buttons = '';
			
			for ($i = 1; $i <= $number_of_go_to; $i++) 
            {
                $buttons .= '<a href="#'.$i.'" class="goto-slide">'.$i.'</a>';
            }
			
			$buttons = '<div class="avia-slideshow-dots avia-slideshow-controls">'.$buttons.'</div>';

			$html  = "";
			$html .= "<div class='avia-slideshow-arrows avia-slideshow-controls'>";
			$html .= 	"<a href='#prev' class='prev-slide' ".av_icon_string('prev_big').">".__('Previous','avia_framework' )."</a>";
			$html .= 	"<a href='#next' class='next-slide' ".av_icon_string('next_big').">".__('Next','avia_framework' )."</a>";
          
          	$html .= "</div>";
            $html .= 	$buttons;
            
          	
          	
            
			return $html;
		}

there were some missing closing div from your solution which I fixed. I then added the following to child theme functions.php

    function select_post_slide(){
    ?>        
<script>
    jQuery(window).load(function(){
        var columns = jQuery(".avia-content-slider").data("interval");
        jQuery(".avia-content-slider .slide-entry-wrap .slide-entry").each(function( index ) {
                var postLink = jQuery(this).find("a").attr("href");
            	var thisURL = window.location.pathname; 
            
            	if(postLink.indexOf(thisURL) != -1){
            	    var slide = (index / columns)+1;
        			$(".avia-slideshow-dots a[href='#"+slide.toFixed()+"']").click();
            	}
            });
    });
</script>
<?php
    }
    
    add_action('wp_footer', 'select_post_slide');
?>

This worked as expected, however there is a delay i.e. the post slider is shown and then the click happens after. Is there a way to do this click before the slider is shown to avoid the “flicker”?

Thanks for all your help!