kwicks accordion slider « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Brightbox

kwicks accordion slider

5 posts from 2 voices

Started 7 months ago by kfs_group
Latest reply from Dude
This topic is not resolved

Tags:

kfs_group
Member

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.

Posted 7 months ago #
Dude
Dude
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.
Posted 7 months ago #

kfs_group
Member

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!

Posted 7 months ago #

kfs_group
Member

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
 	});

Posted 7 months ago #

Dude
Dude
Hey!

You need to replace:
```
<ul class="accordion-slider">
```
with:
```
<ul id="accordion-slider">
```
Best regards,
Peter
Posted 7 months ago #