jquery href foutje

chillyfilly · 8 feb 2010

in de bovenste schuiftabel kan ik de afbeeldingen en links wijzigen maar wanneer ik erop klik, schuift de balk verder ipv naar de achterliggende link te gaan:

Voorbeeld: http://www.renergyopen.be/nl/html/index.php

PHP:

<div class="slider">
        <ul id="screen">
          <li><a id="left" href=""><img src="images/l_arrow.gif" alt="picture" width="24" height="21" border="0" /></a></li>
          <li id="view">
            <ul id="images">
              <li><a href="javascript:void(0)"><img src="images/top_img_tabel.jpg" alt="Tabellen" width="190" height="127" /><span>Tabellen »</span></a></li>
              <li><a class="collapsed" href="media.php"><img src="images/top_img_media.jpg" alt="picture" width="190" height="127" /><span>Media »</span></a></li>
			  <li><a href=""><img src="images/top_img_partners.jpg"><span>Partners »</span></a></li>
              <li><a href=""><img src="images/top_img_congres.jpg" alt="picture" width="190" height="127" /><span>Congres »</span></a></li>
              <li><a href=""><img src="images/top_img_2.jpg" alt="picture" width="190" height="127" /><span>Activiteiten »</span></a></li>
              <li><a href="route.php"><img src="images/top_img_2.jpg" alt="picture" width="190" height="127" /><span>Ons bereiken »</span></a></li>
              <li><a href=""><img src="images/top_img_3.jpg" alt="picture" width="190" height="127" /><span>Weblog »</span></a></li>
              <li><a href=""><img src="images/top_img_cross.jpg" alt="picture" width="190" height="127" /><span>Cross »</span></a></li>
              <li><a href=""><img src="images/top_img_1.jpg" alt="picture" width="190" height="127" /><span>Portfolium Theme »</span></a></li>
            </ul>
          </li>
          <li><a id="right" href=""><img src="images/r_arrow.gif" alt="picture" width="24" height="21" border="0" /></a></li>
        </ul>

CSS CODE:

HTML:

#screen { width:880px; padding:0; margin:0 auto; }
#screen ul { margin:0 auto; padding:0;}
#screen li { float:left; list-style:none; display:block; border:0;}
#screen .jq-ss-crop { margin:0; border:0; float:left; }
#left, #right { margin-top:50px; display:block; text-decoration:none; width:24px; padding:0 8px; }
#view { margin:0; padding:0; width:800px; border:0; height:170px; overflow:hidden; }
#images { width:1350px; padding:0; border:0; margin:0 auto;}
#images li a { border:0; margin:0 auto; padding:0; width:200px;}
#images li span { display:block; font:normal 11px Tahoma, Geneva, sans-serif; color:#0385bb; text-decoration:underline; padding:15px 10px; margin:0;}
#images li img { display:block; border:0; margin:0; max-width:190px; padding:0; text-align:center;}

Tha Devil · 8 feb 2010

Wellicht handig je jQuery-code er bij te zetten welke het veroorzaakt.

chillyfilly · 8 feb 2010

HTML:

