SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A different approach to image rotation... Need help

    Sometimes I wish I had started with javascript instead of php...

    Really need your help fellow Sitepointers! I stumbled over a script that I am dying to use for my new design, but I need to do two small tweaks to it that my JQuery skills just aren't up to.

    Demo of the script is here:
    http://www.seoarticlewritinglab.com/lofslidernews-1/

    As you can see, it automatically scrolls every X seconds to the right until it gets to the end. Afterwards, it does a huge fastforward back to the first item.

    What I want it to do, is to automatically scroll to the right every X seconds, but when it gets to the end, simply change scrolling direction, and scroll backwards one item at a time every X seconds... And when it gets to the first item, switch the direction back to normal forward scrolling.

    Can someone point me in the right direction and help educate me a little bit in javascript? This is probably really easy for you experts, but I am having a really tough time.

    Also, my second question - how do you implement a mouseover pause? I want the auto scrolling to stop when a mouse is browsing over the images. Otherwise it might fly away before you can click on something! I'm guessing this is even easier... but I'm stuck.

    Here is the plugin code for quick reference (plugin based on jquery obviously...)

    Code:
    // JavaScript Document
    /*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
     * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
     * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
     * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
     * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
     *
     * Version: 3.0.2
     * 
     * Requires: 1.2.2+
     */
    
    (function($) {
    
    var types = ['DOMMouseScroll', 'mousewheel'];
    
    $.event.special.mousewheel = {
    	setup: function() {
    		if ( this.addEventListener )
    			for ( var i=types.length; i; )
    				this.addEventListener( types[--i], handler, false );
    		else
    			this.onmousewheel = handler;
    	},
    	
    	teardown: function() {
    		if ( this.removeEventListener )
    			for ( var i=types.length; i; )
    				this.removeEventListener( types[--i], handler, false );
    		else
    			this.onmousewheel = null;
    	}
    };
    
    $.fn.extend({
    	mousewheel: function(fn) {
    		return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    	},
    	
    	unmousewheel: function(fn) {
    		return this.unbind("mousewheel", fn);
    	}
    });
    
    
    function handler(event) {
    	var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
    	
    	event = $.event.fix(event || window.event);
    	event.type = "mousewheel";
    	
    	if ( event.wheelDelta ) delta = event.wheelDelta/120;
    	if ( event.detail     ) delta = -event.detail/3;
    	
    	// Add events and delta to the front of the arguments
    	args.unshift(event, delta);
    
    	return $.event.handle.apply(this, args);
    }
    
    })(jQuery);
    
    /**
     * @version		$Id:  $Revision
     * @package		jquery
     * @subpackage	lofslidernews
     * @copyright	Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
     * @website     http://landofcoder.com
     * @license		This plugin is dual-licensed under the GNU General Public License and the MIT License 
     */
    // JavaScript Document
    (function($) {
    	 $.fn.lofJSidernews = function( settings ) {
    	 	return this.each(function() {
    			// get instance of the lofSiderNew.
    			new  $.lofSidernews( this, settings ); 
    		});
     	 }
    	 $.lofSidernews = function( obj, settings ){
    		this.settings = {
    			direction	    	: '',
    			mainItemSelector    : 'li',
    			navInnerSelector	: 'ul',
    			navSelector  		: 'li' ,
    			navigatorEvent		: 'click',
    			wapperSelector: 	'.lof-main-wapper',
    			interval	  	 	: 4000,
    			auto			    : true, // whether to automatic play the slideshow
    			maxItemDisplay	 	: 3,
    			startItem			: 0,
    			navPosition			: 'vertical', 
    			navigatorHeight		: 100,
    			navigatorWidth		: 310,
    			duration			: 600,
    			navItemsSelector    : '.lof-navigator li',
    			navOuterSelector    : '.lof-navigator-outer' ,
    			isPreloaded			: true,
    			easing				: 'easeInOutQuad'
    		}	
    		$.extend( this.settings, settings ||{} );	
    		this.nextNo         = null;
    		this.previousNo     = null;
    		this.maxWidth  = this.settings.mainWidth || 600;
    		this.wrapper = $( obj ).find( this.settings.wapperSelector );	
    		this.slides = this.wrapper.find( this.settings.mainItemSelector );
    		if( !this.wrapper.length || !this.slides.length ) return ;
    		// set width of wapper
    		if( this.settings.maxItemDisplay > this.slides.length ){
    			this.settings.maxItemDisplay = this.slides.length;	
    		}
    		this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
    		this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );	
    		this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
    		this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
    		
    		if( this.settings.navPosition == 'horizontal' ){ 
    			this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
    			this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
    			this.navigatorOuter.height(	this.settings.navigatorHeight );
    			
    		} else {
    			this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );	
    			
    			this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
    			this.navigatorOuter.width(	this.settings.navigatorWidth );
    		}		
    		this.navigratorStep = this.__getPositionMode( this.settings.navPosition );		
    		this.directionMode = this.__getDirectionMode();  
    		
    		
    		if( this.settings.direction == 'opacity') {
    			this.wrapper.addClass( 'lof-opacity' );
    			$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
    		} else { 
    			this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
    		}
    
    		
    		if( this.settings.isPreloaded ) {
    			this.preLoadImage( this.onComplete );
    		} else {
    			this.onComplete();
    		}
    		
    	 }
         $.lofSidernews.fn =  $.lofSidernews.prototype;
         $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
    	 
    	 $.lofSidernews.fn.extend({
    							  
    		startUp:function( obj, wrapper ) {
    			seft = this;
    
    			this.navigatorItems.each( function(index, item ){
    				$(item).click( function(){
    					seft.jumping( index, true );
    					seft.setNavActive( index, item );					
    				} );
    				$(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
    			})
    			this.registerWheelHandler( this.navigatorOuter, this );
    			this.setNavActive(this.currentNo );
    			
    			if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
    				this.registerButtonsControl( 'click', this.settings.buttons, this );
    
    			}
    			if( this.settings.auto ) 
    			this.play( this.settings.interval,'next', true );
    			
    			return this;
    		},
    		onComplete:function(){
    			setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );	this.startUp( );
    		},
    		preLoadImage:function(  callback ){
    			var self = this;
    			var images = this.wrapper.find( 'img' );
    	
    			var count = 0;
    			images.each( function(index,image){ 
    				if( !image.complete ){				  
    					image.onload =function(){
    						count++;
    						if( count >= images.length ){
    							self.onComplete();
    						}
    					}
    					image.onerror =function(){ 
    						count++;
    						if( count >= images.length ){
    							self.onComplete();
    						}	
    					}
    				}else {
    					count++;
    					if( count >= images.length ){
    						self.onComplete();
    					}	
    				}
    			} );
    		},
    		navivationAnimate:function( currentIndex ) { 
    			if (currentIndex <= this.settings.startItem 
    				|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
    					this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
    					if (this.settings.startItem < 0) this.settings.startItem = 0;
    					if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
    						this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
    					}
    			}		
    			this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
    												{duration:500, easing:'easeInOutQuad'} );	
    		},
    		setNavActive:function( index, item ){
    			if( (this.navigatorItems) ){ 
    				this.navigatorItems.removeClass( 'active' );
    				$(this.navigatorItems.get(index)).addClass( 'active' );	
    				this.navivationAnimate( this.currentNo );	
    			}
    		},
    		__getPositionMode:function( position ){
    			if(	position  == 'horizontal' ){
    				return ['left', this.settings.navigatorWidth];
    			}
    			return ['top', this.settings.navigatorHeight];
    		},
    		__getDirectionMode:function(){
    			switch( this.settings.direction ){
    				case 'opacity': this.maxSize=0; return ['opacity','opacity'];
    				default: this.maxSize=this.maxWidth; return ['left','width'];
    			}
    		},
    		registerWheelHandler:function( element, obj ){ 
    			 element.bind('mousewheel', function(event, delta ) {
    				var dir = delta > 0 ? 'Up' : 'Down',
    					vel = Math.abs(delta);
    				if( delta > 0 ){
    					obj.previous( true );
    				} else {
    					obj.next( true );
    				}
    				return false;
    			});
    		},
    		registerButtonsControl:function( eventHandler, objects, self ){ 
    			for( var action in objects ){ 
    				switch (action.toString() ){
    					case 'next':
    						objects[action].click( function() { self.next( true) } );
    						break;
    					case 'previous':
    						objects[action].click( function() { self.previous( true) } );
    						break;
    				}
    			}
    			return this;	
    		},
    		onProcessing:function( manual, start, end ){	 		
    			this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
    			this.nextNo 	= this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);				
    			return this;
    		},
    		finishFx:function( manual ){
    			if( manual ) this.stop();
    			if( manual && this.settings.auto ){ 
    				this.play( this.settings.interval,'next', true );
    			}		
    			this.setNavActive( this.currentNo );	
    		},
    		getObjectDirection:function( start, end ){
    			return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");	
    		},
    		fxStart:function( index, obj, currentObj ){
    				if( this.settings.direction == 'opacity' ) { 
    					$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
    					$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
    				}else {
    					this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
    				}
    			return this;
    		},
    		jumping:function( no, manual ){
    			this.stop(); 
    			if( this.currentNo == no ) return;		
    			 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
    			this.onProcessing( null, manual, 0, this.maxSize )
    				.fxStart( no, obj, this )
    				.finishFx( manual );	
    				this.currentNo  = no;
    		},
    		next:function( manual , item){
    
    			this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);	
    			this.onProcessing( item, manual, 0, this.maxSize )
    				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    				.finishFx( manual );
    		},
    		previous:function( manual, item ){
    			this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
    			this.onProcessing( item, manual )
    				.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    				.finishFx( manual	);			
    		},
    		play:function( delay, direction, wait ){	
    			this.stop(); 
    			if(!wait){ this[direction](false); }
    			var self  = this;
    			this.isRun = setTimeout(function() { self[direction](true); }, delay);
    		},
    		stop:function(){ 
    			if (this.isRun == null) return;
    			clearTimeout(this.isRun);
                this.isRun = null; 
    		}
    	})
    })(jQuery)
    Content Writing Service - Get custom SEO articles for 10$

  2. #2
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance someone could help me or point me in the right direction?
    Content Writing Service - Get custom SEO articles for 10$

  3. #3
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone interested in taking this job up on Elance at least?
    Content Writing Service - Get custom SEO articles for 10$

  4. #4
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Ersetze mal die 0 in der Zeile

    this.navigratorStep[0]

    durch null

    => this.navigratorStep[null]

    dann klappts auch im IE ;-)

    Best Regards

    Bsp. http://www.leipzig-lions.de


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •