Hilfe - Suche - Mitglieder - Kalender
Vollansicht: Problem mit jQuery Content Slider
Forum Sefrengo.org > Allgemeine Foren > Offtopic
macpat
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);

Taturo
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
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.
Invision Power Board © 2001-2024 Invision Power Services, Inc.