Photos fading

Photos fading altho I'm using genuine HP ink on HP Advanced photo paper on my HP Photosmart 3210 AIO. I thought this combination was to produce at least "near archive" quality that would last more than a year or two. By comparison I have photos printed with refilled cartridges and no name photo paper displayed side by side that show less fading.

Hi
Check this video out, explains it really well and easy to follow
http://www.youtube.com/watch?v=DxBSWaGkdFk&feature=PlayList&p=743FE52951ACB46E&playnext=1& playnext_from=PL&index=85

Similar Messages

Simple question, how to get photos fading in and out

Sorry, don't use Flash much at all, I'm trying to do something that's probably very simple. This question has probably been answered before but I'm not even really sure what keywords to search for, I tried slideshow and a glut of irrelevant info came up.
I want to create a swf of 5 photos that fade into each other. For example, black background, first photo fades up from alpha 0 to alpha 100 in one second, stays on screen for 4 seconds, then fades back to alpha 0 while the next photo fades up, etc, then the 5th photo fades back into the 1st photo and it loops.
What's the best, easiest way to accomplish this with cs4?
Also, if the jpgs are 980 x650 pixels and approx. 70 kb apiece, will I need a preloader if I'm going to use the swf as a header to my site? If so, is there a simple, plug n play preloader I can use?
Thanks so much for the help, it can be so frustrating (and time consuming) trying to muddle my way through this myself.

Hi
Check this video out, explains it really well and easy to follow
http://www.youtube.com/watch?v=DxBSWaGkdFk&feature=PlayList&p=743FE52951ACB46E&playnext=1& playnext_from=PL&index=85

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:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<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

Flash Photo Gallery Question

Hello,
I am a photographer interested in designing a photo gallery
website.My question is how are the special effects created in Flash
for when a thumbnail is clicked and the photo downloads into the
picture viewer? (such as the photo fading in , the photo is
assembled from small blocks, the photo downloads from left to
right, the photo downloads after a flash of light) Is there a name
for these effects? Thank you so much, Wendy

Wonderwendy wrote:
> Hello,
> I am a photographer interested in designing a photo
gallery website.My
> question is how are the special effects created in Flash
for when a thumbnail
> is clicked and the photo downloads into the picture
viewer? (such as the photo
> fading in , the photo is assembled from small blocks,
the photo downloads from
> left to right, the photo downloads after a flash of
light) Is there a name for
> these effects? Thank you so much, Jim
These are some complex components/files you can get free off
the net:
http://www.sephiroth.it/file_detail.php?id=139
ImageGallery 3
http://www.sephiroth.it/file_detail.php?id=135
Photo Album
http://www.sephiroth.it/file_detail.php?id=124
Image Fader
This particular sample is the closets to what you are looking
for. It is XML
driven so all the files information can be edited w/o
changing the Flash movie.
You can define 9 transitions along the image name and the
rest happens automatically.
There are many more samples online, search for stuff like
"flash photo gallery"
or "flash gallery", some free some shareware but definitely
plenty.
Best Regards
Urami
!!!!!!! Merry Christmas !!!!!!!
<urami>
If you want to mail me - DO NOT LAUGH AT MY ADDRESS
</urami>

Photos in FCE; export from Aperture in target size?

hi all.
I'm planning to place photos from Aperture into my FCE project, with the photos fading from one to the next. they won't be full screen, less than half. to get the best final quality, do I need to sharpen and export from Aperture so that the photos are placed within the FCE project at 100% without scaling?
cheers,
Gregory

Hi Frank.
Thanks for the response.
Agreed, the pertinent question is why can't my colleague edit the JPG exported by Aperture. It's probably also worth pointing out, the same problem occurs with JPGs exported from iPhoto.
The Windows software usually plays nicely with JPGs by all acounts, just not the ones I send - which I do via eMail or my public space on Mobile Me incidently.
So, another key question is: all settings being equal (color profile, quality, etc.) are the JPGs as produced by iPhoto and Aperture indistinguishable from those produced by other apps on other platforms - i.e. does the use of JPG enforce a common standard?
If that is the case, I suspect ours might be a permissions issue.
According to the Microsoft support page on editing in Windows Live Photo Gallery, the inability to edit a picture is commonly caused by unsupported file type, or read-only attribute set on the file.
Unfortunately, he and I are not in the same place, and he's not particularly au-fait with this type of problem solving. Hence, before involving him, I'd like to know:
1. it's possible (i.e. someone else does it), and,
2. what's involved (at my end and/or his).
Thanks again,
PB