(function( $ ){	
	var defaults = {
		elements:'a',//elements selector (relative to view)
		itemSize:{
			height:170,
			width:200
		},
		view:null,//container of the elements, the one to fix the width.
		navigators:null,//selector to the elements to navigate the slideshow.
		navigationMode:'s',//sequential, random, localscroll
		speed:400,//speed of transition, 1 for no-animation
		wrappers:'simple',//simple,resize,crop,link
		circular:true,//should the slideshow rewind/advance on the extremes ?.
		easing:'linear',//easing equation
		axis:'x',//axis to displace the slideshow
		margin:true,//take margin in account?
		start:null, //force the scroll to start at some position element.
		setWidth:true//whether to calculate and set, the overall width of the slideshow.
	};
	
	function wrap( $els, type, size ){//wrap the photos with several different wrappers.
		switch( type ){
			case 'crop': $els = $els.wrap('<div class="jq-ss-crop">').parent().css('overflow','hidden');					
			case 'resize': return $els.css( size );
			case 'simple': return $els.wrap('<div class="jq-ss-simple">').parent();
			case 'link': 
				if( $els.is('img') )
					return $els.wrap('<a target="_blank" class="jq-ss-link">').parent().each(function(){
						this.href = this.firstChild.src;
					});
			default: return $els;					
		}
	};
	
	$.fn.scrollShow = function( settings ){
		settings = $.extend( {}, defaults, settings );
		
		return this.each(function(){
			var 
				widget	  = this,
				$view	  = settings.view ? $(settings.view, this) : this,
				$elements = $(settings.elements, $view),
				limit	  = $elements.length,
				active	  = 0;
			
			$.each( settings.wrappers.split(/\s*,\s*/), function( i, wrapper ){
				$elements = wrap( $elements, wrapper, settings.itemSize );													 
			});			
			$elements.css( settings.itemSize );//ensure the outer elements have fixed size.
			
			if( !settings.navigators ){//this shouldn't get to happen
				settings.navigators = '';
				settings.navigationMode = 'r';
			}
			
			if( settings.navigators.constructor != Array )
				settings.navigators = [settings.navigators];
			
			$.each( settings.navigationMode.split(''), function( i, type ){
				switch( type.charAt(0) ){
					case 's'://sequential navigation
						$(settings.navigators[i],widget)
							.eq(0).bind('click', { dir: -1 }, sequential ).end()
							.eq(1).bind('click', { dir: +1 }, sequential );
					break;
					case 'r'://random navigation
						var $nav = $(settings.navigators[i] || $elements, widget),
							ratio = $elements.length / $nav.length;
						if( ratio === Infinity ) return;//no navigator found
						$nav.each(function( pos ){
							$(this).bind( 'click', { pos: Math.floor(ratio*pos) }, random );												  
						});
					break;
				}
			});				

			(function( $e, w ){					  
				var imgw = ($e.width() + attrs('margin') + attrs('padding') + attr('border'));
				
				do w -= imgw;
				while( w > 0 && limit-- );//find the last element we can scroll To.
				
				if( !settings.setWidth ) return;
				
				do{
					$e = $e.parent();
					if( $e[0] == $view[0] )
						return;
				}while( $e.length > 1 );
				$e.width( imgw * $elements.length  );//if there's a container for the elements, calculate it's width.
				
			})( $elements, $view.width() );

			if( settings.start != null )
				random( settings.start );
			
			function attrs( name ){
				return attr(name+'Left') + attr(name+'Right');
			};
			function attr( name ){
				return parseInt($elements.css(name)) || 0;	
			};
			
			function sequential( event ){
				event.data.pos = active + event.data.dir;
				return random( event );
			};
			
			function random( event ){
				var pos = typeof event == 'number' ? event : event.data.pos;
				if( pos < 0 )
					pos = active == 0 && settings.circular ? limit : 0;
				else if( pos > limit )
					pos = active == limit && settings.circular ? 0 : limit;
	
				$view.stop().scrollTo( $elements[pos], settings );
				active = pos;
				return false;
			};				
		});
	};
		  
})( jQuery );

Tha Devil · 8 feb 2010

Zit em waarschijnlijk in deze regels:
[js]
// Regel 61
case 's'://sequential navigation
$(settings.navigators,widget)
.eq(0).bind('click', { dir: -1 }, sequential ).end()
.eq(1).bind('click', { dir: +1 }, sequential );
break;
[/js]
Uit-commenten en kijken wat er dan gebeurd

chillyfilly · 9 feb 2010

...

Hoe bedoel je juist? Ben hier niet helemaal mee vertrouwd

Tha Devil · 9 feb 2010

