Problem mit jQuery Content Slider |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
Problem mit jQuery Content Slider |
Fri. 4. March 2011, 09:53
Beitrag
#1
|
|
Advanced Member Gruppe: Members Beiträge: 78 Mitglied seit: 22.01.2010 Mitglieds-Nr.: 2.125 |
Hi Leute!
Ich verwende für ein Layout einen Content Slider der auf jQuery basiert. Das Problem ist das die left/right Controls ausserhalb des <div id="slider"... liegen. Im Demo sind die drinnen und so funktionierts auch. Bei mir sieht es so aus: Also sie liegen ausserhalb und bei Klick tut sich nichts. CODE <div id="arrw_left"><a href="#" class="prev"><img src="img/arrw_left.gif" alt="" /></a></div> <div id="arrw_right"><a href="#" class="next"><img src="img/arrw_right.gif" alt="" /></a></div> <div id="header_img_hol"> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <a href="http://www.flickr.com/photos/jliba/4665625073/" target="_blank"><img src="img/slide-1.jpg" alt="Slide 1"></a> <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" target="_blank"><img src="img/slide-2.jpg" alt="Slide 2"></a> <a href="http://www.flickr.com/photos/childofwar/2984345060/" target="_blank"><img src="img/slide-3.jpg" alt="Slide 3"></a> <a href="http://www.flickr.com/photos/b-tal/117037943/" target="_blank"><img src="img/slide-4.jpg" alt="Slide 4"></a> <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" target="_blank"><img src="img/slide-6.jpg" alt="Slide 6"></a> <a href="http://www.flickr.com/photos/aftab/3152515428/" target="_blank"><img src="img/slide-7.jpg" alt="Slide 7"></a> </div> </div> </div> </div> Das ist das .js... Sieht jemand hier heraus wie ich die Controls umstellen könnte CODE (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option);return this.each(function(){$('.'+option.container,$(this)).children().wrapAll('<div class="slides_control"/>');var elem=$(this),control=$('.slides_control',elem),total=control.children().size(),width=control.children().outerWidth() ,height=control.children().outerHeight(),start=option.start-1,effect=option.effect.indexOf(',')<0?option.effect:option.effect.replace(' ','').split(',')[0],paginationEffect=option.effect.indexOf(',')<0?effect:option.effect.replace(' ','').split(',')[1],next=0,prev=0,number=0,current=0,loaded,active,clicked,position,directi on,imageParent,pauseTimeout,playInterval;function animate(direction,effect,clicked){if(!active&&loaded){active=true;option.animationStart(current+1);switch(direction){case'next':prev=current;next=current+1;next=total===next?0:next;position=width*2;direction=-width*2;current=next;break;case'prev':prev=current;next=current-1;next=next===-1?total-1:next;position=0;direction=0;current=next;break;case'pagination':next=parseInt(clicked,10);prev=$('.'+option.paginationClass+' li.current a',elem).attr('href').match('[^#/]+$');if(next>prev){position=width*2;direction=-width*2;}else{position=0;direction=0;} current=next;break;} if(effect==='fade'){if(option.crossfade){control.children(':eq('+next+')',elem).css({zIndex:10}).fadeIn(option.fadeSpeed,option.fadeEasing,function() {if(option.autoHeight){control.animate({height:control.children(':eq('+next+')',elem).outerHeight()},option.autoHeightSpeed,function(){control.children(':eq('+prev+')',elem).css({display:'none',zIndex:0});control.children(':eq('+next+')',elem).css({zIndex:0});option.animationComplete(next+1);active=false;});}els e{control.children(':eq('+prev+')',elem).css({display:'none',zIndex:0});control.children(':eq('+next+')',elem).css({zIndex:0});option.animationComplete(next+1);active=false;}});}el se{control.children(':eq('+prev+')',elem).fadeOut(option.fadeSpeed,option.fadeEasing,function(){if(option.autoH eight){control.animate({height:control.children(':eq('+next+')',elem).outerHeight()},option.autoHeightSpeed,function(){control.children(':eq('+next+')',elem).fadeIn(option.fadeSpeed,option.fadeEasing);});}else{control.children(':eq('+next+')',elem).fadeIn(option.fadeSpeed,option.fadeEasing,function(){if($.browser.msie){$(this).get(0).style.removeAttribute('filter');}});} option.animationComplete(next+1);active=false;});}}else{control.children(':eq('+next+')').css({left:position,display:'block'});if(option.autoHeight){control.animate({left:direction,height:control.chil dren(':eq('+next+')').outerHeight()},option.slideSpeed,option.slideEasing,function(){control.css ({left:-width});control.children(':eq('+next+')').css({left:width,zIndex:5});control.children(':eq('+prev+')').css({left:width,display:'none',zIndex:0});option.animationComplete(next+1);active=false;});}else{control.a nimate({left:direction},option.slideSpeed,option.slideEasing,function(){control.c ss({left:-width});control.children(':eq('+next+')').css({left:width,zIndex:5});control.children(':eq('+prev+')').css({left:width,display:'none',zIndex:0});option.animationComplete(next+1);active=false;});}} if(option.pagination){$('.'+option.paginationClass+' li.current',elem).removeClass('current');$('.'+option.paginationClass+' li:eq('+next+')',elem).addClass('current');}}} function stop(){clearInterval(elem.data('interval'));} function pause(){if(option.pause){clearTimeout(elem.data('pause'));clearInterval(elem.data('interval'));pauseTimeout=setTimeout(function(){clearTimeout(elem.data('pause'));playInterval=setInterval(function(){animate("next",effect);},option.play);elem.data('interval',playInterval);},option.pause);elem.data('pause',pauseTimeout);}else{stop();}} if(total<2){return;} if(start<0){start=0;} if(start>total){start=total-1;} if(option.start){current=start;} if(option.randomize){control.randomize();} $('.'+option.container,elem).css({overflow:'hidden',position:'relative'});control.children().css({position:'absolute',top:0,left:control.children().outerWidth(),zIndex:0,display:'none'});control.css({position:'relative',width:(width*3),height:height,left:-width});$('.'+option.container,elem).css({display:'block'});if(option.autoHeight){control.children().css({height:'auto'});control.animate({height:control.children(':eq('+start+')').outerHeight()},option.autoHeightSpeed);} if(option.preload&&control.find('img').length){$('.'+option.container,elem).css({background:'url('+option.preloadImage+') no-repeat 50% 50%'});var img=control.find('img:eq('+start+')').attr('src')+'?'+(new Date()).getTime();if($('img',elem).parent().attr('class')!='slides_control'){imageParent=control.children(':eq(0)')[0].tagName.toLowerCase();}else{imageParent=control.find('img:eq('+start+')');} control.find('img:eq('+start+')').attr('src',img).load(function(){control.find(imageParent+':eq('+start+')').fadeIn(option.fadeSpeed,option.fadeEasing,function(){$(this).css({zIndex:5});$('.'+option.container,elem).css({background:''});loaded=true;});});}else{control.children(':eq('+start+')').fadeIn(option.fadeSpeed,option.fadeEasing,function(){loaded=true;});} if(option.bigTarget){control.children().css({cursor:'pointer'});control.children().click(function(){animate('next',effect);return false;});} if(option.hoverPause&&option.play){control.bind('mouseover',function(){stop();});control.bind('mouseleave',function(){pause();});} if(option.generateNextPrev){$('.'+option.container,elem).after('<a href="#" class="'+option.prev+'">Prev</a>');$('.'+option.prev,elem).after('<a href="#" class="'+option.next+'">Next</a>');} $('.'+option.next,elem).click(function(e){e.preventDefault();if(option.play){paus e();} animate('next',effect);});$('.'+option.prev,elem).click(function(e){e.preventDefault();if(option.play){paus e();} animate('prev',effect);});if(option.generatePagination){elem.append('<ul class='+option.paginationClass+'></ul>');control.children().each(function(){$('.'+option.paginationClass,elem).append('<li><a href="#'+number+'">'+(number+1)+'</a></li>');number++;});}else{$('.'+option.paginationClass+' li a',elem).each(function(){$(this).attr('href','#'+number);number++;});} $('.'+option.paginationClass+' li:eq('+start+')',elem).addClass('current');$('.'+option.paginationClass+' li a',elem).click(function(){if(option.play){pause();} clicked=$(this).attr('href').match('[^#/]+$');if(current!=clicked){animate('pagination',paginationEffect,clicked);} return false;});$('a.link',elem).click(function(){if(option.play){pause();} clicked=$(this).attr('href').match('[^#/]+$')-1;if(current!=clicked){animate('pagination',paginationEffect,clicked);} return false;});if(option.play){playInterval=setInterval(function(){animate('next',effect);},option.play);elem.data('interval',playInterval);}});};$.fn.slides.option={preload:false,preloadImage:'/img/loading.gif',container:'slides_container',generateNextPrev:false,next:'next',prev:'prev',pagination:true,generatePagination:true,paginationClass:'pagination',fadeSpeed:350,fadeEasing:'',slideSpeed:350,slideEasing:'',start:1,effect:'slide',crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHeight: false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){},animationCo mplete:function(){}};$.fn.randomize=function(callback){function randomizeOrder(){return(Math.round(Math.random())-0.5);} return($(this).each(function(){var $this=$(this);var $children=$this.children();var childCount=$children.length;if(childCount>1){$children.hide();var indices=[];for(i=0;i<childCount;i++){indices[indices.length]=i;} indices=indices.sort(randomizeOrder);$.each(indices,function(j,k){var $child=$children.eq(k);var $clone=$child.clone(true);$clone.show().appendTo($this);if(callback!==undefined){callback($child,$clone);} $child.remove();});}}));};})(jQuery); |
|
|
Mon. 7. March 2011, 17:17
Beitrag
#2
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 328 Mitglied seit: 29.08.2006 Wohnort: Konstanz / Bodensee Mitglieds-Nr.: 216 |
hallo macpat,
was spricht dagegen, die Controls innerhalb von <div id="slider".. anzulegen und per css zu positionieren? Das Javascript so zu ändern, dass es auch ausserhalb funktioniert ist ungleich schwerer. gruss, Andreas |
|
|
Vereinfachte Darstellung | Aktuelles Datum: 26.9.24 - 20:33 |