I can't do photo merging or photo blending at all in Photoshop elements8

I followed all the steps in photoblending like placing one photo over the other, clicking on the adjustment layer, using the gradient tool, clicking Cntrol G (or using a paintbrush to brush away the first layer)... nothing happens. I must have done this 20 times in a span of 2 weeks..... I need help. Thanks.

I take it you are attempting to make a clipping mask. Back when I first learned how to use Elements, I had problems learning this concept so don't feel bad.
Masking rules to learn.
White paint reveals...shows the layer's full effect.
Black paint masks...hides the layer's full effect.
Gray paint is semi-transparent...partially shows layer's effect the amount transparency depends on the shade of gray with lighter shades being more opaque and darker shades more transparent. Think feathering....
Let's do this as an exercise...
Prep.
Open a photo file. Duplicate the file and close your original so we are working on a copy. Double click you background layer's lock icon in the layers palette and convert the background layer to a regular layer. (Alternately, click the lock icon...continue to hold in the click...and drag the lock to the trash can.)
Now, you should see an unlocked layer in the layers palette. This will be our start point.
1. Create a solid color fill adjustment layer and click okay to accept it. Click on the adjustment layer and while holding in the mouse button drag it down in the layers palette so that it is below your photo layer.
2. Target (click on your photo layer) and press ctrl + G to clip photo to adjustment layer. Alternately, you can press the alt key and hover over the line between the adjustment layer and the photo. You should notice the icon becomes an arrow with two rings. Click the line.
Nothing happened as the mask is white. As part of the exercise, click on the adjustment layer. Notice that a thin black outline appears around the mask. This indicates the mask is targeted. Press ctrl + I to invert the mask. You should now see a checkerboard pattern. This indicates your image is masked...hidden. It is completely hidden because the mask is filled with black. Grab the paintbrush tool. Make sure that the tool is set to Normal mode and is set to 100% opacity in the options bar. Set your foreground color to white. Paint a line in your mask. Notice that where you paint the line your image is visible.
Okay let's fill the mask with white to reveal your image again. Use paint bucket to dump white paint into the mask. Your photo should now be fully visible.
Now let's set up your gradient tool.
Press D to set the toolbox color chips to default black and white. Press X to swap the color chips so that black is set as the foreground color. Grab the gradient tool. Select the black to transparent gradient preset. (If black to transparent isn't displayed in the gradient window located in the options bar, click gradient window and black to transparent should be second preset.) Make sure transparency box is checked in your options bar. For this particular exercise, make sure the gradient tool is in Normal blend mode and set to 100% opacity. Select the linear gradient style icon (first one...white fade to black) in the options bar.
3. Click on adjustment layer mask. You should notice a thin black line around the mask in the layers palette. This tells you the mask is targeted.
4. Hold in the shift key and drag the gradient in the document. (Holding in the shift key as you drag using the gradient tool keeps the gradient constrained to a straight even line.) Image should now be photo fading the checkerboard pattern...
Note: If you want gradient tool to drag out the black to transparent in the opposite direction check the box in the options bar that says "reverse". If you want to pull more than one gradient...to fade more than one edge change the gradient tool's blend mode to "Multiply blend mode.
Here is a tutorial on using clipping masks.
http://www.photokaboom.com/photography/learn/Photoshop_Elements/layers/layer_groups_clippi ng_masks/1_layer_groups_clipping_masks.htm
Note: The first example in the above link (using the hair) has the adjustment mask over the hair because the hair is the base to the clipping group...levels is increasing the contrast to just the hair. I didn't want that example to mess you up if you were just skimming the article I could see that potentially happening.
Note: I should also point out that you will see tutorials that refer to clipping masks as clipping groups. This is because prior to E8 clipping masks were called clipping groups. From what I understand, Adobe changed the term to make the term the same across product lines. They are the same thing...just different names. The menu commands are also slightly different. In E8+, the menu command is Layer<Create Clipping mask. In versions prior to E8, the menu command is Layer<Group with Previous. I think E8+ still uses the shortcut Ctrl + G to create a clipping mask. If the shortcut doesn't work, use the menu command.

Transitions in Photoshop Elements 9

I'm using Photoshop Elements 9 to create a slideshow. I created a simple slideshow in Photoshop and then exported to Premiere Elements to do some additional editing and add audio. To some of the slides I've added text. However, the transitions don't apply to any of the added text. I've used "fade" and "dip to black"...and with both, these transitions don't work with the text, only the photo itself. Thus, the transitions look jerky with the photos fading...but not the text. Looks very poor. Am I doing something wrong or is it a problem of the program? Is there a work-around?

1- I think you might receive a better answer if you ask (about your problem with the transitions timing on the text added to the photos) in the Premiere Elements forum.
2- Since I can't give you a direct answer- I am suggesting a workaround which would require that you redo most of the work of creating this slide show.
Instead of adding text during the slide show creation process, you would make a copy of the photo file for each photo that you are using in this slideshow -- then for each photo use the TEXT Tool of the Photoshop Elements Editor to add the words to each of the copy photo files. Then make the slide show again using the "copy photo file with the text on the photo" for each image where you use added text.
I know my workaround is a significant amount of work. I definitely recommend experimenting with only a few photos to verify that you can get your desired result. You need to take these tests to whatever will be the media format of your slideshow playback.
If the ultimate destination ofr this slideshow video will be a DVD disc, I recommend using a read/write DVD while you are testing and then using a DVD-R for the final result.

Forte and Right-to-Left Languages

Hi Forte Users,
Could someone share with the group any experience they have regarding
right-to-left languages like Arabic and such? Did someone find a good
solution to this task?
Thank-you very much!
Take care,
Geoff Whittington
To unsubscribe, email '[email protected]' with
'unsubscribe forte-users' as the body of the message.
Searchable thread archive <URL:http://pinehurst.sageit.com/listarchive/>

Thanks Patrick. The xml file is huge and I have read through it (more or less). Not that I could really detect any problem, as I am not sure what I am really looking for. The only thing that looked a bit dodgy is this
<videoFormatOptions>********CYe****3bBkR4lYRaBk*******M***1zk***-FoQ57g*******N************44FmMLE** ***********************14BhNb7VQ5-g****IaBYNKA********************yQqJVPU****2** **0*********-JkQaxb*****E***************-IlBbUt*****E***********E****lkQqNm***** *****ZWNb7V******dhQ4Jn*******QO43mN*******************************0bBYPaI****** **</videoFormatOptions>
Does that look right? All I have is a motion graphics sequence with RTL & LTR languages, is mainly animated text with some photos fading in and out. It is set to be widescreen format.
I am not really sure what to do. I have managed to redo a section again (from start) but then Motion keeps on crashing on me. I think it does not like the combination of LTR and RTL languages.
I can't uninstall and re-install now, as I am in the middle of 3 projects with Motion FCP.
Oh boy, I am in trouble...
h

WOW Slider to add a slideshow to iWeb

I came across WOW slider and wanted to put an automatic starting slide show into my site, however I am having some troubles and hope you may be able to help.
I have created the slideshow and now want to place it WITHIN a page I already have on my site. This position is exactly the same place as the original video I have (see http://www.senkkifurniture.com.au/collection.html).
I am following the help page Part 7 as it reads below http://wowslider.com/index.html#support)
+Add WOW Slider inside your own page.+
+WOW Slider generates a special code. You can paste it in any place on your page where you want to add image slider.+
+ * Export your photo slider using WOW Slider in any test folder on a local drive.+
+ * Open the generated index.html file in any text editor.+
+ * Copy all code for WOW Slider from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a jquery slider (inside the BODY tag).+
<head>
++
++
+... </head>+
<body>
++
++
...</body>
I am using iWeb to build my website, have an iMac and run OS X 10.6.6. I run Firefox. Wow version 1.3.
I am confused when it comes to “Copy all code for WOW Slider from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a jquery slider (inside the BODY tag).”. I have exported the wow slider to a test folder and opened the index.html. I’ve viewed the html which reads
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
*<title>WOWSlider generated by WOWSlider.com</title>*
*<meta http-equiv="content-type" content="text/html; charset=utf-8" />*
*<meta name="keywords" content="WOW Slider, Image Slider Html, Image Slider In Html" />*
*<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />*
**
*<link rel="stylesheet" type="text/css" href="engine/style.css <view-source:file:///Users/moniqueboseley/Desktop/test/engine/style.css> " media="screen" />*
*<style type="text/css">a#vlb{display:none}</style>*
*<script type="text/javascript" src="engine/jquery.js <view-source:<a class="jive-link-external-small" href="file:///Users/moniqueboseley/Desktop/test/engine/jquery.js>">file:///User s/moniqueboseley/Desktop/test/engine/jquery.js></a> "></script>*
**
</head>
*<body style="background-color:#ffffff">*
**
*<script type="text/javascript" src="engine/script.js <view-source:<a class="jive-link-external-small" href="file:///Users/moniqueboseley/Desktop/test/engine/script.js>">file:///User s/moniqueboseley/Desktop/test/engine/script.js></a> "></script>*
**
</body>
</html>
I have then copied the html above in bold and placed it within a HTML snippet where I want it on my page, pressed apply then uploaded it to the net (see http://www.senkkifurniture.com.au/screen_dump.html). However this is how it comes out http://www.senkkifurniture.com.au/collection_2.html. There are no photos and definitely no slideshow.
I would SO appreciate your help as i am about to pull my hair out.
Thanking you in advance.

Thanks Koeklin & Wyodor your answers have put me one step forward...yay
http://www.senkkifurniture.com.au/collection_2.html
I removed all the #'s from this line koeklin said however the link still seems to be there. I don't want any links, just photos fading from one to another.
When i removed the whole line as in 2a (above in Koeklins answer) and the "a" bit all the images disappeared. Sorry couldn't cut and paste the sections exactly as they turned into links when i previewed it.
Is there anyway to get rid of the wowslider.com on the photo? See http://www.senkkifurniture.com.au/collection_2.html
*Here is the scrips as i have pasted it into my HTML Snippet:*
<head>

<link rel="stylesheet" type="text/css" href="engine/style.css" media="screen" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="engine/jquery.js"></script>

<body style="background-color:#ffffff">

<script type="text/javascript" src="engine/script.js"></script>

<script type="text/javascript">
</script></body>
Thanks again.

Resizing animation and tween movie

hello forumers.
ive made a flash banner 1000x500 with lots of objects tweening etc etc photos fading in and out,and ive being told to resize the banner size to 800x300
but im having trouble when i do that,is there a way to get the everything that ive done into the 800x300 with out having to move all my objects around again and resizing each pic individualy,or do i have to start it from scratch again??
thank you.

If you're using classic tweens, try playing with the Edit Multiple Frames and Free Transform tools.
If you're using new motion, it's a known limitation and more manual for now -- refer to this post: http://flashthusiast.com/2009/10/06/scaling-and-moving-new-motion-tweens-in-flash-cs4/

Instances change automatically

Hello,
I have a very simple Flash movieclip, that contains different
photo's( symbol containing a photo), fading in - fading out one
after the other. Now I made some changes (added some frames) and
for this I deactivated the motion tweens between the fades and the
images.
Now when I reactivate the motion tweens it goes wrong
somewhere in the middle of the photos. When I activate a certain
motion tween, all photos coming later are modified. The instance on
these frames is changed to the one I activated the motion tween
for. Is this a bug or do I miss something ?
If my question is not so clear, please let me know, I can
send you the file to test.
thx
Ike

They lack the edit and update all instances feature, though. Better to create the item in whatever application is appropriate and place it. Update the original, and you'll be asked if you want to update the links.

IOS 7 camera filter

My iOS 7 camera filter won't turn off. All my photos are staying very washed out. I've tried selecting the "none" filter option but nothing changes. Help!

My problem turned out to be that I had selected "Invert Colors" in the General>Accessibility section. When I unselected this, my problem went away.
Another possibility (probably the more likely cause) could be that you've accidentally selected a filter that makes the photos faded. If this is the case, just go to filters and select the center box (labeled "none").

How can I keep a photo image from fading away on my tv using apple tv.

How can I keep a photo image from fading away on my tv using apple tv?

Thanks for you reply. When I paint, I bring up the photo as you suggested. I begin painting. After about 10 minutes or so, the photo goes blank. And, I have to start the process over again to get that same photo. It interrupts the painting process. I think it goes blank due to a sleep function. I have gone into the Apple TV settings and turned off the sleep function. But, this does not seem to work. What can I do to keep the image on the TV screen permanently?

HT4906 As I set up my iCloud, Photo Stream which is faded cannot be chosen

As I setup my iCloud, Photo Stream is faded. I cannot choose the Photo Stream.Why is that?

This is the iPhoto forum. Since you have a PC you should post your question in the iCloud on my PC: iCloud: Apple Support Communities forum.
OT

How to re colour just the faded areas in photos in photoshop elements 10

i have a lot of black and white photos and most of them have just got very faded in just a few spots,how can i re colour just these faded spots?
i have tried to recolour the whole area but but the faded spots are still there !

That's a question for the Photoshop Elements forum, Few users here are familiar with Elements.
Photoshop Elements forum

Photos fading

Similar Messages

Maybe you are looking for