Grow your CSS skills. Land your dream job.

Add auto rotate to my slider

  • # March 14, 2010 at 6:36 pm

    Hi does anyone know how to add the auto rotate to this slider I have.

    My site is beautyidentified.com

    Slider Php file

    Code:
    < ?php
    // Split the featured pages from the options, and put in an array
    $featpages = get_option('woo_feat_pages');
    $featarr=split(",",$featpages);
    $featarr = array_diff($featarr, array(""));
    ?>

    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();
    });

# April 20, 2010 at 1:26 am

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.

# September 5, 2012 at 3:49 am

(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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".