Oke, probeer dit eens als volledige code dan:
[js]
(function( $ ){
var defaults = {
elements:'a',//elements selector (relative to view)
itemSize:{
height:170,
width:200
},
view:null,//container of the elements, the one to fix the width.
navigators:null,//selector to the elements to navigate the slideshow.
navigationMode:'s',//sequential, random, localscroll
speed:400,//speed of transition, 1 for no-animation
wrappers:'simple',//simple,resize,crop,link
circular:true,//should the slideshow rewind/advance on the extremes ?.
easing:'linear',//easing equation
axis:'x',//axis to displace the slideshow
margin:true,//take margin in account?
start:null, //force the scroll to start at some position element.
setWidth:true//whether to calculate and set, the overall width of the slideshow.
};

function wrap( $els, type, size ){//wrap the photos with several different wrappers.
switch( type ){
case 'crop': $els = $els.wrap('<div class="jq-ss-crop">').parent().css('overflow','hidden');
case 'resize': return $els.css( size );
case 'simple': return $els.wrap('<div class="jq-ss-simple">').parent();
case 'link':
if( $els.is('img') )
return $els.wrap('<a target="_blank" class="jq-ss-link">').parent().each(function(){
this.href = this.firstChild.src;
});
default: return $els;
}
};

$.fn.scrollShow = function( settings ){
settings = $.extend( {}, defaults, settings );

return this.each(function(){
var
widget = this,
$view = settings.view ? $(settings.view, this) : this,
$elements = $(settings.elements, $view),
limit = $elements.length,
active = 0;

$.each( settings.wrappers.split(/\s*,\s*/), function( i, wrapper ){
$elements = wrap( $elements, wrapper, settings.itemSize );
});
$elements.css( settings.itemSize );//ensure the outer elements have fixed size.

if( !settings.navigators ){//this shouldn't get to happen
settings.navigators = '';
settings.navigationMode = 'r';
}

if( settings.navigators.constructor != Array )
settings.navigators = [settings.navigators];

/*
$.each( settings.navigationMode.split(''), function( i, type ){
switch( type.charAt(0) ){
case 's'://sequential navigation
$(settings.navigators,widget)
.eq(0).bind('click', { dir: -1 }, sequential ).end()
.eq(1).bind('click', { dir: +1 }, sequential );
break;
case 'r'://random navigation
var $nav = $(settings.navigators || $elements, widget),
ratio = $elements.length / $nav.length;
if( ratio === Infinity ) return;//no navigator found
$nav.each(function( pos ){
$(this).bind( 'click', { pos: Math.floor(ratio*pos) }, random );
});
break;
}
});
*/

(function( $e, w ){
var imgw = ($e.width() + attrs('margin') + attrs('padding') + attr('border'));

do w -= imgw;
while( w > 0 && limit-- );//find the last element we can scroll To.

if( !settings.setWidth ) return;

do{
$e = $e.parent();
if( $e[0] == $view[0] )
return;
}while( $e.length > 1 );
$e.width( imgw * $elements.length );//if there's a container for the elements, calculate it's width.

})( $elements, $view.width() );

if( settings.start != null )
random( settings.start );

function attrs( name ){
return attr(name+'Left') + attr(name+'Right');
};
function attr( name ){
return parseInt($elements.css(name)) || 0;
};

function sequential( event ){
event.data.pos = active + event.data.dir;
return random( event );
};

function random( event ){
var pos = typeof event == 'number' ? event : event.data.pos;
if( pos < 0 )
pos = active == 0 && settings.circular ? limit : 0;
else if( pos > limit )
pos = active == limit && settings.circular ? 0 : limit;

$view.stop().scrollTo( $elements[pos], settings );
active = pos;
return false;
};
});
};

})( jQuery );[/js]
Ik heb daarin bepaalde regels in commentaar gezet zodat ze niet worden uitgevoerd.
Daarin wordt een click-event gekoppeld aan bepaalde elementen, iets dat met bovenstaande code dus niet wordt gedaan.

jquery href foutje

chillyfilly

Gebruiker

Tha Devil

Moderator

chillyfilly

Gebruiker

Tha Devil

Moderator

chillyfilly

Gebruiker

Tha Devil

Moderator

Nieuwste berichten

Wij waarderen jouw privacy