Adding slider feature to Elegant Themes-Coldstone

  • ashleykmbooks

    (@ashleykmbooks)


    11 years, 7 months ago

    Hi, I’ve installed an Elegant Themes, theme called Coldstone to http://coolseasongardening.com/. The theme as created has a featured section on the homepage with five stories, BUT they do not shuffle through, they simply sit stagnant on item #1. I asked Elegant Themes for help adding the correct code to make them shuffle as seen on this example of a Coldstone Theme, http://www.highinfatuation.com/ but their support staff says they can’t help as that is a modification to the theme I downloaded.

    So I pulled this code from highinfatuation.com,

    // Modifies the manual carousel with a timer
    $(tabContainers).find(‘.tabNavigation li:eq(0) a’).css(‘background-color’,’#000′);

    var $featuredBox = $(‘.feature_wrap’),
    numDivs = tabContainers.length,
    cycleInterval = 4000;

    // Starts/stops carousel timer
    function startTimer() {
    cycleTimer = setInterval(function() {

    var visibleOne = parseInt($(tabContainers).filter(‘:visible’).attr(‘id’).substring(3),10),
    nextOne = visibleOne;

    if (nextOne == numDivs) {
    nextOne = 0;
    }

    $(‘#tab’ + visibleOne + ‘ .tabNavigation li:eq(‘ + nextOne + ‘) a’).trigger(‘click’);
    $(tabContainers).find(‘.tabNavigation li a’).css(‘background-color’,’transparent’);
    $(tabContainers).find(‘.tabNavigation li:eq(‘ + nextOne + ‘) a’).css(‘background-color’,’#000′);

    }, cycleInterval);
    };
    function stopTimer() {
    window.clearInterval(cycleTimer);
    };

    if ($featuredBox.length > 0) {
    startTimer();
    }

    // Start/stop cycle
    $featuredBox.hover(stopTimer, startTimer);

    });

    And I’m not sure where to add it to the php files or css of my theme. I’ve tried adding it a few places, and it’s not working. Can someone help me apply this or a modified version of this in the right place?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • jdhputz

    (@jdhputz)

    11 years, 4 months ago

    I just ran into this issue as well. This code goes in the theme on the scripts.php file. If you add it to the script that is there, or go back to the sample website and copy the entire script, the only thing you need to replace are all the $(…) with jQuery(…). WordPress doesn’t allow the shortcut of using $ instead of jQuery. This should solve you problem because I just got it to work on the website I just built.

    redefinered

    (@redefinered)

    10 years, 11 months ago

    Hi ashleykmbooks. Can you help me? I saw your website coolseasongardening.com and saw the featured content section rotating. I’m currently working on a project, http://customadesign.info/onestopgoldandsilver/ right now and the client ask me to rotate the featured content every three second. Can you help me? thanks!

    Thread Starter ashleykmbooks

    (@ashleykmbooks)

    10 years, 11 months ago

    Redefinered, to get it to work I added the following to the scripts.php file. A friend who writes java code created this for me, so sorry I can’t answer specific questions other than copy and paste that in and you should be ok!

    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/inc/visionary.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/inc/superfish.js”></script>
    <script type=”text/javascript”>
    jQuery(function() {
    jQuery(‘ul.superfish’).superfish();
    var tabContainers = jQuery(‘div.tabs > div’);

    jQuery(‘div.tabs ul.tabNavigation a’).click(function () {
    tabContainers.hide().filter(this.hash).show();

    jQuery(‘div.tabs ul.tabNavigation a’).removeClass(‘selected’);
    jQuery(this).addClass(‘selected’);

    return false;
    }).filter(‘:first’).click();

    // Modifies the manual carousel with a timer
    jQuery(tabContainers).find(‘.tabNavigation li:eq(0) a’).css(‘background-color’,’#000′);

    var jQueryfeaturedBox = jQuery(‘.feature_wrap’);
    numDivs = tabContainers.length;
    cycleInterval = 4000;

    // Starts/stops carousel timer
    function startTimer() {
    cycleTimer = setInterval(function() {
    var visibleOne = parseInt(jQuery(tabContainers).filter(‘:visible’).attr(‘id’).substring(3),10);
    nextOne = visibleOne;

    if (nextOne == numDivs) {
    nextOne = 0;
    }

    jQuery(‘#tab’ + visibleOne + ‘ .tabNavigation li:eq(‘ + nextOne + ‘) a’).trigger(‘click’);
    jQuery(tabContainers).find(‘.tabNavigation li a’).css(‘background-color’,’transparent’);
    jQuery(tabContainers).find(‘.tabNavigation li:eq(‘ + nextOne + ‘) a’).css(‘background-color’,’#000′);
    }, cycleInterval);
    };

    function stopTimer() {
    window.clearInterval(cycleTimer);
    };

    if (jQueryfeaturedBox.length > 0) {
    startTimer();
    }

    // Start/stop cycle
    jQueryfeaturedBox.hover(stopTimer, startTimer);
    <?php if (get_option(‘coldstone_disable_toptier’) == ‘on’) echo(‘jQuery(“ul.nav > li > a > span.sf-sub-indicator”).parent().attr(“href”,”#”);’); ?>
    });
    </script>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding slider feature to Elegant Themes-Coldstone’ is closed to new replies.