slide em js

[mil_33 0]

Olá a todos é a primeira vez que tenho a honra de estar nesse forum, e venho por meio deste pedir uma ajuda referente a uma

transição de imagens que estou colocando no meu site.

1- As imagens só mudam quanto eu clico nos botões, queria ajuda para que as imagens rodassem automaticamente.

O código que estou usando é esse.

 

Essa e primeira parte do script:

 

// The speed of the fade transition between backgrounds in milliseconds (1000 = 1 second)

speed = 1250,

 

// The speed of the fade transition to hide the website

fadeOutSpeed = 1000,

 

// The speed of the fade transition to show the website

fadeInSpeed = 1000,

 

// Should the current background be saved across pages in a cookie?

save = true,

 

// Should the cache be used for faster image loading?

preload = true,

 

e depois vem essa:

 

$(document).ready(function() {

 

$.fullscreen({

backgrounds: backgrounds,

speed: speed,

fadeOutSpeed: fadeOutSpeed,

fadeInSpeed: fadeInSpeed,

save: save,

preload: preload,

 

});

 

Queria saber como coloco autoplay nesse código e se isso é possivel??

 

Desde já agradeço!!

Abraços a todos

[0cool 0]

Este é o code configurativo do plugin, poste o plugin que esta utilizando.

[mil_33 0]

Este é o code configurativo do plugin, poste o plugin que esta utilizando.

Por acaso e esse o código desculpe minha ignorância,é que não entendo muito de js...

 

/**

* Full screen background plugin

*

* Copyright 2011 ThemeCatcher.net

* All rights reserved.

*/

;(function($, window) {

var

 

// Fullscreen background default settings

defaults = {

speed: 1250, // Speed of the fade transition between background images

fadeOutSpeed: 1000, // Speed that the website fades out

fadeInSpeed: 1000, // Speed that the website fades in

closeFadeInSpeed: 1000, // Speed that the close button fades in

fadeIE: false, // Whether or not to fade the website in IE

preload: true, // Whether or not to preload images

save: true // Whether or not to save the current background across pages

},

 

// Cache some common jQuery objects

$outer,

$controls,

$next,

$prev,

$close,

$stage,

$image,

$overlay,

$loading,

 

$window = $(window),

isIE = $.browser.msie && !$.support.opacity,

 

backgrounds,

imageCache = [],

imageRatio,

bodyOverflow,

index = 0,

active = false,

settings,

fullscreen;

 

// Cache the images with given indices

function cache()

{

$.each(arguments, function(i, cacheIndex) {

if (typeof imageCache[cacheIndex] === 'undefined') {

imageCache[cacheIndex] = document.createElement('img');

imageCache[cacheIndex].src = backgrounds[cacheIndex];

}

});

}

 

// Initialisation

function init() {

// Create the div structure

$outer = $('<div class="fullscreen-outer"></div>').append(

$overlay = $('<div class="fullscreen-overlay"></div>').append(

$loading = $('<div class="fullscreen-loading"></div>')

),

$stage = $('<div class="fullscreen-stage"></div>')

);

 

$controls = $('<div class="fullscreen-controls"></div>').append(

$close = $('<div class="fullscreen-close"></div>'),

$next = $('<div class="fullscreen-next"></div>'),

$prev = $('<div class="fullscreen-prev"></div>')

);

 

if (backgrounds.length > 1) {

$next.add($prev).show();

}

 

// Bind the next button to load the next image

$next.click(function() {

if (!active) {

fullscreen.next();

} else {

return false;

}

});

 

// Bind the next button to load the next image

$prev.click(function() {

if (!active) {

fullscreen.prev();

} else {

return false;

}

});

 

// Bind the close button to close it

$close.click(fullscreen.close);

 

$('body').prepend($outer).append($controls);

bodyOverflow = $('body').css('overflow');

 

$('#minimise-button').click(function(e) {

e.preventDefault();

$('body').css('overflow', 'hidden');

$('div.outside').fadeOut(settings.fadeOutSpeed).hide(0, function() {

$('.fullscreen-close').fadeIn(settings.closeFadeInSpeed);

});

$window.resize();

});

 

$window.resize(windowResize);

 

prepare();

};

 

// Prepare the first image to be shown

function prepare()

{

if (settings.save) {

// Check for the saved background cookie to override the default

var savedBackground = $.cookie('stormSavedBackground');

for(var i = 0; i < backgrounds.length; i++) {

if (i == savedBackground) {

index = i;

break;

}

}

}

 

if (backgrounds.length > 1) {

$next.add($prev).show();

}

 

// Fade in the first image, then cache one next image and one previous image

load(function() {

if (settings.preload) {

cache((index == (backgrounds.length - 1)) ? 0 : index + 1, (index == 0) ? backgrounds.length - 1 : index - 1);

}

});

}

 

// Load the current image

function load(callback) {

var image = document.createElement('img');

$image = $(image);

$image.load(function() {

$image.unbind('load');

setTimeout(function() { // Chrome will sometimes report a 0 by 0 size if there isn't pause in execution

imageRatio = image.height / image.width;

windowResize(function() {

$loading.hide();

$stage.empty().append($image).animate({ opacity: 'show' }, {

duration: settings.speed

});

 

active = false;

 

if (typeof callback === 'function') {

callback.call();

}

});

}, 1);

});

 

$stage.hide();

$loading.show();

active = true;

setTimeout(function() { // Opera 10.6+ will sometimes load the src before the onload function is set, so wait 1ms

$image.attr('src', backgrounds[index]);

}, 1);

};

 

// Resize the current image to set dimensions on window resize

function windowResize(callback)

{

if ($image) {

var windowWidth = $window.width(),

windowHeight = $window.height();

 

if ((windowHeight / windowWidth) > imageRatio) {

$image.height(windowHeight).width(windowHeight / imageRatio);

} else {

$image.width(windowWidth).height(windowWidth * imageRatio);

}

 

$image.css({

left: ((windowWidth - $image.width()) / 2) + 'px',

top: ((windowHeight - $image.height()) / 2) + 'px'

});

 

if (typeof callback === 'function') {

callback.call();

}

}

}

 

 

fullscreen = $.fullscreen = function(options) {

settings = $.extend({}, defaults, options || {});

 

backgrounds = settings.backgrounds;

 

if (isIE && !settings.fadeIE) {

settings.fadeOutSpeed = 0;

settings.fadeInSpeed = 0;

settings.closeFadeInSpeed = 0;

}

 

init();

};

 

fullscreen.close = function() {

$('.fullscreen-close').hide();

$('div.outside').fadeIn(settings.fadeInSpeed);

$('body').css('overflow', bodyOverflow);

$(window).resize();

};

 

fullscreen.next = function() {

index = (index == (backgrounds.length - 1)) ? 0 : index + 1;

load(function() {

if (settings.preload) {

cache((index == (backgrounds.length - 1)) ? 0 : index + 1); // Cache the next next image

}

 

if (settings.save) {

$.cookie('stormSavedBackground', index, {expires: 365});

}

});

};

 

fullscreen.prev = function() {

index = (index == 0) ? backgrounds.length - 1 : index - 1;

load(function() {

if (settings.preload) {

cache((index == 0) ? backgrounds.length - 1 : index - 1); // Cache the next previous image

}

 

if (settings.save) {

$.cookie('stormSavedBackground', index, {expires: 365});

}

});

};

 

$(document).ready(function() {

if (typeof window.preload === 'function') {

window.preload([

'images/rightarrow1.png',

'images/leftarrow1.png',

'images/close.png',

'images/close1.png'

]);

}

});

 

$(window).load(function() {

// Preload one next image and one previous image

if (settings.preload) {

var previousIndex = (index == 0) ? backgrounds.length - 1 : index - 1;

var nextIndex = (index == (backgrounds.length - 1)) ? 0 : index + 1;

cache(previousIndex, nextIndex);

}

});

})(jQuery, window);

[0cool 0]

Este é um exemplo...

 

 

$(document).ready(function() {

$.fullscreen({
backgrounds: backgrounds,
speed: speed,
fadeOutSpeed: fadeOutSpeed,
fadeInSpeed: fadeInSpeed,
save: save,
preload: preload,

});

 

você tem que definir os valores....

 

coloque assim

 

$(document).ready(function() {

$.fullscreen({
backgrounds: backgrounds,
speed: 1250,
fadeOutSpeed: 1000,
fadeInSpeed: 1000,
save: true,
preload: true,

});

[mil_33 0]

Só estou tendo problemas com "image1.jpg"

porque as imagens que chamo vem da pasta backgrounds

então para funcionar teria que fazer assim

 

"backgrounds/image1.jpg"

mas mesmo assim não funcionou

quando coloco dessa maneira que citei acima as imagens não carregam.

 

mas quando deixo apenas assim

backgrounds:backgrounds,

 

as imagens aparecem clicando nos botes prev e next, mas sem as transições e o "autoplay"

[0cool 0]

O autoplay é definido por essa variavel

 

speed: 1250,

 

Me passe aonde pegou este script para eu baixar e testar aqui.