Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16738

    Kriesi,

    I’m having trouble implementing the kwicks accordion slider following this tutorial: http://www.aoclarkejr.com/tutorial-jquery-accordion-slider.html

    The idea is to call the slider in an page in order to show a different slider per each language (qTranslate). The page will be used in the theme builder.

    We have tried all possible methods working with header.php and functions.php, but also putting the code in the page using the “Insert JavaScript & CSS ” plugin.

    We fear that the theme is avoiding the execution if the js.

    Your advice would be required.

    Thank you.

    #92682

    Basically you can add the jquery code to js/avia.js (after the first document.ready code line):

    jQuery('#accordion-slider').kwicks({
    max : 750,
    spacing : 2
    });

    Then add the css code to css/custom.css or the quicks css field. At least insert the slider code itself at the very bottom of avia.js.

    #92683

    Good morning,

    thank you for the reply, unfortunately we do not have any progress.

    We have done the following modifications:

    1) functions.php (in the corresponding area of the code)

    wp_register_script( 'kwicks',  AVIA_BASE_URL.'js/jquery.kwicks-1.5.1.pack.js', 'jquery', "1", false);

    2) avia.js

    /* this prevents dom flickering, needs to be outside of dom.ready event: */
    document.documentElement.className += 'js_active';

    // aktiviert den accordion-slider
    jQuery('#accordion-slider').kwicks({
    max : 750,
    spacing : 2
    });

    /*end dom flickering =) */

    3) header.php (in the corresponding area of the code)

    wp_enqueue_script( 'kwicks' );

    4) custom.css

    /* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */

    ul#accordion-slider{
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    }
    ul#accordion-slider li{
    display: block;
    overflow: hidden;
    padding: 0;
    float: left;
    width: 230px;
    height: 300px;
    }

    5) We call the slider in the post using:

    <ul>
    <li><img src="image1.png" alt="Image Title" /></li>
    <li><img src="image2.png" alt="Image Title" /></li>
    <li><img src="image3.png" alt="Image Title" /></li>
    <li><img src="image4.png" alt="Image Title" /></li>
    </ul>

    Actually we think it should be:

    <ul class="accordion-slider">

    <li><img src="image1.png" alt="Image Title" /></li>
    <li><img src="image2.png" alt="Image Title" /></li>
    <li><img src="image3.png" alt="Image Title" /></li>
    <li><img src="image4.png" alt="Image Title" /></li>

    Your help is appreciated!

    #92684

    I have updatet avia.js since the old version left all the built-in sliders with no function:

    /* this prevents dom flickering, needs to be outside of dom.ready event: */
    document.documentElement.className += 'js_active';

    /*end dom flickering =) */

    //global path: avia_framework_globals.installedAt

    jQuery.noConflict();
    jQuery(document).ready(function(){

    // aktiviert den accordion-slider
    jQuery('#accordion-slider').kwicks({
    max : 750,
    spacing : 2
    });

    #92685

    Hey!

    You need to replace:

    <ul class="accordion-slider">

    with:

    <ul id="accordion-slider">

    Best regards,

    Peter

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

The topic ‘kwicks accordion slider’ is closed to new replies.