Flashhilfe.de - Flash Community

Problem mit der Steuerung eines jQuery Content Sliders

 


AntwortenRegistrieren Seite1  

pat_and_nobody#1
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

07.03.2011, 14:18

Also, 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.

PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(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);
Werbung
Beiträge: 0
Registriert: Feb 2016


springer#2
Benutzerbild von springer
Beiträge: 4909
Wohnort: zuhaus
Registriert: Apr 2004

07.03.2011, 14:38

hi,
ich frage mich wer sich die zeit nimmt, bzw. lust dazu hat deinen code einigermassen anschaubar zu formatieren...
lieber chips essen und danach voller zweifel sein, als voller zweifel chips essen...
vindel#3
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

07.03.2011, 14:59

.. Wenn sie in der Demo drinnen liegen, warum legst du sie dann nicht auch einfach hinein?
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
pat_and_nobody#4
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

Themenautor/in

07.03.2011, 15:06

Sonst hat es mir das Design durcheinander.

Der Code steht im .js so drinnen...
Werbung
Beiträge: 0
Registriert: Feb 2016


vindel#5
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

07.03.2011, 17:27

DU kannst doch per css es so stylen, als ob die Boxen ausshalb wären... Wird leichter sin als den Code zu "entschlüsseln"!
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
pat_and_nobody#6
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

Themenautor/in

08.03.2011, 09:24

Wie könnte das aussehen? Wie meinst du im CSS... Wenn ich die Boxen reingebe, sind sie abgeschnitten (also nicht mehr 100%) und die Position passt auch nicht... Wie könnte ich das angehen?
vindel#7
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

08.03.2011, 10:08

Die Position in html ist ja eg ziemlich egal. Solang die Boxen iwo im Body sind. Entweder du formatierst diese dann relativ (zB mit Margin) oder absolute dann vom Browserrand öÄ mit position: absolute;. Ist halt schwer was genaueres zu sagen, ohne konkrete Details zu kennen.
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
pat_and_nobody#8
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

Themenautor/in

09.03.2011, 11:13

Hey!
Danke für deine Antwort. Habs selbst versucht, ich kriegs leider nicht hin das die Slider drüber stehen... der Linke soll links rauslaufen und der rechte dann rechts.

Vielleicht kannst du dir mein .zip ansehen, ist relativ simpel aufgebaut? Ich bin die wirklich sehr dankbar!
http://178.188.50.106/merc.zip
Geändert von pat_and_nobody am 09.03.11 um 11:14 Uhr
vindel#9
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

09.03.2011, 17:31

Hab ich dich richtig verstanden, die Pfeile sollen über dem Slider liegen?!
Dann entfern "top: 300px;" aus dem CSS und füge das ein:
PHP:
1
2
3
    margin-top: -330px;
    margin-left: -5px;
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
pat_and_nobody#10
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

Themenautor/in

10.03.2011, 08:31

Hm danke für die Antwort.

Es sollte eigentlich so bleibe wie es ist... Nur der rote Balken soll auf der linken Seite bis zum Browserrand hinauslaufen und rechts auch...
vindel#11
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

18.03.2011, 11:41

Hallo,
hab dich total vergessen:
Um die Pfeile zu ändern, musst du die ganzen absolut-attribute entfernen. Du hast ja 4 div-boxen oder so die alle ineinander sind und absolute-positioniert sind. Es reicht, wenn du felgende DIV-Boxen lässt: "container", "slides" und "slides_container". die anderen sind überflüssig!
Alss CSS-Klassen schreibst du dann folgendes:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
    width:990px;
    margin-left: auto;
    margin-right: auto;
}
#slides {
    z-index:100;
    width:930px;
    height: 330px;
    background-image: url(../../img/bg_shdw.png);
    background-repeat: no-repeat;
}
.slides_container {
    width:960px;
    overflow:hidden;
    display:none;
    top:160px;
}

und jetzt kannst du die Pfeile absolut positionieren:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#arrw_left {
    position: absolute;
    top: 420px;
    left: 0px;
    height:40px;
    width:20%;
    text-align: right;
    background-image: url(../../img/bg_red.jpg);
    background-repeat: repeat;
    z-index:6;
}
#arrw_right {
    position: absolute;
    right:0px;
    top: 420px;
    height:40px;
    width:20%;
    background-image: url(../../img/bg_red.jpg);
    background-repeat: repeat;
    z-index:10;
}
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
pat_and_nobody#12
Benutzerbild von pat_and_nobody
Beiträge: 478
Registriert: Aug 2007

Themenautor/in

21.03.2011, 21:54

Das hat funktioniert vindel, danke recht herzlich!

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  DesignerInAction.de   Designnation.de   Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de   Tutorials.de

Haftungsausschluss   Datenschutzerklärung   Hier Werben   Impressum
© 1999-2016 Sebastian Wichmann - Flashhilfe.de