Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anyone used Lof Jslidernews - jquery slider?

    Just wondering if anyone in here has used this
    http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html jquery plugin before? and if they have would they hav any notion of how to add play and pause button to it??

    I've managed to create a new button which can get the slider moving from stopped but only moves 1 place, it doesnt keep going after that. This is the button I have added to it

    Code:
    		playpause:function(delay, direction, wait ){
    			
    			this.play( this.settings.interval,'next', true );
    			return this;
    		},


    This is the setup of the code.. any help would be much appreciated! am only gettin to grips with jquery really!

    Thanks for your time

    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.playpauseNo     = 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;
    					case 'playpause':
    						objects[action].click( function() { self.playpause( true) } );
    						break;
    				}
    			}
    			return this;	
    		},
    		onProcessing:function( manual, start, end ){	 		
    			this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
    			this.playpauseNo = 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	);			
    		},
    		playpause:function(delay, direction, wait ){
    			//alert("Thanks for visiting!");
    			this.play( this.settings.interval,'next', true );
    			return this;
    		},
    
    
    		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)

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorted!

    managed to solve it myself.. thanks anyway guys!

    just incase anyone else is ever looking for the same thing.. i set up 2 buttons in the end and used these functions playrotate and playpause.

    probably not the cleanest way of doing it but it does the job!

    cheers anyways guys

    Code:
    		playrotate:function( manual, item ){
    			
    			this.play( this.settings.interval,'next', true );
    			this.settings.auto=true;
    			return this;
    		},
    		playpause:function( manual, item ){
    			
    			this.stop( this.settings.interval,'next', false );
    			this.settings.auto=false;
    			return this;
    		},

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been working with this plugin, but have been experiencing some issues, especially with the overlay text with opacity direction... tried to implement a pause on hover effect which worked for the most part... has been a bit more trouble than I anticipated, but I like the overall design idea.

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you help me a little please?

    I want to do the exact same, but I didn't understand what you did... where did you add the code, and how did you create the "buttons"?

    Best regards,
    Martin

    Quote Originally Posted by leapin_lep View Post
    managed to solve it myself.. thanks anyway guys!

    just incase anyone else is ever looking for the same thing.. i set up 2 buttons in the end and used these functions playrotate and playpause.

    probably not the cleanest way of doing it but it does the job!

    cheers anyways guys

    Code:
    		playrotate:function( manual, item ){
    			
    			this.play( this.settings.interval,'next', true );
    			this.settings.auto=true;
    			return this;
    		},
    		playpause:function( manual, item ){
    			
    			this.stop( this.settings.interval,'next', false );
    			this.settings.auto=false;
    			return this;
    		},

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    leapin_lep, I'm looking at using lof Jslidernews but it doesn't seem to work in IE9. Have you had any problems with it working in IE9?

    Cheers

    Wayne.


  •  

    Posting Permissions

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