Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
>
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);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,
});
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"
O autoplay é definido por essa variavel
speed: 1250,
Me passe aonde pegou este script para eu baixar e testar aqui.
Este é o code configurativo do plugin, poste o plugin que esta utilizando.