Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #330727

    I have a web site built on the Corona theme for my law firm. I like the theme. I am rebuilding the site locally using the new Enfold theme to make it responsive. I am finding Enfold easier to work with. I have very limited knowledge of coding.

    I have included this CSS code to have the accordian operate like it does in Corona. I am not sure if this is correct but it seems to work the way I want it to work. I got this from another post on this forum.

    /* Re-position Magazine Text Position*/
    #top .aviaccordion-preview-title {vertical-align: bottom;}
    #top .aviaccordion-preview-title-wrap {height: 100px;}

    #top .aviaccordion-preview-title-pos { height: auto; }

    When a visitor lands on the home page, is there any code I could add to have the accordian slider run once and then come to a stop, rather than repeating?
    Thanks,

    Scott Lanin

    #331503

    Hi Scott!

    You can set “Autorotation active? Check if the slideshow should rotate by default” to “No”. In the accordion settings modal.

    This will cause the accordion not to rotate automatically when the page is loaded.

    Cheers!
    Arvish

    #331619

    Hi Arvish, Thanks for the response. Maybe I wasn’t clear. I want the accordian slider to rotate when the page is loaded – but to only rotate one time and then stop. Do you know the settings or CSS for that?

    Scott

    #332866

    Hey!

    Try adding this at the very end of your theme / child theme functions.php file:

    function add_custom_script(){
    ?>
    <script>
    (function($){
        $(window).load(function() {
        	setTimeout(function(){
    			$('.aviaccordion-inner').trigger('mouseleave');
        	}, 12000);
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Change 12000 by the amount of time (miliseconds) your slider takes to do a full rotation (i tested this with 3 slides + autorotation set to 3 seconds).

    Cheers!
    Josue

    #332904

    Thanks so much Josue for taking the time. I appreciate your effort. One of the things that always concerns me about editing the code in certain pages is that it may be lost or overwritten when the theme or wordpress is updated and I won’t remember what I did previously to change the page manually. I prefer not to do any hacking.

    I actually tried Arvish’s suggestion to turn off active autorotation and that may serve my purposes. It will keep the images all the same width when the page loads – that allows a user to see the text overlay for each image at once – I like that because each image corresponds to a practice area for my law firm and I want visitors to see all of them. However, using the accordian also will allow a visitor to select one image (one of our law practice areas), have the image expand with a hover, or have the image link to more info on a separate page, if they choose. This is probably the easiest solution because it will allow me to configure this from within the dashboard without code changes that may be overwritten later. I don’t have the same concern about adding CSS code to the theme options general styling because that shows the changes in one location that is easy to just copy and reuse if I were to do an update.

    For now, I am trying to develop the site using Enfold and am building it in Microsoft Webmatrix on my local drive so I don’t have anything to show you yet.

    Regards,
    Scott

    • This reply was modified 10 years, 1 month ago by scottlanin.
    #332910

    Great, let us know if there’s anything else we could help with :)

    Cheers!
    Josue

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.