0
J'ai un module Joomla qui affiche des produits dans un diaporama, et je veux le faire jouer automatiquement. J'ai demandé aux développeurs de ce module et m'a dit que ce n'est pas possible, mais je ne peux pas les croire! Donc je vais vous donner maintenant les deux fichiers JS qui créent le diaporama et s'il vous plaît si quelqu'un sait, aidez-moi!Créer un diaporama autoplay
Fichier1
(function($) {
var SmartSlider = function(element, options){
//Defaults are below
var settings = $.extend({}, $.fn.smartSlider.defaults, options);
//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: true
};
//Get this slider
var slider = $(element);
slider.data('smart:vars', vars);
slider.css('position','relative');
slider.addClass('smartSlider');
// var info_products = slider.find('.product_detail');
//Max time for each slide
var max_time_out = Math.max(settings.boxCols * settings.boxRows*20,settings.boxCols * 2*100,settings.slices*50);
//Find our slider children
var kids = slider.find('.background_image').children();
kids.each(function() {
var child = $(this);
//Get img width & height
// var childWidth = child.width();
// if(childWidth == 0) childWidth = child.attr('width');
// if(childWidth == 0 || childWidth==undefined) childWidth = child.find("img").width();
// var childHeight = child.height();
// if(childHeight == 0) childHeight = child.attr('height');
// if(childHeight == 0 || childHeight==undefined) childHeight = child.find("img").height();
childWidth = settings.image_width;
childHeight = settings.image_height;
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('smart-imageLink');
link = child;
}
child = child.find('img:first');
}
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
if (settings.align_image=="right" && slider.width()>slider.parent().width()){
slider.css("right",slider.width()-slider.parent().width());
}
var slider_width = slider.width();
var slider_height = slider.height();
// //If randomStart
// if(settings.randomStart){
// settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
// }
// //Set startSlide
// if(settings.startSlide > 0){
// if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
// vars.currentSlide = settings.startSlide;
// }
//Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
//Set first background
if (settings.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
// //In the words of Super Mario "let's a go!"
var timer = 0;
// if(!settings.manualAdvance && kids.length > 1){
// timer = setInterval(function(){ smartRun(slider, kids, settings, false); }, settings.pauseTime);
// }
//Previous and Next button
$('.navigation_button div.left_button', slider.parent()).bind('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(vars.currentSlide+1).css("display","block"));
smartRun(slider, kids, settings, 'prev');
});
$('.navigation_button div.right_button', slider.parent()).bind('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(vars.currentSlide+1).css("display","block"));
smartRun(slider, kids, settings, 'next');
});
//Change item selected
// //Set initial active link
// $('.navigation_sspro a:eq('+ vars.currentSlide +')', slider).addClass('active');
$('.navigation_sspro div', slider.parent()).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// setTimeout(wait_me,100);
// // slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
vars.currentSlide = $(this).attr("class");
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(parseInt($(this).attr("class"))+1).css("display","block"));
smartRun(slider, kids, settings, 'control');
});
//Change item selected with style bullet
slider.parent().find('div.bullet_button').each(function(index){
$(this).bind("click",function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
vars.currentSlide = index-1;
// $('.info_product .product_detail', slider.parent()).remove();
// $('.info_product', slider.parent()).append(info_products.eq(index).css("display","block"));
smartRun(slider, kids, settings, 'control');
});
});
//Resize height of info product
$('.info_product', slider.parent()).css("height",slider_height);
//Change background of slider
function change_background(){
if (options.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
}
//Event when Animation finishes
slider.bind('smart:animFinished', function(){
change_background();
vars.running = false;
slide_running = false;
//Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
//Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// //Restart the timer
// if(timer == '' && !vars.paused && !settings.manualAdvance){
// timer = setInterval(function(){ smartRun(slider, kids, settings, false); }, settings.pauseTime);
// }
//Trigger the afterChange callback
settings.afterChange.call(this);
});
function start_point(){
slide_running = true;
}
// Add slices for slice animations
var createSlices = function(slider, settings, vars){
if (settings.align_image=="left"){
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'relative',
top:0,
left:0,
height: slider_height
}).appendTo(slider);
}else{
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'absolute',
top:0,
right: 0,
height: slider_height,
// width: vars.currentImage.attr("width")
// width: slider_width
width: vars.currentImage.width()
}).appendTo(slider);
}
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider_width/settings.slices);
if(i == settings.slices - 1){
divWrapper.append(
$('<div class="smart-slice"></div>').css({
left:(sliceWidth*i)+'px',
width:(slider_width-(sliceWidth*i))+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
} else {
divWrapper.append(
$('<div class="smart-slice"></div>').css({
left:(sliceWidth*i)+'px',
width:sliceWidth+'px',
height:'0px',
opacity:'0',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
})
);
}
}
}
// Add boxes for box animations
var createBoxes = function(slider, settings, vars){
if (settings.align_image=="left"){
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position:'relative',
top:0,
left:0
}).appendTo(slider);
}else{
divWrapper= $('<div/>', {
id: 'wrapperImage'+settings.random_time
}).css({
position: 'absolute',
top: 0,
right: 0,
height: slider_height,
// width: vars.currentImage.attr("width")
//boi vi che do none nen phai de che do tren
// width: slider_width
width: vars.currentImage.width()
}).appendTo(slider);
}
var boxWidth = Math.round(slider_width/settings.boxCols);
var boxHeight = Math.round(slider_height/settings.boxRows);
for(var rows = 0; rows < settings.boxRows; rows++){
for(var cols = 0; cols < settings.boxCols; cols++){
if(cols == settings.boxCols-1){
divWrapper.append(
$('<div class="smart-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:(slider_width-(boxWidth*cols))+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
} else {
divWrapper.append(
$('<div class="smart-box"></div>').css({
opacity:0,
left:(boxWidth*cols)+'px',
top:(boxHeight*rows)+'px',
width:boxWidth+'px',
height:boxHeight+'px',
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
})
);
}
}
}
}
// Private run method
var smartRun = function(slider, kids, settings, nudge){
//Get our vars
var vars = slider.data('smart:vars');
// //Trigger the lastSlide callback
// if(vars && (vars.currentSlide == vars.totalSlides - 1)){
// settings.lastSlide.call(this);
// }
// Stop
if((!vars || vars.stop) && !nudge) return false;
//Trigger the beforeChange callback
// settings.beforeChange.call(this);
//Set current background before change
if(!nudge){
alert('co bao jo em biet');
if (settings.align_image=="left"){
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}else{
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
} else {
if(nudge == 'prev'){
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
if(nudge == 'next'){
if (settings.align_image=="left"){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
// }, max_time_out);
}else{
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// setTimeout(function(){
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat right top');
// }, max_time_out);
}
// slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
}
}
vars.currentSlide++;
//Trigger the slideshowEnd callback
if(vars.currentSlide == vars.totalSlides){
vars.currentSlide = 0;
// settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
//Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// //Set active links
// if(settings.controlNav){
// $('.smart-controlNav a', slider).removeClass('active');
// $('.smart-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
// }
//Set active links
// if(settings.controlNav){
$('.navigation_sspro div', slider.parent()).removeClass('active');
$('.navigation_sspro div:eq('+ vars.currentSlide +')', slider.parent()).addClass('active');
// }
// //Process caption
// processCaption(settings);
// Remove any slices from last transition
// $('.smart-slice', slider).remove();
// Remove any boxes from last transition
// $('.smart-box', slider).remove();
$('#wrapperImage'+settings.random_time, slider).remove();
var currentEffect = settings.effect;
//Generate random effect
if(settings.effect == 'random'){
var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
if(currentEffect == undefined) currentEffect = 'fade';
}
//Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') != -1){
var anims = settings.effect.split(',');
currentEffect = anims[Math.floor(Math.random()*(anims.length))];
if(currentEffect == undefined) currentEffect = 'fade';
}
/* //Custom transition as defined by "data-transition" attribute
if(vars.currentImage.attr('data-transition')){
currentEffect = vars.currentImage.attr('data-transition');
} */
//Run effects
vars.running = true;
setTimeout(start_point,10);
if(currentEffect == 'sliceDown' || currentEffect == 'sliceDownRight' || currentEffect == 'sliceDownLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceDownLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
slice.css({ 'top': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'sliceUp' || currentEffect == 'sliceUpRight' || currentEffect == 'sliceUpLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceUpLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
slice.css({ 'bottom': '0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'sliceUpDown' || currentEffect == 'sliceUpDownRight' || currentEffect == 'sliceUpDownLeft'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
var v = 0;
var slices = $('.smart-slice', slider);
if(currentEffect == 'sliceUpDownLeft') slices = $('.smart-slice', slider)._reverse();
slices.each(function(){
var slice = $(this);
if(i == 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
}
else if(currentEffect == 'fold'){
createSlices(slider, settings, vars);
var timeBuff = 0;
var i = 0;
$('.smart-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', height:'100%', width:'0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(currentEffect == 'fade'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': slider_width + 'px'
});
firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('smart:animFinished'); });
}
else if(currentEffect == 'slideInRight'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1'
});
firstSlice.animate({ width: slider_width + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('smart:animFinished'); });
}
else if(currentEffect == 'slideInLeft'){
createSlices(slider, settings, vars);
var firstSlice = $('.smart-slice:first', slider);
firstSlice.css({
'height': '100%',
'width': '0px',
'opacity': '1',
'left': '',
'right': '0px'
});
firstSlice.animate({ width: slider_width + 'px' }, (settings.animSpeed*2), '', function(){
// Reset positioning
firstSlice.css({
'left': '0px',
'right': ''
});
slider.trigger('smart:animFinished');
});
}
else if(currentEffect == 'boxRandom'){
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
var boxes = shuffle($('.smart-box', slider));
boxes.each(function(){
var box = $(this);
if(i == totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
box.animate({ opacity:'1' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 20;
i++;
});
}
else if(currentEffect == 'boxRain' || currentEffect == 'boxRainReverse' || currentEffect == 'boxRainGrow' || currentEffect == 'boxRainGrowReverse'){
createBoxes(slider, settings, vars);
var totalBoxes = settings.boxCols * settings.boxRows;
var i = 0;
var timeBuff = 0;
// Split boxes into 2D array
var rowIndex = 0;
var colIndex = 0;
var box2Darr = new Array();
box2Darr[rowIndex] = new Array();
var boxes = $('.smart-box', slider);
if(currentEffect == 'boxRainReverse' || currentEffect == 'boxRainGrowReverse'){
boxes = $('.smart-box', slider)._reverse();
}
boxes.each(function(){
box2Darr[rowIndex][colIndex] = $(this);
colIndex++;
if(colIndex == settings.boxCols){
rowIndex++;
colIndex = 0;
box2Darr[rowIndex] = new Array();
}
});
// Run animation
for(var cols = 0; cols < (settings.boxCols * 2); cols++){
var prevCol = cols;
for(var rows = 0; rows < settings.boxRows; rows++){
if(prevCol >= 0 && prevCol < settings.boxCols){
/* Due to some weird JS bug with loop vars
being used in setTimeout, this is wrapped
with an anonymous function call */
(function(row, col, time, i, totalBoxes) {
var box = $(box2Darr[row][col]);
var w = box.width();
var h = box.height();
if(currentEffect == 'boxRainGrow' || currentEffect == 'boxRainGrowReverse'){
box.width(0).height(0);
}
if(i == totalBoxes-1){
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('smart:animFinished'); });
}, (100 + time));
} else {
setTimeout(function(){
box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
}, (100 + time));
}
})(rows, prevCol, timeBuff, i, totalBoxes);
i++;
}
prevCol--;
}
timeBuff += 100;
}
}
// alert(timeBuff);
}
// Shuffle an array
var shuffle = function(arr){
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
// For debugging
var trace = function(msg){
if (this.console && typeof console.log != "undefined")
console.log(msg);
}
// Start/Stop
this.stop = function(){
if(!$(element).data('smart:vars').stop){
$(element).data('smart:vars').stop = true;
trace('Stop Slider');
}
}
this.start = function(){
if($(element).data('smart:vars').stop){
$(element).data('smart:vars').stop = false;
trace('Start Slider');
}
}
// //Trigger the afterLoad callback
// settings.afterLoad.call(this);
return this;
};
$.fn.smartSlider = function(options) {
return this.each(function(key, value){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('smartslider')) return element.data('smartslider');
// Pass options to plugin constructor
var smartslider = new SmartSlider(this, options);
// Store plugin object in this element's data
element.data('smartslider', smartslider);
});
};
//Default settings
$.fn.smartSlider.defaults = {
effect : 'random', //'boxRain',
slices : 15,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 3000,
random_time : "",
align_image : "left",
image_width : 765,
image_height : 500,
afterChange : function(){}
};
$.fn._reverse = [].reverse;
})(jQuery);
Donc vous voulez lire des milliers de lignes, comprendre comment ça marche et le faire fonctionner pour vous ? –
pourriez-vous fournir un lien vers le module s'il est libre afin qu'il puisse être testé. vous êtes plus susceptible d'obtenir une réponse exacte;) – Lodder