Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

How install the kwicks or accordian slider in wordpress? WordPress

  • SOLVED

I am using a wordpress theme and want to inset the KWICKS or ACCORDIAN slider like in this site:

http://www.kriesi.at/themedemo/?theme=corona

I am not using this theme obviously but I believe the slider is from here:

http://www.jeremymartin.name/projects.php?project=kwicks


Many thanks

Answers (3)

2011-09-14

ej_emman answers:

Hello Jeanette,

Have you seen its documentation and example? and have you tried its example?


Ej


Jeanette Lloyd-Stern comments:

I have read it but it looks very complicated and wondered if there was an expert out there who can either explain it or do it - thanks


ej_emman comments:

try this,
//Place to functions.php
function my_scripts_method() {
wp_enqueue_script('newscript', 'http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js' );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');


//place it to the header
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 220,
spacing : 5
});
});
</script>


//place this to your css main
/* 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. */
body {
background-color: #1d1e21;
padding: 50px;
}
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 125px;
height: 100px;

/*do not change these */
display: block;
overflow: hidden;
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 5px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}

#kwick_1 {
background-color: #53b388;
}
#kwick_2 {
background-color: #5a69a9;
}
#kwick_3 {
background-color: #c26468;
}
#kwick_4 {
background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}

//place this where you want to display the result

<ul class="kwicks horizontal" >
<li id="kwick_1"></li>
<li id="kwick_2"></li>
<li id="kwick_3"></li>
<li id="kwick_4"></li>
</ul>


ej_emman comments:

tell if it helps..


ej_emman comments:

it works in me...
But if you want to make it sure, that jquery will work in some other theme. just use this instead.

// place to funtions.php
add_action('wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
wp_enqueue_script('first', home_url().'/wp-includes/js/jquery/jquery.js');
wp_enqueue_script('second', 'http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js' );
wp_enqueue_script('third', 'http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks
}

2011-09-15

Abdessamad Idrissi answers:

Hey Jeanette,

the accordion used on that given example is named : [[LINK href="http://www.kriesi.at/themes/corona/wp-content/themes/corona/js/aviacordion-dev.js"]]Aviacordion Slider[[/LINK]]. it is not a simple script since it needs the folowing scripts to work:
* [[LINK href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/"]]prettyPhoto[[/LINK]]
* [[LINK href="http://www.kriesi.at/themes/corona/wp-content/themes/corona/js/avia_fade_slider-dev.js"]]Avia Fade Slider[[/LINK]]
* [[LINK href="http://www.kriesi.at/themes/corona/wp-content/themes/corona/js/aviaslider.js"]]AviaSlider[[/LINK]]

So if you need to get the exact effect, you need all the above dependencies.

The good news is; thre's some wordpress ready plugins you can use for the accordion effect:
* [[LINK href="http://wordpress.org/extend/plugins/xtreme-accordion/"]]xtreme-accordion[[/LINK]]

If all these sounds Greek to you! then let me know and I'll be pleased to assist you get this on rails :)

2011-09-15

Sampheap Say answers:

Not different from this one: http://www.paddsolutions.com/wordpress-theme-neodymiumos/
The theme is also free. And if you only want the accordion, I can get it for ya.