Home › Forums › JavaScript › Add auto rotate to my slider
- This topic is empty.
-
AuthorPosts
-
March 14, 2010 at 6:36 pm #28393thinkofmediaMember
Hi does anyone know how to add the auto rotate to this slider I have.
My site is beautyidentified.com
Slider Php file
Code:1){ ?>Js file
Code:(function(jQuery){
jQuery.fn.extend({
loopedSlider: function(options) {
return this.each(function() {// set defaults
var defaults = {
container : ‘container’,
slideClass : ‘slide’,
pagination : ‘pagination’,
navButtons : ‘nav-buttons’,
fadeSpeed : 200,
slideSpeed : 500,
animateSpeed : 200,
autoHeight : true,
padding : 20,
easing : ‘easeOutQuad’};
// set variables
var obj = jQuery(this);
var o = jQuery.extend(defaults, options);
var u = false;
var w = obj.width();
var h = obj.height();
var f = jQuery(‘.’+o.container, obj).find(‘div.slide:first’).attr(‘id’);
var l = jQuery(‘.’+o.container, obj).find(‘div.slide:last’).attr(‘id’);// funcitons
function setToActive(c) {
var current = jQuery(c).attr(‘id’);
jQuery(‘a[href$=”‘+current+'”]’, obj).addClass(‘active’);
}// applies style to divs
jQuery(‘.’+o.container, obj).find(‘div’).css({ ‘z-index’: 0/*, opacity: 0*/ }); //Tweak
jQuery(‘.’+o.container, obj).find(‘div div’).attr(‘style’,”);
jQuery(‘.’+o.container, obj).find(‘div’).css(‘left’,’-‘ + w + ‘px’); //Tweak
jQuery(‘.’+o.container, obj).find(‘div:first’).css(‘left’,’0′); //Tweak// load first slide
jQuery(‘.’+o.container, obj).find(‘div:eq(0)’).animate({ marginTop:0 }, o.fadeSpeed, function() { //Tweak
jQuery(this).css({ ‘z-index’: 100 });
jQuery(this).addClass(‘current’);
if (o.autoHeight===true) {
// gets height of new slide
//var newHeight = jQuery(this, obj).height() + o.padding;
//jQuery(‘.’+o.container, obj).animate({‘height’: newHeight}, o.animateSpeed, o.easing);
}
setToActive(this);
});// fade code
jQuery(‘.’+o.pagination, obj).find(‘a’).click(function(){
if(u===false && (jQuery(this).hasClass(‘active’)===false)) {
u = true;
// removes active
jQuery(‘a’, obj).removeClass(‘active’);// fades out current slide
jQuery(‘.’+o.container, obj).find(‘div’).animate({ marginTop:0 }, o.fadeSpeed, function() {
jQuery(this).removeClass(‘current’);
jQuery(this).css({ ‘z-index’: 0 });
});// setsup value for new slide
var x = 0;
var parentId = jQuery(this).attr(‘href’);
var parentSplit = parentId.split(‘-‘);
x = ((parentSplit[1]*1));if (o.autoHeight===true) {
// gets height of new slide
var newHeight = jQuery(‘#’+o.slideClass+’-‘+(x), obj).height() + o.padding;
jQuery(‘.’+o.container, obj).animate({‘height’: newHeight}, o.animateSpeed, o.easing);
}// fades in new slide
jQuery(‘#’+o.slideClass+’-‘+(x), obj).animate({ marginTop:0 }, o.fadeSpeed, function() {
jQuery(this).css({ ‘z-index’: 100 });
jQuery(this).addClass(‘current’);
u = false;
setToActive(this);
});
}
return false;
});// slide code
jQuery(‘.’+o.navButtons, obj).find(‘a’).click(function(){
if(u===false) {
u = true;
var loop = false;
var fLoop = f;
var lLoop = l;// removes active state
jQuery(‘a’, obj).removeClass(‘active’);// flips directions
if (jQuery(this).hasClass(‘next’)) {
var nextD = -w;
var previousD = w;
var direction = +1;
}
if (jQuery(this).hasClass(‘previous’)) {
nextD = w;
previousD = -w;
direction = -1;
}// setup the loop
if (jQuery(‘#’+fLoop, obj).hasClass(‘current’)) {
loop = ‘first’;
}
if ((jQuery(‘#’+lLoop, obj).hasClass(‘current’))) {
loop = ‘last’;
}// get the name of the new slide
if ((loop===’first’) && (jQuery(this).hasClass(‘previous’))) {
lLoop = lLoop.split(‘-‘);
x = ((lLoop[1]*1));
} else if ((loop===’last’) && (jQuery(this).hasClass(‘next’))) {
fLoop = fLoop.split(‘-‘);
x = ((fLoop[1]*1));
} else {
// setsup value for new slide
var getCurrent = jQuery(‘.’+o.container, obj).find(‘.current’).attr(‘id’);
getCurrent = getCurrent.split(‘-‘);
x = ((getCurrent[1]*1+direction));
}// gets height of new slide
if (o.autoHeight===true) {
var newHeight = jQuery(‘#’+o.slideClass+’-‘+(x), obj).height() + o.padding;
jQuery(‘.’+o.container, obj).animate({‘height’: newHeight}, o.animateSpeed, o.easing);
}// sets next slide to slide in position
jQuery(‘#’+o.slideClass+’-‘+(x), obj).css({ left: previousD, ‘z-index’: 100 });// slides in new slide
jQuery(‘#’+o.slideClass+’-‘+(x), obj).show().animate({ left: 0 }, o.slideSpeed, o.easing, function() {
jQuery(this).addClass(‘current’);
//jQuery(this).css({ opacity: 1 }); // Tweak (Removed)
// Tweak (Added show())
u = false;
// Sets active state for pagination a
setToActive(this);
});// slides out current slide
jQuery(‘.’+o.container, obj).find(‘.current’).animate({ ‘left’: nextD }, o.slideSpeed, o.easing, function() {
jQuery(this).removeClass(‘current’);
jQuery(this).css({ left: 0, ‘z-index’: 0 }).hide(); // Tweak ( Added hide and removed opacity)
});}
return false;
});
});
}
});
})(jQuery);jQuery(function(){
jQuery(‘#loopedSlider’).loopedSlider();
});
We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn’t scale well.
(function($){
$.fn.sliderGallery = function(initObj){
/**************************START – Init Object check and default values allotment*************************************/
if(initObj==null){initObj = new Object();}
var sliderInitObject = {
autoScrollThumbs: true,
scrollSpeed: 5000,
mousePause: true,
galleryHeight: 600,
galleryWidth: 800,
thumbsHeight: 100,
thumbsWidth: 520,
marginBetweenThumbs: 20,
showImageName: false,
};
//================================= set variables==by AK==========================//
var obj = jQuery(this);
var o = jQuery.extend(defaults, options);
var u = false;
var w = obj.width();
var h = obj.height();
var f = jQuery(‘.’+o.container, obj).find(‘div.slide:first’).attr(‘id’);
var l = jQuery(‘.’+o.container, obj).find(‘div.slide:last’).attr(‘id’);
//=====================================END===================================//
for(var x in sliderInitObject){
if(initObj[x]==null){
initObj[x] = sliderInitObject[x];
}
}
$galleryUniqID = new Date;
$galleryUniqID = $galleryUniqID.getTime();
/**************************END – Init Object check and default values allotment*************************************/
/**************************START – Multiple elements with class or tagname*************************************/
if(this.length>1){
this.each(function(){
$(this).sliderGallery(initObj);
});
return;
}
/**************************END – Multiple elements with class or tagname*************************************/
/**************************START – Check if Single child ul element is found*************************************/
if(this.children(“ul”).length!=1){
return;
}
/**************************END – Check if Single child ul element is found*************************************/
/**************************START – Fetch Images and create the gallery*************************************/
$getImages = [];
$sendReturn = false;
$parentDiv = this;
this.addClass(‘slider-gallery’);
this.children(‘ul’).children(‘li’).each(function(index){
if($(this).children(‘a’).length!=1){
$sendReturn = true;
}
else{
// $slider-gallery.animate(‘swing’,’normal’);
$getImages.push($(this).children(‘a’).attr(‘href’));
$(this).children(‘a’).click(function(){
$elementIndex = $(this).parents(‘ul’).children(‘li’).index($(this).parent(‘li’));
$gallerydiv = $(this).parents(‘.slider-gallery’);
$galleryBlockLeft = -(initObj.galleryWidth*$elementIndex);
$gallerydiv.find(‘div’).eq(0).find(‘div’).animate({left:$galleryBlockLeft},’normal’,’swing’);
$gallerydiv.find(‘div.gallery-image-name’).animate(‘normal’,’swing’).html($(this).attr(‘imagename’)||””);
//$gallerydiv.find(‘div.gallery-image-name’).animate(‘normal’,’swing’);
return false;
});
}
});
if($sendReturn){return;}
this.children(‘ul’).css(‘list-style-type’,’none’);
this.children(‘ul’).children(‘li’).css(‘float’,’left’);
$(‘
‘).insertBefore(this.children(‘ul’));
$(‘#slider-gallery-‘+$galleryUniqID).append($(‘
‘));
$(‘#slider-gallery-‘+$galleryUniqID).css(‘height’,initObj.galleryHeight).css(‘width’,initObj.galleryWidth).css(‘overflow’,’hidden’).css(‘position’,’relative’);
$(‘#slider-gallery-‘+$galleryUniqID+’ > div’).css(‘position’,’absolute’).css(‘height’,initObj.galleryHeight).css(‘width’,initObj.galleryWidth*$getImages.length);
for(var x in $getImages){
$(‘#slider-gallery-‘+$galleryUniqID+’ > div’).append($(‘
‘).append($(‘‘).attr(‘src’,$getImages[x]).css(‘height’,initObj.galleryHeight)).css(‘height’,initObj.galleryHeight).css(‘width’,initObj.galleryWidth).css(‘text-align’,’center’));
}
$(‘#slider-gallery-‘+$galleryUniqID+’ > div’).children(‘*’).css(‘float’,’left’);
/**************************END – Fetch Images and create the gallery*************************************/
//***********************For Image Name**********************//
if(initObj.showImageName){
$(this).append($(‘
‘).css({height:20}));
$(this).find(‘.gallery-image-name’).html($(this).find(‘a’).eq(0).attr(‘imagename’));
}
//*******************END******************************//
/**************************START – Create effects*************************************/
$thumbsList = this.children(‘ul’).clone(true);
this.children(‘ul’).remove();
this.append($(‘
‘).append($(‘
‘).append($thumbsList)).css(‘height’,initObj.thumbsHeight).css(‘width’,initObj.thumbsWidth).css(‘overflow’,’hidden’).css(‘position’,’relative’));
$thumbsList = this.children(‘div:last’).children(‘div’).children(‘ul’).eq(0);
$thumbsList.children(‘li’).css(‘margin’,’0 5px 0 5px’);
$thumbDivWidth = (parseInt(this.children(‘div:last’).children(‘div’).children(‘ul’).css(‘width’))*2);
$thumbsAppend = 1;
if($thumbDivWidth<=initObj.thumbsWidth){
$thumbsAppend = (initObj.thumbsWidth/$thumbDivWidth)+1;
$thumbDivWidth = initObj.thumbsWidth;
}
initObj.thumbsAppend = $thumbsAppend;
initObj.thumbDivWidth = $thumbDivWidth;
this.children(‘div:last’).children(‘div’).css(‘position’,’absolute’).css({left:0,height:initObj.thumbsHeight,width:$thumbDivWidth+10000});
this.children(‘div:last’).children(‘div’).children(‘ul’).css(‘float’,’left’).css({margin:0,padding:0});
this.children(‘*’).css(‘margin’,’0 auto’);
$thumbsList.parent().parent().css(‘margin-top’,initObj.marginBetweenThumbs);
$thumbsList.parent().append($thumbsList.clone(true));
this.data(‘initObj’,initObj);
if(initObj.autoScrollThumbs){
(function($parentDiv,initObj,$thumbDivWidth,$thumbsAppend){
$thumbsDiv = $parentDiv.children(‘div:last’).children(‘div’);
$function = arguments.callee;
$thumbsDiv.animate({left:(-parseFloat($thumbsDiv.children(‘ul’).eq(0).css(‘width’)))},initObj.scrollSpeed,’linear’,function(){
$(this).css(‘left’,0);
$function($parentDiv,initObj,$thumbDivWidth,$thumbsAppend);
});
})($parentDiv,initObj,$thumbDivWidth,$thumbsAppend);
}
$parentDiv.children(‘div:last’).children(‘div’).mouseover(function(){
$(this).stop();
});
$parentDiv.children(‘div:last’).children(‘div’).mouseout(function(event){
if(initObj.autoScrollThumbs){
$parentDiv = $(event.target).parents(‘.slider-gallery’);
initObj = $parentDiv.data();
initObj = initObj;
$thumbDivWidth = initObj.thumbDivWidth;
$thumbsAppend = initObj.thumbsAppend;
(function($parentDiv,initObj,$thumbDivWidth,$thumbsAppend){
$thumbsDiv = $parentDiv.children(‘div:last’).children(‘div’);
$function = arguments.callee;
$speed = initObj.scrollSpeed *
rotarota(parseFloat($thumbsDiv.children(‘ul’).eq(0).css(‘width’))+parseFloat($thumbsDiv.css(‘left’)))/parseFloat($thumbsDiv.children(‘ul’).eq(0).css(‘width’));
$thumbsDiv.animate({left:(-parseFloat($thumbsDiv.children(‘ul’).eq(0).css(‘width’)))},$speed,’linear’,function(){
$(this).css(‘left’,0);
$function($parentDiv,initObj,$thumbDivWidth,$thumbsAppend);
});
})($parentDiv,initObj,$thumbDivWidth,$thumbsAppend);
}
});
/**************************END – Create effects*************************************/
}
})(jQuery);
Hi juliamat use can use simple slider gallery image with thumnail also.Only you have to include
jquery-1.7.2.min.js jsfile with js
- The forum ‘JavaScript’ is closed to new topics and replies.