Slideshow in Dreamweaver
Help!
I want to put a slideshow into a webpage in DW.
I don't want any particularly fancy options, such as music playing.
I would like a thumbnail strip underneath/to the side, an autoplay option, and the ability for the user to select an image to view.
I have found a lot of info and suggested add-ons on the web. I have also looked at tutorials in various programs ...
But;
I don't know which program I should be looking at!
I've looked at a lot of basic or out of date info.
Or it references a program or add-on I need to buy.
I have the Master Collection C55, so have flash, fireworks, etc. I don't have muse.
I will buy an add-on if necessary, but given how much I paid for the Adobe suite, most of which I don't use, I am hoping there is an option somewhere.
Could someone please point me in a right direction;
What program to do the slideshow in
How to embed in in the webpage (eg types of files).
Many thanks!
For anyone with the same issue;
DW plug in (once installed, very simple to use);
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2396 529
Why don't DW publicise this? - life would have been so simple if they did.
Or if you want the JQuery option, this was a good source of options;
http://www.tripwiremagazine.com/2012/12/jquery-slider.html
Still too many options though (80 in this version), and none of them are particularly clear as to where to put the code (eg this on CSS etc). It can be worked out, but I spent SO much time here, looking at the options (and on other options), and then realised it was infinitely easier to go with the plug-in.
Similar Messages
-
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. -
I am trying to create a slideshow of images for a client's
home page. (Would like to avoid using Flash.) I am fairly new to
web programming, but have basic knowledge. I have created a
slideshow using "Insert", "Media" and "Image Viewer" from the
Dreamweaver menu bar. (I learned this through the help of the
tutorial found here:
http://revver.com/video/652023/dreamweaver-tutorials-create-a-slideshow-using-dreamweaver/ )
This seems to have worked, however, I have a white background
that I can't seem to figure out. (I have played with the "Flash
Elements" in the sidebar...)
I also received an Adobe Flash Player Security message that
says something like:
"Adobe Flash Player has stopped a potentially unsafe
operation... slideshow.swf is trying to communicate with this
internet-enabled location: macromedia.com"
I'm not quite sure where to go from here... Any help would be
appreciated. Thanks!Hi
I like many others here advocate and use
http://www.projectseven.com/
all
sorts. Really worth looking at the site for menus, slide
shows and
templates. Might not be the cheapest in the world but all
thier products
work and the backup is as good as on this forum.
As for the slide show take a look at
http://www.projectseven.com/products/galleries/ssm/index.htm
HTH
Ian
[email protected]
http://www.edwards-micros.co.uk -
Integration of a Fireworks CS4 Generated Slideshow Into Dreamweaver CS4
Hi,
I'm new to this forum and this is my first post. I am no dreamweaver expert so I came to you guys for help.
I'm making a layout in photoshop that is going to be exported to dreamweaver. The thing is I want a flash slideshow to be integrated into the layout. But in a way that its is partially covered with a Layer.
You will understand if you see the image below.
http://www.mediafire.com/?sharekey=4...75f6 e8ebb871
I want it to be in the top right corner. I think I can make the flash slideshow no prob, but how to get it there I have no idea.
I thought maybe I could add a layer in Fireworks for the section covering the slideshow (I dont know if thats possible) and then leave the space in photoshop blank. Then I could maybe import the slideshow to dreamweaver. Can I do that? and how? or is there a simpler way?
(BTW I am slicing the Photoshop layout to export)
I hope I made some sense.
Thanks in advance.Hello again Pziecina, just wanted to say a very quick thank you. I think I can get the slideshow to work if I remake parts of my site, but I have 5 assignments on the go and thats not really feasible right now, but what really interested me was the links you posted yesterday regarding CSS. As mentioned I have 5 live assignments and have been spending my mornings/afternoons/evenings whittling them down, and when I posted here yesterday I was a little worn out, and my focus was not what it could, or should be. But late last night I took an hours break and had a proper look at the CSS tutorials you posted, and would like to say a very big THANKYOU, although its a bit off topic, I was a little apprehensive of CSS, but one hour into the first tutorial and Im hooked, thats not to say Im anywhere near proficient, but really enjoyed myself following the tutorial, (even though it was at the expense of assignment time ), so, very glad I came here with my slideshow problem, and thanks again
-
Slideshow using dreamweaver CS6
Have received advice here and created a slideshow using jQuery Cycle2. Loaded own images and working fine on a dreamweaver blank page.
When I load onto a fill page as a banner heading the slideshow reverts to 3 or 4 separate images. Any ideas please?Sorry. Should have come back earlier. Any chance you could look at code in
these two attachments and tell me why the' letters for baneer ' works and
yet the identical (as far as I can see) 'using find' doesn't go through any
transition. I think I have followed the three points made below.
Thanks and apologies,
NB
In a message dated 04/11/2013 18:59:39 GMT Standard Time,
[email protected] writes:
Re: slideshow using dreamweaver CS6
created by Nancy O. (http://forums.adobe.com/people/Nancy+O.) in
Dreamweaver support forum - View the full discussion
(http://forums.adobe.com/message/5813956#5813956) -
How do I build a slideshow in Dreamweaver
Trying to build a slideshow in Dreamweaver. The tutorials on line talk about widgets but I can't seem to figure out where and how to install them. What am I missing?
Hi Anthony,
Look at the Categories for Slideshows in Dreamweaver. There are a number of discussions on this topic that can help you.
One such discussion: Re: Dreamweaver CS6 fluid grid with slideshow
Thanks,
Preran -
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 -
CT Slideshow for Dreamweaver 8
I have been trying to download and open the CT Slideshow for
Dreamweaver but am getting the message that the extension is
invalid can anyone help please the link is
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1165 474#
Thanks TerryTJEX10 wrote:
> I have been trying to download and open the CT Slideshow
for Dreamweaver but am
> getting the message that the extension is invalid can
anyone help please the
> link is
>
>
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&
> extid=1165474#
Installed just fine for me in CS4. For some reason on
occasion the downloads from the exchange get corrupted somehow. One
thing that has worked for others is to download the extension
again, as well as using a different browser to download the
extension.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
Build a slideshow in Dreamweaver CC (was: slideshow)
How do I build a slideshow in dreamweaver cc using fluid grid layout? I only want one window where it will contain 5 images. In mobile view, change by using arrows. In tablet and desktop, they change on their own. Can anyone help?
Look at jQuery Cycle2. It's responsive with lots of customizable options.
http://jquery.malsup.com/cycle2/
http://jquery.malsup.com/cycle2/demo/
Nancy O. -
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 -
Import Fireworks slideshow to Dreamweaver page
Hi,
I created a photo gallery (slideshow) in Fireworks CS4 and everything is working smoothly. Now I want to add this slideshow to my Dreamweaver page BUT I am new to this and I don't know how to include it.
I noticed that depending on the type of fireworks player it creates different files (html, swf). I used the FW slideshow template: Player - Black (Flash Plug In not required) and it created an index.html file.
How can I add the index.html page to my website template? I want for it to show after my navigation bar etc.. I don't want it in a seperate file but include it to my PhotoGallery.html page.
I also tried different players and I can't get for it to load. SWF files do not play when i check it in LiveView.
If someone can help me with this I would appreciate it. I have been struggling for a day now and I can't get it to work with any type of player.
Thanks in advance!Thanks for your reply. I did try the copy and pasting before contacting this forum and it doesn't work.
I would appreciate if someone had a tutorial on this and thanks for asking someone to post this.
I'm new to the Adobe world and I'm liking it! There are so many features in the software that I just want to make sure that I learn the proper way to incorporate the 'objects'.
In the mean time what I have done is created an iframe.
<iframe src="otherpage.html"/>
This is working for now but I'm sure there is a better way!! -
Lightroom Slideshow into Dreamweaver?
How do you embed a slideshow made in Lightroom and put into a page in Dreamweaver?
What is your web development experience?
Which slideshow are you planning to use?
We can serve you best if you start by setting up some web hosting for yourself.
With that in place, you can put your project files on your server and post a link to your pages as they develop. -
Lightroom slideshows in dreamweaver
I'm new to Lightroom. After creating a slideshow, how can I use it in my website in Dreamweaver?
I've no experience with using Lightroom, but have you looked at these help docs:
http://help.adobe.com/en_US/Lightroom/2.0/WSE7BC7E4B-BC7A-4c05-994A-A6F74113B819.html
There could be something there that helps you get it working :-)
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap -
Import fireworks cs3 slideshow into Dreamweaver 8
Hello, Im trying to get a slideshow created in Fireworks cs3 to work in Dreamweaver 8. I cant seem to get the html file it generates to slot into a Dreamweaver page. When I double click on the slideshow html file in Dreamweaver it opens a page that looks as though nothing is on it, just a lot of shading and a missing image, but tappin F12 to view in browser shows the slideshow works, but how do I get it into a page in Dreamweaver? Thanks in advance
Hello again Pziecina, just wanted to say a very quick thank you. I think I can get the slideshow to work if I remake parts of my site, but I have 5 assignments on the go and thats not really feasible right now, but what really interested me was the links you posted yesterday regarding CSS. As mentioned I have 5 live assignments and have been spending my mornings/afternoons/evenings whittling them down, and when I posted here yesterday I was a little worn out, and my focus was not what it could, or should be. But late last night I took an hours break and had a proper look at the CSS tutorials you posted, and would like to say a very big THANKYOU, although its a bit off topic, I was a little apprehensive of CSS, but one hour into the first tutorial and Im hooked, thats not to say Im anywhere near proficient, but really enjoyed myself following the tutorial, (even though it was at the expense of assignment time ), so, very glad I came here with my slideshow problem, and thanks again
-
How to place Photobucket slideshow in Dreamweaver
Keeping in mind that I'm learning website design through Dreamweaver for Dummies and am using design view, can anyone help me place this? The picture below is a mock up I did in Adobe Indesign...of course there is still lots missing like the buttons, etc., but this shows what the design itself I want to work with. The large coral photo in the middle would be a photo slideshow of the corals we farm and offer for sale. I thought it would be easier to change the pics daily in Photobucket, or am I missing a better alternative? Thanks for any help you can offer. I've been on this for months and just need to get it done before the fall selling season.
Hello Aris,
here are for example these http://jquery.malsup.com/cycle/, http://jonraasch.com/blog/a-simple-jquery-slideshow, http://floatboxjs.com/demo aso.
And don't forget "FlexSlider" from Adobe's Widget Browser. Do you know how you can get it?
Hans-Günter -
Creating a Slideshow in Dreamweaver or Adobe Bridge?
Hi there
I was wondering if anyone has any advice on creating a slideshow?
I've created the basic pages pages for my site in dreamweaver, but I'm reading conflicting information on how to create a slideshow
It would be a homepage continuous slideshow, not one that is controlled, it just keeps sliding images across:
This sort of slideshow I'm looking to create
http://www.sotostore.com/
http://www.vooberlin.com/page/home
Do I need to create this in bridge? Or somewhere else? Or in Dreamweaver?
If it os in bridge, how do I then put this into my dreamweaver site?
Does anyone have any step by step instructions?
This is my second site, so I know what I'm doing, but I'm still very new at it
Thanks in advanceHi there and welcome,
Since you mentioned that you're very new to web and dreamweaver, I would suggest looking up gallery plugin solutions. There's lots of free galleries out there that you could easily drop your own content into that would save you time. : ) Here's some great examples:
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
However, there are ways to create your own. This tutorial by David Powers is really great for using CSS to do transitions on content. I would apply the same technique he used here in your own gallery/slideshow.
http://www.adobe.com/devnet/dreamweaver/articles/css-transitions-panel.html
Have you tried using Adobe Edge? This is the new HTML5/CSS3/Javascript publishing application and it is very simple to create a gallery in Adobe Edge. It's currently free for download because it's still in prerelease. Here's a tutorial that might be a little dated as far as UI goes (again the prerelease versions tend to change very quickly with their UI development) but you should be able to apply the techniques to the most recent release:
http://www.youtube.com/watch?v=lzsfWx8AQpg
Download Edge here:
http://edge.adobe.com/
I hope this helps!
Maybe you are looking for
-
HT5620 How can I set up two separate accounts on one iPad?
How can I set up two separate accounts on one shared iPad?
-
How can I execute a java class with arguments from an air application built from mxml?
I have an mxml application. It has a button, and when that button select event occurs, I want my mxml air app to pass arguments to a java class I have built, which resides in a package path on my system. I need to be able to pass several arguments to
-
Two cameras at the same time Lab view (NI MAX)
I have two similar Point Grey Firefly MV cameras. I need to use them simultaneously in LabVIEW, but NI MAX only detects one at the same time (the two cameras are detected properly separately). I think that NI MAX identifies both camera as the same ca
-
White background of extracted image prints in pdf
Hi'ya Using the "Extract" filter to crop a photo in Photoshop 7.0 allowed me to extract a person from a photo and it was saved as a .psd file. In my InDesign 2.0.1 layout, the psd file looks great and as it was an extracted image, I can put things in
-
Error to create link between form and calendar
I use Portal 3.0.8. I imported tutorial sucessfuly to my database 8.1.7. On step 10 of secetion 3.4.5 on Building Portal documentation. The SQL Query: select e.event_start_date the_date, e.event_title the_name, PORTAL30.WWV_APP_MODULE.link?p_arg_name