HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
I would like to have a slow fading slideshow of a few images relating to the web page that the user is on.
I have a seperate div tag, with the space 235 x 440 pixels allowed for the images. All I want is the slideshow to fade in and out of one another using 3 or 4 photos, no text, no control panel or thumbnails or any other frills, just basic good quality photos fading in a looped slideshow.
I just want that when the page loads up that the slideshow starts automatically and slowly loops continuously until the user changes page.
I have seen animated gifs from photoshop, which are no good because the image quality is awful, and in fireworks, where it comes with either thumbnails or a control panel for the user to navigate manually the images. I don't want that. Can it be done easily in flash? or does dreamweaver have an answer?
Surely there must be a simple and basic way in dreamweaver alone to just swap/fade an image with another image a few times and thats that? no?
If it can't be done in dreamweaver, PLEASE tell me which program it can be done in and how.
Many many many thanks in advance for anyone with an easily explained solution.
Ian.
Here is the code in my header:
<!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... });});</script>
Here is the code in the body part of my page:
<div class="slideshow"><img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /></div>
Here is the code in the jquery site:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
</head>
<body>
<div class="slideshow">
<img src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" />
<img src="<img src="img/WebsiteSlideshow/DSCN2051.JPG" width="592" height="509" />
<img src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" />
<img src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" />
<img src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" />
<img src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" />
<img src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" />
<img src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" />
<img src="img/WebsiteSlideshow/DSCN2052.JPG" width="592" height="509" />
</div>
</body>
</html>
// process the args that were passed to the plugin fn
function handleArguments(cont, 1, fade) {
if (cont.cycleStop == undefined)
cont.cycleStop = 0;
if (options === undefined || options === null)
options = {};
if (options.constructor == String) {
switch(options) {
case 'destroy':
case 'stop':
var opts = $(cont).data('cycle.opts');
if (!opts)
return false;
cont.cycleStop++; // callbacks look for change
if (cont.cycleTimeout)
clearTimeout(cont.cycleTimeout);
cont.cycleTimeout = 0;
$(cont).removeData('cycle.opts');
if (options == 'destroy')
destroy(opts);
return false;
case 'toggle':
cont.cyclePause = (cont.cyclePause === 1) ? 0 : 1;
checkInstantResume(cont.cyclePause, arg2, cont);
return false;
case 'pause':
cont.cyclePause = 1;
return false;
case 'resume':
cont.cyclePause = 0;
checkInstantResume(false, arg2, cont);
return false;
case 'prev':
case 'next':
var opts = $(cont).data('cycle.opts');
if (!opts) {
log('options not found, "prev/next" ignored');
return false;
$.fn.cycle[options](opts);
return false;
default:
options = { fx: options };
return options;
else if (options.constructor == Number) {
// go to the requested slide
var num = options;
options = $(cont).data('cycle.opts');
if (!options) {
log('options not found, can not advance slide');
return false;
if (num < 0 || num >= options.elements.length) {
log('invalid slide index: ' + num);
return false;
options.nextSlide = num;
if (cont.cycleTimeout) {
clearTimeout(cont.cycleTimeout);
cont.cycleTimeout = 0;
if (typeof arg2 == 'string')
options.oneTimeFx = arg2;
go(options.elements, options, 1, num >= options.currSlide);
return false;
return options;
function checkInstantResume(isPaused, arg2, cont) {
if (!isPaused && arg2 === true) { // resume now!
var options = $(cont).data('cycle.opts');
if (!options) {
log('options not found, can not resume');
return false;
if (cont.cycleTimeout) {
clearTimeout(cont.cycleTimeout);
cont.cycleTimeout = 0;
go(options.elements, options, 1, (!opts.rev && !opts.backwards));
function removeFilter(el, opts) {
if (!$.support.opacity && opts.cleartype && el.style.filter) {
try { el.style.removeAttribute('filter'); }
catch(smother) {} // handle old opera versions
// unbind event handlers
function destroy(opts) {
if (opts.next)
$(opts.next).unbind(opts.prevNextEvent);
if (opts.prev)
$(opts.prev).unbind(opts.prevNextEvent);
if (opts.pager || opts.pagerAnchorBuilder)
$.each(opts.pagerAnchors || [], function() {
this.unbind().remove();
opts.pagerAnchors = null;
if (opts.destroy) // callback
opts.destroy(opts);
// one-time initialization
function buildOptions($cont, $slides, els, options, o) {
// support metadata plugin (v1.0 and v2.0)
var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
if (opts.autostop)
opts.countdown = opts.autostopCount || els.length;
var cont = $cont[0];
$cont.data('cycle.opts', opts);
opts.$cont = $cont;
opts.stopCount = cont.cycleStop;
opts.elements = els;
opts.before = opts.before ? [opts.before] : [];
opts.after = opts.after ? [opts.after] : [];
opts.after.unshift(function(){ opts.busy=0; });
// push some after callbacks
if (!$.support.opacity && opts.cleartype)
opts.after.push(function() { removeFilter(this, opts); });
if (opts.continuous)
opts.after.push(function() { go(els,opts,0,(!opts.rev && !opts.backwards)); });
saveOriginalOpts(opts);
// clearType corrections
if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
clearTypeFix($slides);
// container requires non-static position so that slides can be position within
if ($cont.css('position') == 'static')
$cont.css('position', 'relative');
if (opts.width)
$cont.width(opts.width);
if (opts.height && opts.height != 'auto')
$cont.height(opts.height);
if (opts.startingSlide)
opts.startingSlide = parseInt(opts.startingSlide);
else if (opts.backwards)
opts.startingSlide = els.length - 1;
// if random, mix up the slide array
if (opts.random) {
opts.randomMap = [];
for (var i = 0; i < els.length; i++)
opts.randomMap.push(i);
opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;});
opts.randomIndex = 1;
opts.startingSlide = opts.randomMap[1];
else if (opts.startingSlide >= els.length)
opts.startingSlide = 0; // catch bogus input
opts.currSlide = opts.startingSlide || 0;
var first = opts.startingSlide;
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
// make sure first slide is visible
$(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case
removeFilter(els[first], opts);
// stretch slides
if (opts.fit && opts.width)
$slides.width(opts.width);
if (opts.fit && opts.height && opts.height != 'auto')
$slides.height(opts.height);
// stretch container
var reshape = opts.containerResize && !$cont.innerHeight();
if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
var maxw = 0, maxh = 0;
for(var j=0; j < els.length; j++) {
var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
if (!w) w = e.offsetWidth || e.width || $e.attr('width')
if (!h) h = e.offsetHeight || e.height || $e.attr('height');
maxw = w > maxw ? w : maxw;
maxh = h > maxh ? h : maxh;
if (maxw > 0 && maxh > 0)
$cont.css({width:maxw+'px',height:maxh+'px'});
if (opts.pause)
$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});
if (supportMultiTransitions(opts) === false)
return false;
// apparently a lot of people use image slideshows without height/width attributes on the images.
// Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
var requeue = false;
options.requeueAttempts = options.requeueAttempts || 0;
$slides.each(function() {
// try to get height/width of each slide
var $el = $(this);
this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);
if ( $el.is('img') ) {
// sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when
// an image is being downloaded and the markup did not include sizing info (height/width attributes);
// there seems to be some "default" sizes used in this situation
var loadingIE = ($.browser.msie && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);
var loadingOther = (this.cycleH == 0 && this.cycleW == 0 && !this.complete);
// don't requeue for images that are still loading but have a valid size
if (loadingIE || loadingFF || loadingOp || loadingOther) {
if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever
log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH);
setTimeout(function() {$(o.s,o.c).cycle(options)}, opts.requeueTimeout);
requeue = true;
return false; // break each loop
else {
log('could not determine size of image: '+this.src, this.cycleW, this.cycleH);
return true;
if (requeue)
return false;
opts.cssBefore = opts.cssBefore || {};
opts.animIn = opts.animIn || {};
opts.animOut = opts.animOut || {};
$slides.not(':eq('+first+')').css(opts.cssBefore);
if (opts.cssFirst)
$($slides[first]).css(opts.cssFirst);
if (opts.timeout) {
opts.timeout = parseInt(opts.timeout);
// ensure that timeout and speed settings are sane
if (opts.speed.constructor == String)
opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed);
if (!opts.sync)
opts.speed = opts.speed / 2;
var buffer = opts.fx == 'shuffle' ? 500 : 250;
while((opts.timeout - opts.speed) < buffer) // sanitize timeout
opts.timeout += opts.speed;
if (opts.easing)
opts.easeIn = opts.easeOut = opts.easing;
if (!opts.speedIn)
opts.speedIn = opts.speed;
if (!opts.speedOut)
opts.speedOut = opts.speed;
opts.slideCount = els.length;
opts.currSlide = opts.lastSlide = first;
if (opts.random) {
if (++opts.randomIndex == els.length)
opts.randomIndex = 0;
opts.nextSlide = opts.randomMap[opts.randomIndex];
else if (opts.backwards)
opts.nextSlide = opts.startingSlide == 0 ? (els.length-1) : opts.startingSlide-1;
else
opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1;
// run transition init fn
if (!opts.multiFx) {
var init = $.fn.cycle.transitions[opts.fx];
if ($.isFunction(init))
init($cont, $slides, opts);
else if (opts.fx != 'custom' && !opts.multiFx) {
log('unknown transition: ' + opts.fx,'; slideshow terminating');
return false;
// fire artificial events
var e0 = $slides[first];
if (opts.before.length)
opts.before[0].apply(e0, [e0, e0, opts, true]);
if (opts.after.length > 1)
opts.after[1].apply(e0, [e0, e0, opts, true]);
if (opts.next)
$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1)});
if (opts.prev)
$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1)});
if (opts.pager || opts.pagerAnchorBuilder)
buildPager(els,opts);
exposeAddSlide(opts, els);
return opts;
// save off original opts so we can restore after clearing state
function saveOriginalOpts(opts) {
opts.original = { before: [], after: [] };
opts.original.cssBefore = $.extend({}, opts.cssBefore);
opts.original.cssAfter = $.extend({}, opts.cssAfter);
opts.original.animIn = $.extend({}, opts.animIn);
opts.original.animOut = $.extend({}, opts.animOut);
$.each(opts.before, function() { opts.original.before.push(this); });
$.each(opts.after, function() { opts.original.after.push(this); });
function supportMultiTransitions(opts) {
var i, tx, txs = $.fn.cycle.transitions;
// look for multiple effects
if (opts.fx.indexOf(',') > 0) {
opts.multiFx = true;
opts.fxs = opts.fx.replace(/\s*/g,'').split(',');
// discard any bogus effect names
for (i=0; i < opts.fxs.length; i++) {
var fx = opts.fxs[i];
tx = txs[fx];
if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) {
log('discarding unknown transition: ',fx);
opts.fxs.splice(i,1);
i--;
// if we have an empty list then we threw everything away!
if (!opts.fxs.length) {
log('No valid transitions named; slideshow terminating.');
return false;
else if (opts.fx == 'all') { // auto-gen the list of transitions
opts.multiFx = true;
opts.fxs = [];
for (p in txs) {
tx = txs[p];
if (txs.hasOwnProperty(p) && $.isFunction(tx))
opts.fxs.push(p);
if (opts.multiFx && opts.randomizeEffects) {
// munge the fxs array to make effect selection random
var r1 = Math.floor(Math.random() * 20) + 30;
for (i = 0; i < r1; i++) {
var r2 = Math.floor(Math.random() * opts.fxs.length);
opts.fxs.push(opts.fxs.splice(r2,1)[0]);
debug('randomized fx sequence: ',opts.fxs);
return true;
// provide a mechanism for adding slides after the slideshow has started
function exposeAddSlide(opts, els) {
opts.addSlide = function(newSlide, prepend) {
var $s = $(newSlide), s = $s[0];
if (!opts.autostopCount)
opts.countdown++;
els[prepend?'unshift':'push'](s);
if (opts.els)
opts.els[prepend?'unshift':'push'](s); // shuffle needs this
opts.slideCount = els.length;
$s.css('position','absolute');
$s[prepend?'prependTo':'appendTo'](opts.$cont);
if (prepend) {
opts.currSlide++;
opts.nextSlide++;
if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
clearTypeFix($s);
if (opts.fit && opts.width)
$s.width(opts.width);
if (opts.fit && opts.height && opts.height != 'auto')
$slides.height(opts.height);
s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height();
s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width();
$s.css(opts.cssBefore);
if (opts.pager || opts.pagerAnchorBuilder)
$.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts);
if ($.isFunction(opts.onAddSlide))
opts.onAddSlide($s);
else
$s.hide(); // default behavior
// reset internal state; we do this on every pass in order to support multiple effects
$.fn.cycle.resetState = function(opts, fx) {
fx = fx || opts.fx;
opts.before = []; opts.after = [];
opts.cssBefore = $.extend({}, opts.original.cssBefore);
opts.cssAfter = $.extend({}, opts.original.cssAfter);
opts.animIn = $.extend({}, opts.original.animIn);
opts.animOut = $.extend({}, opts.original.animOut);
opts.fxFn = null;
$.each(opts.original.before, function() { opts.before.push(this); });
$.each(opts.original.after, function() { opts.after.push(this); });
// re-init
var init = $.fn.cycle.transitions[fx];
if ($.isFunction(init))
init(opts.$cont, $(opts.elements), opts);
// this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
function go(els, opts, manual, fwd) {
// opts.busy is true if we're in the middle of an animation
if (manual && opts.busy && opts.manualTrump) {
// let manual transitions requests trump active ones
debug('manualTrump in go(), stopping active transition');
$(els).stop(true,true);
opts.busy = false;
// don't begin another timeout-based transition if there is one active
if (opts.busy) {
debug('transition active, ignoring new tx request');
return;
var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide];
// stop cycling if we have an outstanding stop request
if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual)
return;
// check to see if we should stop cycling based on autostop options
if (!manual && !p.cyclePause && !opts.bounce &&
((opts.autostop && (--opts.countdown <= 0)) ||
(opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {
if (opts.end)
opts.end(opts);
return;
// if slideshow is paused, only transition on a manual trigger
var changed = false;
if ((manual || !p.cyclePause) && (opts.nextSlide != opts.currSlide)) {
changed = true;
var fx = opts.fx;
// keep trying to get the slide size if we don't have it yet
curr.cycleH = curr.cycleH || $(curr).height();
curr.cycleW = curr.cycleW || $(curr).width();
next.cycleH = next.cycleH || $(next).height();
next.cycleW = next.cycleW || $(next).width();
// support multiple transition types
if (opts.multiFx) {
if (opts.lastFx == undefined || ++opts.lastFx >= opts.fxs.length)
opts.lastFx = 0;
fx = opts.fxs[opts.lastFx];
opts.currFx = fx;
// one-time fx overrides apply to: $('div').cycle(3,'zoom');
if (opts.oneTimeFx) {
fx = opts.oneTimeFx;
opts.oneTimeFx = null;
$.fn.cycle.resetState(opts, fx);
// run the before callbacks
if (opts.before.length)
$.each(opts.before, function(i,o) {
if (p.cycleStop != opts.stopCount) return;
o.apply(next, [curr, next, opts, fwd]);
// stage the after callacks
var after = function() {
$.each(opts.after, function(i,o) {
if (p.cycleStop != opts.stopCount) return;
o.apply(next, [curr, next, opts, fwd]);
debug('tx firing; currSlide: ' + opts.currSlide + '; nextSlide: ' + opts.nextSlide);
// get ready to perform the transition
opts.busy = 1;
if (opts.fxFn) // fx function provided?
opts.fxFn(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ?
$.fn.cycle[opts.fx](curr, next, opts, after, fwd, manual && opts.fastOnEvent);
else
$.fn.cycle.custom(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
if (changed || opts.nextSlide == opts.currSlide) {
// calculate the next slide
opts.lastSlide = opts.currSlide;
if (opts.random) {
opts.currSlide = opts.nextSlide;
if (++opts.randomIndex == els.length)
opts.randomIndex = 0;
opts.nextSlide = opts.randomMap[opts.randomIndex];
if (opts.nextSlide == opts.currSlide)
opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1;
else if (opts.backwards) {
var roll = (opts.nextSlide - 1) < 0;
if (roll && opts.bounce) {
opts.backwards = !opts.backwards;
opts.nextSlide = 1;
opts.currSlide = 0;
else {
opts.nextSlide = roll ? (els.length-1) : opts.nextSlide-1;
opts.currSlide = roll ? 0 : opts.nextSlide+1;
else { // sequence
var roll = (opts.nextSlide + 1) == els.length;
if (roll && opts.bounce) {
opts.backwards = !opts.backwards;
opts.nextSlide = els.length-2;
opts.currSlide = els.length-1;
else {
opts.nextSlide = roll ? 0 : opts.nextSlide+1;
opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
if (changed && opts.pager)
opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);
// stage the next transition
var ms = 0;
if (opts.timeout && !opts.continuous)
ms = getTimeout(els[opts.currSlide], els[opts.nextSlide], opts, fwd);
else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic
ms = 10;
if (ms > 0)
p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, (!opts.rev && !opts.backwards)) }, ms);
// invoked after transition
$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
$(pager).each(function() {
$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
// calculate timeout value for current transition
function getTimeout(curr, next, opts, fwd) {
if (opts.timeoutFn) {
// call user provided calc fn
var t = opts.timeoutFn.call(curr,curr,next,opts,fwd);
while ((t - opts.speed) < 250) // sanitize timeout
t += opts.speed;
debug('calculated timeout: ' + t + '; speed: ' + opts.speed);
if (t !== false)
return t;
return opts.timeout;
// expose next/prev function, caller must pass in state
$.fn.cycle.next = function(opts) { advance(opts, opts.rev?-1:1); };
$.fn.cycle.prev = function(opts) { advance(opts, opts.rev?1:-1);};
// advance slide forward or back
function advance(opts, val) {
var els = opts.elements;
var p = opts.$cont[0], timeout = p.cycleTimeout;
if (timeout) {
clearTimeout(timeout);
p.cycleTimeout = 0;
if (opts.random && val < 0) {
// move back to the previously display slide
opts.randomIndex--;
if (--opts.randomIndex == -2)
opts.randomIndex = els.length-2;
else if (opts.randomIndex == -1)
opts.randomIndex = els.length-1;
opts.nextSlide = opts.randomMap[opts.randomIndex];
else if (opts.random) {
opts.nextSlide = opts.randomMap[opts.randomIndex];
else {
opts.nextSlide = opts.currSlide + val;
if (opts.nextSlide < 0) {
if (opts.nowrap) return false;
opts.nextSlide = els.length - 1;
else if (opts.nextSlide >= els.length) {
if (opts.nowrap) return false;
opts.nextSlide = 0;
var cb = opts.onPrevNextEvent || opts.prevNextClick; // prevNextClick is deprecated
if ($.isFunction(cb))
cb(val > 0, opts.nextSlide, els[opts.nextSlide]);
go(els, opts, 1, val>=0);
return false;
function buildPager(els, opts) {
var $p = $(opts.pager);
$.each(els, function(i,o) {
$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);
$.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) {
var a;
if ($.isFunction(opts.pagerAnchorBuilder)) {
a = opts.pagerAnchorBuilder(i,el);
debug('pagerAnchorBuilder('+i+', el) returned: ' + a);
else
a = '<a href="#">'+(i+1)+'</a>';
if (!a)
return;
var $a = $(a);
// don't reparent if anchor is in the dom
if ($a.parents('body').length === 0) {
var arr = [];
if ($p.length > 1) {
$p.each(function() {
var $clone = $a.clone(true);
$(this).append($clone);
arr.push($clone[0]);
$a = $(arr);
else {
$a.appendTo($p);
opts.pagerAnchors = opts.pagerAnchors || [];
opts.pagerAnchors.push($a);
$a.bind(opts.pagerEvent, function(e) {
e.preventDefault();
opts.nextSlide = i;
var p = opts.$cont[0], timeout = p.cycleTimeout;
if (timeout) {
clearTimeout(timeout);
p.cycleTimeout = 0;
var cb = opts.onPagerEvent || opts.pagerClick; // pagerClick is deprecated
if ($.isFunction(cb))
cb(opts.nextSlide, els[opts.nextSlide]);
go(els,opts,1,opts.currSlide < i); // trigger the trans
// return false; // <== allow bubble
if ( ! /^click/.test(opts.pagerEvent) && !opts.allowPagerClickBubble)
$a.bind('click.cycle', function(){return false;}); // suppress click
if (opts.pauseOnPagerHover)
$a.hover(function() { opts.$cont[0].cyclePause++; }, function() { opts.$cont[0].cyclePause--; } );
// helper fn to calculate the number of slides between the current and the next
$.fn.cycle.hopsFromLast = function(opts, fwd) {
var hops, l = opts.lastSlide, c = opts.currSlide;
if (fwd)
hops = c > l ? c - l : opts.slideCount - l;
else
hops = c < l ? l - c : l + opts.slideCount - c;
return hops;
// fix clearType problems in ie6 by setting an explicit bg color
// (otherwise text slides look horrible during a fade transition)
function clearTypeFix($slides) {
debug('applying clearType background-color hack');
function hex(s) {
s = parseInt(s).toString(16);
return s.length < 2 ? '0'+s : s;
function getBg(e) {
for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
var v = $.css(e,'background-color');
if (v.indexOf('rgb') >= 0 ) {
var rgb = v.match(/\d+/g);
return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
if (v && v != 'transparent')
return v;
return '#ffffff';
$slides.each(function() { $(this).css('background-color', getBg(this)); });
// reset common props before the next transition
$.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) {
$(opts.elements).not(curr).hide();
opts.cssBefore.opacity = 1;
opts.cssBefore.display = 'block';
if (w !== false && next.cycleW > 0)
opts.cssBefore.width = next.cycleW;
if (h !== false && next.cycleH > 0)
opts.cssBefore.height = next.cycleH;
opts.cssAfter = opts.cssAfter || {};
opts.cssAfter.display = 'none';
$(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0));
$(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1));
// the actual fn for effecting a transition
$.fn.cycle.custom = function(curr, next, opts, cb, fwd, speedOverride) {
var $l = $(curr), $n = $(next);
var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut;
$n.css(opts.cssBefore);
if (speedOverride) {
if (typeof speedOverride == 'number')
speedIn = speedOut = speedOverride;
else
speedIn = speedOut = 1;
easeIn = easeOut = null;
var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)};
$l.animate(opts.animOut, speedOut, easeOut, function() {
if (opts.cssAfter) $l.css(opts.cssAfter);
if (!opts.sync) fn();
if (opts.sync) fn();
// transition definitions - only fade is defined here, transition pack defines the rest
$.fn.cycle.transitions = {
fade: function($cont, $slides, opts) {
$slides.not(':eq('+opts.currSlide+')').css('opacity',0);
opts.before.push(function(curr,next,opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.cssBefore.opacity = 0;
opts.animIn = { opacity: 1 };
opts.animOut = { opacity: 0 };
opts.cssBefore = { top: 0, left: 0 };
$.fn.cycle.ver = function() { return ver; };
// override these globally if you like (they are all optional)
$.fn.cycle.defaults = {
fx: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
next: null, // selector for element to use as event trigger for next slide
prev: null, // selector for element to use as event trigger for previous slide
// prevNextClick: null, // @deprecated; please use onPrevNextEvent instead
onPrevNextEvent: null, // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide
pager: null, // selector for element to use as pager container
//pagerClick null, // @deprecated; please use onPagerEvent instead
onPagerEvent: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'click.cycle', // name of event which drives the pager navigation
allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
easing: null, // easing method for both in and out transitions
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
animIn: null, // properties that define how the slide animates in
animOut: null, // properties that define how the slide animates out
cssBefore: null, // properties that define the initial state of the slide before transitioning in
cssAfter: null, // properties that defined the state of the slide after transitioning out
fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // container height
startingSlide: 0, // zero-based index of the first slide to be displayed
sync: 1, // true if in/out transitions should occur simultaneously
random: 0, // true for random, false for sequence (not applicable to shuffle fx)
fit: 0, // force slides to fit container
containerResize: 1, // resize container to fit largest slide
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0, // true to pause when hovering over pager link
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
slideExpr: null, // expression for selecting slides (if something other than all children is required)
cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
nowrap: 0, // true to prevent slideshow from wrapping
fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
rev: 0, // causes animations to transition in reverse
manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250, // ms delay for requeue
activePagerClass: 'activeSlide', // class name used for the active pager link
updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
backwards: false // true to start slideshow at last slide and move backwards through the stack
})(jQuery);
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2010 M. Alsup
* Version: 2.72
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
(function($) {
// These functions define one-time slide initialization for the named
// transitions. To save file size feel free to remove any of these that you
// don't need.
$.fn.cycle.transitions.none = function($cont, $slides, opts) {
opts.fxFn = function(curr,next,opts,after){
$(next).show();
$(curr).hide();
after();
// scrollUp/Down/Left/Right
$.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var h = $cont.height();
opts.cssBefore ={ top: h, left: 0 };
opts.cssFirst = { top: 0 };
opts.animIn = { top: 0 };
opts.animOut = { top: -h };
$.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var h = $cont.height();
opts.cssFirst = { top: 0 };
opts.cssBefore= { top: -h, left: 0 };
opts.animIn = { top: 0 };
opts.animOut = { top: h };
$.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.cssBefore= { left: w, top: 0 };
opts.animIn = { left: 0 };
opts.animOut = { left: 0-w };
$.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.cssBefore= { left: -w, top: 0 };
opts.animIn = { left: 0 };
opts.animOut = { left: w };
$.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
$cont.css('overflow','hidden').width();
opts.before.push(function(curr, next, opts, fwd) {
$.fn.cycle.commonReset(curr,next,opts);
opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
opts.cssFirst = { left: 0 };
opts.cssBefore= { top: 0 };
opts.animIn = { left: 0 };
opts.animOut = { top: 0 };
$.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push(function(curr, next, opts, fwd) {
$.fn.cycle.commonReset(curr,next,opts);
opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore= { left: 0 };
opts.animIn = { top: 0 };
opts.animOut = { left: 0 };
// slideX/slideY
$.fn.cycle.transitions.slideX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$(opts.elements).not(curr).hide();
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.animIn.width = next.cycleW;
opts.cssBefore = { left: 0, top: 0, width: 0 };
opts.animIn = { width: 'show' };
opts.animOut = { width: 0 };
$.fn.cycle.transitions.slideY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$(opts.elements).not(curr).hide();
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.animIn.height = next.cycleH;
opts.cssBefore = { left: 0, top: 0, height: 0 };
opts.animIn = { height: 'show' };
opts.animOut = { height: 0 };
// shuffle
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
var i, w = $cont.css('overflow', 'visible').width();
$slides.css({left: 0, top: 0});
opts.before.push(function(curr,next,opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
// only adjust speed once!
if (!opts.speedAdjusted) {
opts.speed = opts.speed / 2; // shuffle has 2 transitions
opts.speedAdjusted = true;
opts.random = 0;
opts.shuffle = opts.shuffle || {left:-w, top:15};
opts.els = [];
for (i=0; i < $slides.length; i++)
opts.els.push($slides[i]);
for (i=0; i < opts.currSlide; i++)
opts.els.push(opts.els.shift());
// custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
opts.fxFn = function(curr, next, opts, cb, fwd) {
var $el = fwd ? $(curr) : $(next);
$(next).css(opts.cssBefore);
var count = opts.slideCount;
$el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
var hops = $.fn.cycle.hopsFromLast(opts, fwd);
for (var k=0; k < hops; k++)
fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
if (fwd) {
for (var i=0, len=opts.els.length; i < len; i++)
$(opts.els[i]).css('z-index', len-i+count);
else {
var z = $(curr).css('z-index');
$el.css('z-index', parseInt(z)+1+count);
$el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
$(fwd ? this : curr).hide();
if (cb) cb();
opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
// turnUp/Down/Left/Right
$.fn.cycle.transitions.turnUp = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.cssBefore.top = next.cycleH;
opts.animIn.height = next.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore = { left: 0, height: 0 };
opts.animIn = { top: 0 };
opts.animOut = { height: 0 };
$.fn.cycle.transitions.turnDown = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.animIn.height = next.cycleH;
opts.animOut.top = curr.cycleH;
opts.cssFirst = { top: 0 };
opts.cssBefore = { left: 0, top: 0, height: 0 };
opts.animOut = { height: 0 };
$.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.cssBefore.left = next.cycleW;
opts.animIn.width = next.cycleW;
opts.cssBefore = { top: 0, width: 0 };
opts.animIn = { left: 0 };
opts.animOut = { width: 0 };
$.fn.cycle.transitions.turnRight = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.animIn.width = next.cycleW;
opts.animOut.left = curr.cycleW;
opts.cssBefore = { top: 0, left: 0, width: 0 };
opts.animIn = { left: 0 };
opts.animOut = { width: 0 };
// zoom
$.fn.cycle.transitions.zoom = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,false,true);
opts.cssBefore.top = next.cycleH/2;
opts.cssBefore.left = next.cycleW/2;
opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
opts.animOut = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 };
opts.cssFirst = { top:0, left: 0 };
opts.cssBefore = { width: 0, height: 0 };
// fadeZoom
$.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,false);
opts.cssBefore.left = next.cycleW/2;
opts.cssBefore.top = next.cycleH/2;
opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
opts.cssBefore = { width: 0, height: 0 };
opts.animOut = { opacity: 0 };
// blindX
$.fn.cycle.transitions.blindX = function($cont, $slides, opts) {
var w = $cont.css('overflow','hidden').width();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.width = next.cycleW;
opts.animOut.left = curr.cycleW;
opts.cssBefore = { left: w, top: 0 };
opts.animIn = { left: 0 };
opts.animOut = { left: w };
// blindY
$.fn.cycle.transitions.blindY = function($cont, $slides, opts) {
var h = $cont.css('overflow','hidden').height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.height = next.cycleH;
opts.animOut.top = curr.cycleH;
opts.cssBefore = { top: h, left: 0 };
opts.animIn = { top: 0 };
opts.animOut = { top: h };
// blindZ
$.fn.cycle.transitions.blindZ = function($cont, $slides, opts) {
var h = $cont.css('overflow','hidden').height();
var w = $cont.width();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
opts.animIn.height = next.cycleH;
opts.animOut.top = curr.cycleH;
opts.cssBefore = { top: h, left: w };
opts.animIn = { top: 0, left: 0 };
opts.animOut = { top: h, left: w };
// growX - grow horizontally from centered 0 width
$.fn.cycle.transitions.growX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true);
opts.cssBefore.left = this.cycleW/2;
opts.animIn = { left: 0, width: this.cycleW };
opts.animOut = { left: 0 };
opts.cssBefore = { width: 0, top: 0 };
// growY - grow vertically from centered 0 height
$.fn.cycle.transitions.growY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false);
opts.cssBefore.top = this.cycleH/2;
opts.animIn = { top: 0, height: this.cycleH };
opts.animOut = { top: 0 };
opts.cssBefore = { height: 0, left: 0 };
// curtainX - squeeze in both edges horizontally
$.fn.cycle.transitions.curtainX = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,false,true,true);
opts.cssBefore.left = next.cycleW/2;
opts.animIn = { left: 0, width: this.cycleW };
opts.animOut = { left: curr.cycleW/2, width: 0 };
opts.cssBefore = { top: 0, width: 0 };
// curtainY - squeeze in both edges vertically
$.fn.cycle.transitions.curtainY = function($cont, $slides, opts) {
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,false,true);
opts.cssBefore.top = next.cycleH/2;
opts.animIn = { top: 0, height: next.cycleH };
opts.animOut = { top: curr.cycleH/2, height: 0 };
opts.cssBefore = { left: 0, height: 0 };
// cover - curr slide covered by next slide
$.fn.cycle.transitions.cover = function($cont, $slides, opts) {
var d = opts.direction || 'left';
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts);
if (d == 'right')
opts.cssBefore.left = -w;
else if (d == 'up')
opts.cssBefore.top = h;
else if (d == 'down')
opts.cssBefore.top = -h;
else
opts.cssBefore.left = w;
opts.animIn = { left: 0, top: 0};
opts.animOut = { opacity: 1 };
opts.cssBefore = { top: 0, left: 0 };
// uncover - curr slide moves off next slide
$.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
var d = opts.direction || 'left';
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
if (d == 'right')
opts.animOut.left = w;
else if (d == 'up')
opts.animOut.top = -h;
else if (d == 'down')
opts.animOut.top = h;
else
opts.animOut.left = -w;
opts.animIn = { left: 0, top: 0 };
opts.animOut = { opacity: 1 };
opts.cssBefore = { top: 0, left: 0 };
// toss - move top slide and fade away
$.fn.cycle.transitions.toss = function($cont, $slides, opts) {
var w = $cont.css('overflow','visible').width();
var h = $cont.height();
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr,next,opts,true,true,true);
// provide default toss settings if animOut not provided
if (!opts.animOut.left && !opts.animOut.top)
opts.animOut = { left: w*2, top: -h/2, opacity: 0 };
else
opts.animOut.opacity = 0;
opts.cssBefore = { left: 0, top: 0 };
opts.animIn = { left: 0 };
// wipe - clip animation
$.fn.cycle.transitions.wipe = function($cont, $slides, opts) {
var w = $cont.css('overflow','hidden').width();
var h = $cont.height();
opts.cssBefore = opts.cssBefore || {};
var clip;
if (opts.clip) {
if (/l2r/.test(opts.clip))
clip = 'rect(0px 0px '+h+'px 0px)';
else if (/r2l/.test(opts.clip))
clip = 'rect(0px '+w+'px '+h+'px '+w+'px)';
else if (/t2b/.test(opts.clip))
clip = 'rect(0px '+w+'px 0px 0px)';
else if (/b2t/.test(opts.clip))
clip = 'rect('+h+'px '+w+'px '+h+'px 0px)';
else if (/zoom/.test(opts.clip)) {
var top = parseInt(h/2);
var left = parseInt(w/2);
clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)';
opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';
var d = opts.cssBefore.clip.match(/(\d+)/g);
var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]);
opts.before.push(function(curr, next, opts) {
if (curr == next) return;
var $curr = $(curr), $next = $(next);
$.fn.cycle.commonReset(curr,next,opts,true,true,false);
opts.cssAfter.display = 'block';
var step = 1, count = parseInt((opts.speedIn / 13)) - 1;
(function f() {
var tt = t ? t - parseInt(step * (t/count)) : 0;
var ll = l ? l - parseInt(step * (l/count)) : 0;
var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h;
var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w;
$next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
(step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
opts.animIn = { left: 0 };
opts.animOut = { left: 0 };
})(jQuery);
I still cannot get it to work
Similar Messages
-
How do I create a simple gallery in iweb? I don't know much coding though!
how do I create a simple gallery in iweb?
I don't know much coding though so I struggle
with some tips given on-line. I've spent many
hours on it with no success. Helpful advice will be greatly appreciated.Instructions :
http://www.wyodor.net/blog/archives/2010/03/entry_308.html
Result :
http://www.wyodor.net/_Demo/Fancy/Fancy2.html
http://www.wyodor.net/mfi/Dide/Photos.html -
How do I create a simple message board (forum)
I am a BC new-bee. How do I create a simple message board (forum) in BC to use on a Muse site since no widget is available there.
No worries,
The simple way should be that:
open your forum page in Muse
under "object" > "insert HTML" > paste "{module_forum,a,}"
click ok
move the textbox to the right position
now publish this page to your bc site
if you have any forums set up in the admin of your site (http://yourdomain.com/admin) it should show you the title of the forum.
if there are no forums set up, you will need to create a forum in bc (Modules > Forums)
Try this and let me know how it turned out.
[ advertising removed by admin ] -
Creating a slideshow using dreamweaver cs5
Hi guys I was wondering how do you create a slideshow in dreamweaver cs5, I was watching a guy do it in dreamweaver cs4 but i could not find the flash elements panel.
ThanksDo a Google search on "jQuery Slideshows" Behold! A wonderland of slideshow plug-ins!
Cool this is about jQuery slide-shows is that they all work basically the same way, so once you go through the learning curve of implementing one you'll be able to use any of them. This way you don't have to be locked in to a particular look. You can use what will look best for each site.
Enjoy!
Lawrence Cramer - *Adobe Community Professional*
http://www.Cartweaver.com
Shopping Cart for Adobe Dreamweaver
available in PHP, ColdFusion, and ASP
Stay updated - http://blog.cartweaver.com -
How do You import an MS Access MDB into Dreamweaver CS5?
Hi;
How do You import an MS Access MDB into Dreamweaver CS5?
Developed a DBase application for a vertical market using MS Access. Worked on it for over a decade.
Have been in contact with a rather large company and we are talking about licensing my program with them.
BUT; they want it "On the Cloud"
Here is what needs to be accomplished. Ideally a user can log in from anywhere, (similar to on-line banking), enter data and print reports.
Read this a few days ago:
"If I were in your situation and felt that there's a growth market for your offerings, I would personally go with a PHP/MySQL-based model. The printing issue can be readily resolved with PDF-based output.
So the Querys, Forms and VBA Code needs to be brought in from MS Access to Dreamweaver.
Can this be done? Or is there a better way that I haven't learned yet?
Would someone be so kind and point me in the correct direction.
Thank You for taking the time to read this post.
Andy>Can this be done?
No, not any way that I know of. You would need to completely rewrite this as a web application. Obviously the MS Access tables can be migrated to MySQL and the Access queries converted to views. But the forms and custom code needs to be written from scratch in html and your choice of server side programming language. -
How can i create a simple netweaver portal page that shows text and images?
Hi,
i have a simple question or maybe it's not so simple.
I am completly new to SAP Netweaver 2004s Portal. At the moment i'm trying to understand the struture of the whole thing. I already know how to create roles, worksets and pages and i know how to combine the different elements so a user can acces them.
And now i want to create a simple portal page that shows text and images. Is it possible to create such a simple page with the portal content studio? What iView do i have to use?
(I just want to create a start page with a welcome text on it.)Marc
Considering that you would any ways go ahead with complex development from this simple start page I recommend create a Web dynpro Iview for your start page (include the Iview in your page).
For putting the contents use Netweaver Developer studio to build a simple start page application and put your static text on that Iview.
Please go through the following log after your NWDS development is over - This will make you comfortable for further challenging work.
http://help.sap.com/saphelp_erp2005/helpdata/en/b7/ca934257a5c96ae10000000a155106/frameset.htm
Do reward points if this helps and let me know of you want anything more. -
How do I create a simple search program to search java console log
I wanted to know how can I write a simple program to return a particular value from the java console.
Let me give u a brief.
There is an application that I use, say "XYZ".Every time I perform an action on "XYZ" a log gets created in the java console. One such thing in the log I want to search is "ANI" and the program/script shud return the value adjacent to it.
Log Example:
NumCTIClients:0 CallType:CALLTYPE_PREROUTE_ACD_IN
ConnectionDeviceIDType:CONNECTION_ID_DYNAMIC
ConnectionCallID:4 ConnectionDeviceID:"0"
ANI:"9782755100" DNIS:"0006"
DialedNumber:"8002755010" CED:"1"
RouterCallKeyDay:145000 RouterCallKeyCallID:34320231
CallVariable1:"1234567" CallVariable2:"0"
CallVariable3:"0006" CallVariable5:"26000 123-45-6789
Not Valid " CallVariable6:"1001123-45-6789
26000000000038404LPCFAA" CallVariable7:"THIBAULT,
JOHN C. " CallVariable8:"CISCO
TESPHE " )
Now my understanding is that whenever java logs in the console it appends at the top, i.e, first record stays on top of the log sheet.
Now this script/program shud look up the top-most line which reads ANI and return the corresponding value which in the abv ex. was "9782755100"
I wud also want a small button when clicked wud copy the "9782755100" to the clip board
Edited by: SasK on Feb 9, 2008 6:09 PMdillmann74 wrote:
Hello all,
I am looking for a way to terminate a program when the user enters stop. I am using textpad, and I am running windows xp home. Here is where I need it....
System.out.print( "Enter employee name:" );
String nameOfEmployee = input.next();
System.out.println();
I need to be able to enter stop in the enter employee name area to terminate the program.
Thank you all for your advice.Do you know about if statements?
If not check out the java tutorials here
if you do then I don't understand your question. -
How can I create Business Catalyst editable slideshows in Muse?
I've created a series of slideshows in Adobe Muse but my client cannot edit them in Business Catalyst.
Please help!
http://www.timelinemissions.com/work.htmlIf you like to have a constant amout of imgs, lets say 3, you can define the images as a InContext Editable image and the caption as a InContext Editable line. I usally prerer this solution in front of WebApps as the customer can edit almost everything using ICE-mode.
Please refer to the ICE documentation for more details of implementation.
If you need a more flexible solution I would recommend a WebApp with a field that you define as a image. Then add new WebApp items for every image. If you like to limit the size of a image you can use BC Thumbnail tool. I think Joe Watkins has talked about how to use this tool before. -
How do I create a simple flare?
Hello,
I am a total newbie to AI, so any help/advice would be greatly appreciated.
I am trying to create a simple flare that will make my light bulb look like it is glowing really bright. I have been fooling around with the flare tool, but I can not figure out how to change the colors of the flare, etc.
I want the background of the flare to be transparent so that I can use it on any of my images and the image will show through. There are 5 different color flares that I need since I have 5 different bulb colors...1 yellow, 1 blue, 1 green, 1 amber, 1 red. I think that the scale should be about 25% height to 100% width...
Also, I want the same affect for a lighthouse image that I would like to put together...Like the light from the lighhouse is really bright and a focal
point.
Any help?
thx
MikeThere's a multitude of ways to draw flares. But let's explore the Flare Tool a bit more. After all, it's been sitting there occupying primary tool space in the Toolbox for years; might as well use it in the rare times you have occasion for it. To get a sense of the behavior, try the following exercise.
(The following assumes a CMYK document.):
Additional tips:
Like so many Illustrator features, tweaking the settings in the Flare Tool's stupid modal dialog is excruciatingly tedious. Before clicking to create the Flare you are going to adjust, go to the View menu and Hide Edges. Turn on the Preview checkbox in the dialog. Now you'll be able to tell what your adjustments are making are doing, without Illustrator's annoying highlighting of every path in a selected Group. (Absolutely hideous interface. I despise this program!)
Once you finallyget a Flare that you find useful, drag it and drop it into the Symbols Palette. Then save the Symbol Library somewhere for safe keeping, naming it UsefulFlares. Next time you work with Flares, load the library, even if you need a different Flare. When you manage to create another Flare you find useful, make it a Symbol, and export the Symbol Library again. (Do the same kind of thing with Brushes.)
Flares stored as Symbols, of course, can also be colorized somewhat by using the Symbol Stainer. That's a quick way to add a little color variance to tiny flares used as stars. But it's rather unpredictable due to the Screen Opacity Mode.
Don't be afraid to use two different Flares together. Store them together in the same Symbol.
The highlights of the screw threads on the bulbs are just an ArtBrush made from an expanded radial black-to-white grad, applied off-center to a circle. The ArtBrush is frequently useful for specular lights on cylindrical surfaces. The Brush's colorization mode is set to Hue Shift. (When expanding the grad, remember: There's no need to go nuts with the number of steps. 10 is usually a gracious plenty.) Each screw thread is just a single curved path with two Strokes: A thick black stroke with rounded end caps and an added stroke for the highlight brush.
JET -
How can I create a simple chat function in a mobile app for iOS and Android
I am wondering how can I create a chat function in my mobile app creating in AIR and Flex. The chat should be similar to the one in WhatsApp.
Do you know some possible solutions?
Thank you in advance!To enable chat messages, you need a server. The kind of server depends on the application. Do you want to create a chat like application like WhatsApp, where the server pushes messages without an active connection? Or do you have some sort of online game, where chat messages can only be transferred when the client is connected already?
I have an online game where clients are connected to a Java server at all time. From there it is pretty straight forward:
2 textfields:
- 1 line textfield for input messages
- multi-line textfield for chat history. Make sure the textfields autoscrolls to the bottom when the content changes
on enter or button push, send a socket message to the server.
the server broadcasts all messages to all clients that are subscribers of the chat group. -
How can you create a simple insert or update trigger
I am trying to create a simple insert or update trigger to timestamp an xml document when I load it into my XML DB repository but I always get an error trying to compile the trigger.
"ORA-25003: cannot change NEW values for this column type in trigger"
Here is my PL/SQL:
CREATE OR REPLACE TRIGGER "PLCSYSADM"."PLCSYSLOG_TIMESTAMP"
BEFORE
INSERT
OR UPDATE ON "PLCSYSADM"."PLCSYSLOG"
FOR EACH ROW BEGIN
:new.sys_nc_rowinfo$ := xmltype('<datestamp>' || SYSDATE || '</datestamp>');
END;
Does anyone have an example that works ?
Thanks in advance
Niels Montananahttp://developer.apple.com/referencelibrary/HardwareDrivers/idxUSB-date.html
-
How do I create a simple "prize draw" program?
Hey, I'd like to create a simple "prize draw" program
that randomly selects a name (or number) from a list of names, I'd like it to be my own custom version. For a programmer this is probably the easiest thing but I'm new to programming (beginner), don't eve know if I'm in the right subcategory (flash). Is there a tutorial or something somewhere that you guys think could help me out, please?Create the list as an array and use the Math methods to randomly pick one of the values from the array.
var prizeArray = new Array("name1","name2");
var drawnPrize = prizeArray[Math.floor(Math.random()*prizeArray.length)];
trace(drawnPrize);
If you don't know if you should be using Flash, then you probably don't want to be looking for help until you figure out what you intend to do for your custom design. -
How do I link web pages in a Spry Image Slideshow using Dreamweaver CS5?
I have used the Widget Browser to create the spry image slideshow and would like to link the large image displayed to a webpage? Is there any code or easy way to link the slideshow images to webpages?
Thanks in advance for any help!Hans-G; thanks for the code. I am not sure where to place the code. When I insert the widget spry image slideshow, I get the following below. Where shall I place the code, thanks again:
<ul id="ImageSlideShow_3" title="Donald Booth Photography">
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
<li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
</ul> -
How can i create a 3 column webpage using Dreamweaver MX?
Hello,
I was able to create a website with 1 column pages using Dreamweaver MX. I have about 5 pages. I want to add more content to each page; the only way I can do that is to add more columns per page.
I have tried many times but just not getting done. Is there a tutorial on how to do this? What buttons to press?
Regards
rkHi dear fdfdeedfas,
I propose we give that thing a little bit from a philosophical and relaxed view. I've decided at that time for a DW CS5, what was as I know now a small advantage for me. You got somewhere else an advantage, I'm sure. In the end, everything balances out.
To make it pragmatically, I suggest to look around at DW support, possibly via chat, on what terms you can upgrade. You probably have already found the links to it, if not I think these one would be the right for more:
http://www.adobe.com/support/dreamweaver/downloads_updaters.html
http://www.adobe.com/downloads/
or, where you can download a free trial of Dreamweaver CS5:
https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver
Good luck
Hans-G. -
Please help! I am having issues with correct placement of slideshow in Dreamweaver CS5.5?
Hello, I am using Easyrotator for a slideshow in Dreamweaver. I am under the gun as I just had a death in the family, so I had to take a lot of time off. The slideshow works fine, but not together in Dreamweaver CS.5. I want to insert it underneath my title which is the name and photo of the company, but above the rest of the pages content. I have tried several frustrating attempts and to no avail. I am a designer and have really no experience with coding. I can put up what I have if that makes it easier. Thank you so much!
Hi
We need to see ALL your code to solve your issue quickly and accurately without a lot of guessing and questions back-and-forth.
Just rename a copy of your problem page (such as "test.html") and upload it to your server, in whatever folder the original page was located, and simply post a link in the Forum and tell us your problem.
This saves you having to cut and paste miles of code into the Forum for the page and all the dependent CSS, JS etc. files.and saves us from having to recreate all your files, find your images and then repair your code and test the solution for you.
I trust this is helpful.
Maybe you are looking for
-
Windows 7 and Networks with High Latency
We are currently trying to rollout Windows 7 on our network to replace XP but have encountered an issue whereby we have remote clients that access the network over high-latency satallite links (BGAN and Vocality/Satellite). The latency of the links (
-
Problem acccessing alertinbox or alert-configuration in RWB
Hi forum, I have a problem acccessing alertinbox or alert-configuration in RWB, because, whenever i click the button "alertinbox" or "alert-configuration" it gives an BSP error page: <b>Business Server Page (BSP) error Calling the BSP page was termin
-
Daisy-chaining Thunderbolt and Mini DisplayPort
I have a 13-inch MacBook Pro (Early 2011), i7. In the future, would it be possible to daisy-chain a Thunderbolt-compatible product like the Echo Express (http://bit.ly/pTlDFr) with a monitor that only has DisplayPort, HDMI, and DVI (http://amzn.to/no
-
Triple monitor: Sapphire HD5670 512MB (*non* eyefinity version)
Those reading will know that, in order to have up to 3 displays showing content in a single graphics card, if it's an AMD card then you need a certain feature known as EyeFinity. In particular, I am talking about tihs card: http://www.google.co.uk/pr
-
I can not see pictures taken today or in the moment at the camera roll?
take a picture and can't see it in camera roll later, or in any albume