Forums

thinkofmedia

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

My site is beautyidentified.com

Slider Php file

<?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(\"\"));
?>


<div id=\"featured\">
    <div id=\"loopedSlider\">
    	<div id=\"slider-block\">
        <?php if (count($featarr) > 1){ ?>
            <ul class=\"nav-buttons\">
                    <li id=\"p\"><a href=\"#\" class=\"previous\"><img src=\"<?php bloginfo('template_directory'); ?>/images/slider-arrow-left.png\" alt=\"&lt;\" /></a></li>
                    <li id=\"n\"><a href=\"#\" class=\"next\"><img src=\"<?php bloginfo('template_directory'); ?>/images/slider-arrow-right.png\" alt=\"&gt;\" /></a></li>
            </ul>    
            <?php } ?>       
        
             <div class=\"container\">  
           
			<?php foreach ( $featarr as $featitem ) { ?>
            <?php query_posts('page_id=' . $featitem); ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); $count++; ?>		        					
              
				<div id=\"slide-<?php echo $count; ?>\" class=\"slide\" <?php if($count >= 2) { echo 'style=\"display:none\"'; }?>>                
					
					<?php if ( get_post_meta($post->ID, 'image', true) ) { ?>
                    <img src=\"<?php echo get_post_meta($post->ID, \"image\", $single = true); ?>\" alt=\"\" class=\"alignright slider-image\" />				
                    <?php } ?> 
                    <h3><?php the_title(); ?> </h3>
	                   				   
                    <?php the_content(); ?>
                    <a href=\"<?php the_permalink() ?>\">Read more</a></p> 

                </div>     

			<?php endwhile; endif; ?>
            <?php } ?>
        
            </div><!-- .container ends -->   
            
        </div><!-- #loopedSlider ends -->       
    </div><!-- .content ends -->
</div><!-- #featured ends -->

Js file

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

juliamat

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.

Ajay

').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){<br /> $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['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

treehouse : what would you like to learn today?

Forums

Add auto rotate to my slider