SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Slider

    Hello, I am having a problem with changing link information on a slider script. The website in question is http://rhtv.com, the problem I am having is this; currently when you click on one of the four “Title and Information blocks on the right side of the slider it changes the image on the left side of the slider to the one that corresponds to that “Title and Information” you can then click on the image on the left and it will take you to the corresponding page.

    What I am trying to do is remove the first step; I want you to be able to click on the “Title and Information” on the right and have it take you directly to the corresponding page instead of just changing the image on the left and then having to click on that image to go to the page.

    Any help would be greatly appreciated.


    coin-slider.js:

    Code:
    (function($) {
    
    
    
    	var params 		= new Array;
    
    	var order		= new Array;
    
    	var images		= new Array;
    
    	var links		= new Array;
    
    	var linksTarget = new Array;
    
    	var titles		= new Array;
    
    	var interval	= new Array;
    
    	var imagePos	= new Array;
    
    	var appInterval = new Array;	
    
    	var squarePos	= new Array;	
    
    	var reverse		= new Array;
    
    	
    
    	$.fn.coinslider= $.fn.CoinSlider = function(options){
    
    		
    
    		init = function(el){
    
    				
    
    			order[el.id] 		= new Array();	// order of square appereance
    
    			images[el.id]		= new Array();
    
    			links[el.id]		= new Array();
    
    			linksTarget[el.id]	= new Array();
    
    			titles[el.id]		= new Array();
    
    			imagePos[el.id]		= 0;
    
    			squarePos[el.id]	= 0;
    
    			reverse[el.id]		= 1;						
    
    				
    
    			params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
    
    						
    
    			// create images, links and titles arrays
    
    			$.each($('#'+el.id+' img'), function(i,item){
    
    				images[el.id][i] 		= $(item).attr('src');
    
    				links[el.id][i] 		= $(item).parent().is('a') ? $(item).parent().attr('href') : '';
    
    				linksTarget[el.id][i] 	= $(item).parent().is('a') ? $(item).parent().attr('target') : '';
    
    				titles[el.id][i] 		= $(item).next().is('span') ? $(item).next().html() : '';
    
    				$(item).hide();
    
    				$(item).next().hide();
    
    			});			
    
    			
    
    
    
    			// set panel
    
    			$(el).css({
    
    				'background-image':'url('+images[el.id][0]+')',
    
    				'width': params[el.id].width,
    
    				'height': params[el.id].height,
    
    				'position': 'relative',
    
    				'background-position': 'top left'
    
    			}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");	
    
    			
    
    				
    
    			// create title bar
    
    			$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
    
    						
    
    			$.setFields(el);
    
    			
    
    			if(params[el.id].navigation)
    
    				$.setNavigation(el);
    
    			
    
    			$.transition(el,0);
    
    			$.transitionCall(el);
    
    				
    
    		}
    
    		
    
    		// squares positions
    
    		$.setFields = function(el){
    
    			
    
    			tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
    
    			tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
    
    			
    
    			counter = sLeft = sTop = 0;
    
    			tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
    
    			tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
    
    			
    
    			for(i=1;i <= params[el.id].sph;i++){
    
    				gapx = tgapx;
    
    				
    
    					if(gapy > 0){
    
    						gapy--;
    
    						sHeight = tHeight+1;
    
    					} else {
    
    						sHeight = tHeight;
    
    					}
    
    				
    
    				for(j=1; j <= params[el.id].spw; j++){	
    
    
    
    					if(gapx > 0){
    
    						gapx--;
    
    						sWidth = tWidth+1;
    
    					} else {
    
    						sWidth = tWidth;
    
    					}
    
    
    
    					order[el.id][counter] = i+''+j;
    
    					counter++;
    
    					
    
    					if(params[el.id].links)
    
    						$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
    
    					else
    
    						$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
    
    								
    
    					// positioning squares
    
    					$("#cs-"+el.id+i+j).css({ 
    
    						'background-position': -sLeft +'px '+(-sTop+'px'),
    
    						'left' : sLeft ,
    
    						'top': sTop
    
    					});
    
    				
    
    					sLeft += sWidth;
    
    				}
    
    
    
    				sTop += sHeight;
    
    				sLeft = 0;					
    
    					
    
    			}
    
    			
    
    			
    
    			$('.cs-'+el.id).mouseover(function(){
    
    				$('#cs-navigation-'+el.id).show();
    
    			});
    
    		
    
    			$('.cs-'+el.id).mouseout(function(){
    
    				$('#cs-navigation-'+el.id).hide();
    
    			});	
    
    			
    
    			$('#cs-title-'+el.id).mouseover(function(){
    
    				$('#cs-navigation-'+el.id).show();
    
    			});
    
    		
    
    			$('#cs-title-'+el.id).mouseout(function(){
    
    				$('#cs-navigation-'+el.id).hide();
    
    			});	
    
    			
    
    			if(params[el.id].hoverPause){	
    
    				$('.cs-'+el.id).mouseover(function(){
    
    					params[el.id].pause = true;
    
    				});
    
    			
    
    				$('.cs-'+el.id).mouseout(function(){
    
    					params[el.id].pause = false;
    
    				});	
    
    				
    
    				$('#cs-title-'+el.id).mouseover(function(){
    
    					params[el.id].pause = true;
    
    				});
    
    			
    
    				$('#cs-title-'+el.id).mouseout(function(){
    
    					params[el.id].pause = false;
    
    				});	
    
    			}
    
    					
    
    			
    
    		};
    
    				
    
    		
    
    		$.transitionCall = function(el){
    
    		
    
    			clearInterval(interval[el.id]);	
    
    			delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
    
    			interval[el.id] = setInterval(function() { $.transition(el)  }, delay);
    
    			
    
    		}
    
    		
    
    		// transitions
    
    		$.transition = function(el,direction){
    
    			
    
    			if(params[el.id].pause == true) return;
    
    			
    
    			$.effect(el);
    
    			
    
    			squarePos[el.id] = 0;
    
    			appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]])  },params[el.id].sDelay);
    
    					
    
    			$(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
    
    			
    
    			if(typeof(direction) == "undefined")
    
    				imagePos[el.id]++;
    
    			else
    
    				if(direction == 'prev')
    
    					imagePos[el.id]--;
    
    				else
    
    					imagePos[el.id] = direction;
    
    		
    
    			if  (imagePos[el.id] == images[el.id].length) {
    
    				imagePos[el.id] = 0;
    
    			}
    
    			
    
    			if (imagePos[el.id] == -1){
    
    				imagePos[el.id] = images[el.id].length-1;
    
    			}
    
    	
    
    			$('.cs-button-'+el.id).removeClass('cs-active').next().removeClass('button-next');
    
    			$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active').next().addClass('button-next');
    
    			
    
    			if(titles[el.id][imagePos[el.id]]){
    
    				$('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
    
    				$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
    
    			} else {
    
    				$('#cs-title-'+el.id).css('opacity',0);
    
    			}				
    
    				
    
    		};
    
    		
    
    		$.appereance = function(el,sid){
    
    
    
    			$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
    
    
    
    			if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
    
    				clearInterval(appInterval[el.id]);
    
    				return;
    
    			}
    
    
    
    			$('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
    
    			$('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
    
    			squarePos[el.id]++;
    
    			
    
    		};
    
    		
    
    		// navigation
    
    		$.setNavigation = function(el){
    
    			// create prev and next 
    
    			$(el).append("<div id='cs-navigation-"+el.id+"'></div>");
    
    			$('#cs-navigation-'+el.id).hide();
    
    			
    
    			$('#cs-navigation-'+el.id).append("<a id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");
    
    			$('#cs-navigation-'+el.id).append("<a id='cs-next-"+el.id+"' class='cs-next'>next</a>");
    
    			$('#cs-prev-'+el.id).css({
    
    				'position' 	: 'absolute',
    
    				'top'		: params[el.id].height/2 - 15,
    
    				'left'		: 0,
    
    				'z-index' 	: 1001,
    
    				'line-height': '30px',
    
    				'opacity'	: params[el.id].opacity
    
    			}).click( function(e){
    
    				e.preventDefault();
    
    				$.transition(el,'prev');
    
    				$.transitionCall(el);		
    
    			}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
    
    	
    
    			$('#cs-next-'+el.id).css({
    
    				'position' 	: 'absolute',
    
    				'top'		: params[el.id].height/2 - 15,
    
    				'right'		: 0,
    
    				'z-index' 	: 1001,
    
    				'line-height': '30px',
    
    				'opacity'	: params[el.id].opacity
    
    			}).click( function(e){
    
    				e.preventDefault();
    
    				$.transition(el);
    
    				$.transitionCall(el);
    
    			}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
    
    		
    
    			// image buttons
    
    			$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
    
    
    
    			
    
    			for(k=1;k<images[el.id].length+1;k++){
    
    				$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'><span></span><i></i></a>");
    
    				$('#cs-button-'+el.id+'-'+k+' span').html(titles[el.id][(k-1)]);	
    
    			}
    
    			
    
    			$.each($('.cs-button-'+el.id), function(i,item){
    
    				$(item).click( function(e){
    
    					if($(this).hasClass('cs-active')){return false}
    
    					else{$('.cs-button-'+el.id).removeClass('cs-active').next().removeClass('button-next');
    
    					$(this).addClass('cs-active').next().addClass('button-next');
    
    					e.preventDefault();
    
    					$.transition(el,i);
    
    					$.transitionCall(el)}
    
    								
    
    				})
    
    				$(item).hover( 
    
    					function(){
    
    						if($(this).hasClass('cs-active')){return false}
    
    						else{$(this).next().addClass('button-next');}			
    
    					},
    
    					function(){
    
    						if($(this).hasClass('cs-active')){return false}
    
    						else{$(this).next().removeClass('button-next');}			
    
    					}
    
    				)
    
    			});	
    
    			
    
    			$('#cs-navigation-'+el.id+' a').mouseout(function(){
    
    				$('#cs-navigation-'+el.id).hide();
    
    				params[el.id].pause = false;
    
    			});				
    
    		}
    
    
    
    
    
    
    
    
    
    		// effects
    
    		$.effect = function(el){
    
    			
    
    			effA = ['random','swirl','rain','straight'];
    
    			if(params[el.id].effect == '')
    
    				eff = effA[Math.floor(Math.random()*(effA.length))];
    
    			else
    
    				eff = params[el.id].effect;
    
    
    
    			order[el.id] = new Array();
    
    
    
    			if(eff == 'random'){
    
    				counter = 0;
    
    				  for(i=1;i <= params[el.id].sph;i++){
    
    				  	for(j=1; j <= params[el.id].spw; j++){	
    
    				  		order[el.id][counter] = i+''+j;
    
    						counter++;
    
    				  	}
    
    				  }	
    
    				$.random(order[el.id]);
    
    			}
    
    			
    
    			if(eff == 'rain')	{
    
    				$.rain(el);
    
    			}
    
    			
    
    			if(eff == 'swirl')
    
    				$.swirl(el);
    
    				
    
    			if(eff == 'straight')
    
    				$.straight(el);
    
    				
    
    			reverse[el.id] *= -1;
    
    			if(reverse[el.id] > 0){
    
    				order[el.id].reverse();
    
    			}
    
    
    
    		}
    
    
    
    			
    
    		// shuffle array function
    
    		$.random = function(arr) {
    
    						
    
    		  var i = arr.length;
    
    		  if ( i == 0 ) return false;
    
    		  while ( --i ) {
    
    		     var j = Math.floor( Math.random() * ( i + 1 ) );
    
    		     var tempi = arr[i];
    
    		     var tempj = arr[j];
    
    		     arr[i] = tempj;
    
    		     arr[j] = tempi;
    
    		   }
    
    		}	
    
    		
    
    		//swirl effect by milos popovic
    
    		$.swirl = function(el){
    
    
    
    			var n = params[el.id].sph;
    
    			var m = params[el.id].spw;
    
    
    
    			var x = 1;
    
    			var y = 1;
    
    			var going = 0;
    
    			var num = 0;
    
    			var c = 0;
    
    			
    
    			var dowhile = true;
    
    						
    
    			while(dowhile) {
    
    				
    
    				num = (going==0 || going==2) ? m : n;
    
    				
    
    				for (i=1;i<=num;i++){
    
    					
    
    					order[el.id][c] = x+''+y;
    
    					c++;
    
    
    
    					if(i!=num){
    
    						switch(going){
    
    							case 0 : y++; break;
    
    							case 1 : x++; break;
    
    							case 2 : y--; break;
    
    							case 3 : x--; break;
    
    						
    
    						}
    
    					}
    
    				}
    
    				
    
    				going = (going+1)%4;
    
    
    
    				switch(going){
    
    					case 0 : m--; y++; break;
    
    					case 1 : n--; x++; break;
    
    					case 2 : m--; y--; break;
    
    					case 3 : n--; x--; break;		
    
    				}
    
    				
    
    				check = $.max(n,m) - $.min(n,m);			
    
    				if(m<=check && n<=check)
    
    					dowhile = false;
    
    									
    
    			}
    
    		}
    
    
    
    		// rain effect
    
    		$.rain = function(el){
    
    			var n = params[el.id].sph;
    
    			var m = params[el.id].spw;
    
    
    
    			var c = 0;
    
    			var to = to2 = from = 1;
    
    			var dowhile = true;
    
    
    
    
    
    			while(dowhile){
    
    				
    
    				for(i=from;i<=to;i++){
    
    					order[el.id][c] = i+''+parseInt(to2-i+1);
    
    					c++;
    
    				}
    
    				
    
    				to2++;
    
    				
    
    				if(to < n && to2 < m && n<m){
    
    					to++;	
    
    				}
    
    				
    
    				if(to < n && n>=m){
    
    					to++;	
    
    				}
    
    				
    
    				if(to2 > m){
    
    					from++;
    
    				}
    
    				
    
    				if(from > to) dowhile= false;
    
    				
    
    			}			
    
    
    
    		}
    
    
    
    		// straight effect
    
    		$.straight = function(el){
    
    			counter = 0;
    
    			for(i=1;i <= params[el.id].sph;i++){
    
    				for(j=1; j <= params[el.id].spw; j++){	
    
    					order[el.id][counter] = i+''+j;
    
    					counter++;
    
    				}
    
    				
    
    			}
    
    		}
    
    
    
    		$.min = function(n,m){
    
    			if (n>m) return m;
    
    			else return n;
    
    		}
    
    		
    
    		$.max = function(n,m){
    
    			if (n<m) return m;
    
    			else return n;
    
    		}		
    
    	
    
    	this.each (
    
    		function(){ init(this); }
    
    	);
    
    	
    
    
    
    	};
    
    	
    
    	
    
    	// default values
    
    	$.fn.coinslider.defaults = {	
    
    		width: 670, // width of slider panel
    
    		height: 416, // height of slider panel
    
    		spw: 6, // squares per width
    
    		sph: 4, // squares per height
    
    		delay: 6000, // delay between images in ms
    
    		sDelay: 70, // delay beetwen squares in ms
    
    		opacity: 1, // opacity of title and navigation
    
    		titleSpeed: 500, // speed of title appereance in ms
    
    		effect: 'straight', // random, swirl, rain, straight
    
    		navigation: true, // prev next and buttons
    
    		links : true, // show images as links 
    
    		hoverPause: false // pause on hover		
    
    	};	
    
    	
    
    })(jQuery);
    
    $(function(){
    
    	$('#coin-slider').coinslider()
    
    	$('.cs-button-coin-slider').last().addClass('button-last');
    
    })


    HTML inserted on page:
    HTML Code:
    <div id="coin-slider">
            <a href="hotels-casinos.html" ><img src="images/slide-1.jpg" alt=""><span><strong>Hotels &amp; Casinos</strong><b>The DIRECTV experience at home, now available for hotels.</b></span></a>
            <a href="bars-restaurants.html" ><img src="images/slide-2.jpg" alt=""><span><strong>Bars &amp; Restaurants</strong><b>Get what you need to make your business stand out.</b></span></a>
            <a href="gyms-shops-lobbies.html" ><img src="images/slide-3.jpg" alt=""><span><strong class="extra">Gyms, Shops &amp; Lobbies</strong><b>Nothing makes the time fly like great TV entertainment.</b></span></a>
            <a href="offices-businesses.html" ><img src="images/slide-4.jpg" alt=""><span><strong class="extra">Offices &amp; Businesses</strong><b>Increase productivity by creating an informative setting at your office.</b></span></a>
                
        </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi scturley. Welcome to the forums.

    I want you to be able to click on the “Title and Information” on the right and have it take you directly to the corresponding page
    That sort of defeats the purpose of the slideshow, doesn't it? If I were you, I'd rethink the layout. Why not have a slideshow that shows a different image when you hover over the link, for example? I find that it's best not to mess with the functionality of a slideshow like this, as it's more trouble than it's worth. The whole point of this gallery is that it's set up to switch the image when you click on the text.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would agree with you, I see no problem in how it is working however, it is the site owner that is asking for the change and I can not talk him out of it. I do agree with you that having it change the image when hover over would work better... than have it go to the page when clicked on.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To do what you want breaks the functionality of this slideshow, so rather than try to recode it, you are better off (IMHO) turning those right hand panels into direct links, and just having a standard fadein/fadeout gallery to the left using something like jQuery Cycle. In other words, just detach the links from the slideshow. The page will look the same, but you'll get the functionality you want.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •