1. Increase the cycle transition duration to half a second, and change the animation such that each slide fades out before the next one fades in. Refer to the Cycle documentation to find the appropriate option to enable this.
jQuery(document).ready(function ($) {
$('#books').cycle({
timeout: 500,
speed: 200,
pause: true,
//------------------
fx: 'fade',
//------------------
before: function () {
$('#slider').slider('value', $('#books li').index(this));
}
});
});
2. Set the cyclePaused cookie to persist for 30 days.
jQuery(document).ready(function ($) {
$('<button>Pause</button>').click(function () {
$('#books').cycle('pause');
//-----------------------------------------------
$.cookie('cyclePaused', 'y', { expires: 30 });
//-----------------------------------------------
return false;
}).button({
icons: { primary: 'ui-icon-pause' }
}).appendTo('#books-controls');
});
3. Constrain the title box to resize only in ten pixel increments.
jQuery(document).ready(function ($) {
$('#books .title').resizable({
handles: 's',
//--------------------
distance: 10
//--------------------
});
});
4. Make the slider animate smoothly from one position to the next as the slideshow advances.
jQuery(document).ready(function ($) {
$('<div id="slider"></div>').slider({
min: 0,
max: $('#books li').length - 1,
slide: function (event, ui) {
$('#books').cycle(ui.value);
},
//-------------------
animate: true
//-------------------
}).appendTo('#books-controls');
});
5. Instead of letting the slideshow loop forever, cause it to stop after the last slide is shown. Disable the buttons and slider when this happens.
jQuery(document).ready(function ($) {
$('#books').cycle({
timeout: 500,
speed: 200,
pause: true,
fx: 'fade',
//---------------
nowrap: true,
//---------------
before: function () {
$('#slider').slider('value', $('#books li').index(this));
}
});
});
6. Create a new jQuery UI theme that has a light blue widget background and dark blue text, and apply the theme to our sample document.
a. Go to http://jqueryui.com/themeroller/
b. Click on the "Content" tab as shown in the image below:
c. Click on the "Clickable: default state" tab and do the same thing you did in step b.
d. Click "Download theme" button
(Download the zip file and integrate the css and js files contained in the zip file into your site)
Free Lessons for Chruch Pianists:
Free lessons, tips and downloads for church pianists
DVD Courses (Reharmonization, Play by Ear!, Arranging, Accompanying, Theory for Church Pianists, etc.):
Over 30 hours of DVD instruction for church pianists
Visit Vitabase for Quality Health Supplements
