[phpBB2] Sliderbilder vollflächig darstellen lassen?

von silberling Mo 19 Aug 2013 - 10:06

hallo!

ich möchte gerne das bild vom slider vergrössern, damit das bild rechts und links bis zum schwarzen nach aussen gehen und oben bzw. unten auch zum schwarzen rand reichen. habe zwar schon die gesamten werte vom code geändert jedoch bin ich nie zu dem ergebnis gekommen wie ich mir dies vorstelle lt foto.

derzeitige slider:
[phpBB2] Sliderbilder vollflächig darstellen lassen? S257

[phpBB2] Sliderbilder vollflächig darstellen lassen? S257

so sollte es aussehen:
[phpBB2] Sliderbilder vollflächig darstellen lassen? Mor

derzeitige portalcode:

Code:: <center><table border="0" bgcolor="#141414"><tr><td width="895"></center> <center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="99%" height="304" frameborder="0" scrolling="no"></iframe></center>

derzeitige slider html code:

Code:: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <style type="text/css"> /* Resets defualt browser settings reset.css */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } a:active { outline:none; } body { line-height:1; color:black; background:white; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; } blockquote:before,blockquote:after,q:before,q:after { content:""; } blockquote,q { quotes:"" ""; } /* Page style */ body { background-color: transparent; font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; top center; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.8); -webkit-font-smoothing: subpixel-antialiased; } #container { width:880px; padding:1px; margin:0 auto; position:relative; z-index:0; } #example { width:900px; height:350px; position:relative; } #frame { position:absolute; z-index:0; width:1039px; height:341px; top:-3px; left:-80px; } /* Slideshow */ #slides { position:absolute; top:15px; left:4px; z-index:100; } /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:870px; overflow:hidden; position:relative; display:none; border:1px solid #000000; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container a { width:870px; height:270px; display:block; } .slides_container a img { display:block; } /* Next/prev buttons */ #slides .next,#slides .prev { position:absolute; top:115px; left:5px; width:24px; height:43px; display:block; z-index:101; } #slides .next { left:842px; } /* Pagination */ .pagination { margin:-16px auto 0; width:65px; position: absolute; z-index: 102; right: 400px; } .pagination li { float:left; margin:0 1px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png"); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; } /* Footer */ #footer { text-align:center; width:880px; margin-top:9px; padding:4.5px 0 18px; border-top:1px solid #dfdfdf; } #footer p { margin:4.5px 0; font-size:1.0em; } /* Anchors */ a:link,a:visited { color:#599100; text-decoration:none; } a:hover,a:active { color:#599100; text-decoration:underline; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery) </script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'http://i43.servimg.com/u/f43/17/63/75/60/loadin10.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script> </head> <body> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="870" height="270"></a> <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="870" height="270"></a> <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="870" height="270"></a> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="870" height="270"></a> </div> <a href="#" class="prev"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_10.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_11.png" width="24" height="43" alt="Arrow Next"></a> </div> </div> </div> </body> </html>

lg
silber

von Raylan Mo 19 Aug 2013 - 11:41

Hi, also ich hab mir das gerade mal angeschaut und festgestellt, dass du viele unterschiedliche Weiten verwendest also in deinem protalcode steht:

<td width="895px">

während die Bilder im Slyder haben:
<img src="https://2img.net/r/ihimizer/img545/127/o0vw.png" width="870" height="270">

zuguterletzt in dem Css code für den slydes container:
width:870px;

du müsstest also die Weiten der Bilder und die des Containers auf deine Forenbreite oder tabellenbreite Anpassen.....

so also ich hab mal deinen Iframe und den normalcode untereinander geschoben.
Das willst du als endresultat haben: (oben der jetzige iframe zustand unten der slyder nach deinem code mit von mir abgeändertem css & html)
[phpBB2] Sliderbilder vollflächig darstellen lassen? Resultat_zps05abe349

[phpBB2] Sliderbilder vollflächig darstellen lassen? Resultat_zps05abe349

was habe ich gemacht? ich habe einfach in deinem css code sämtliche breiten auf deine laut tabelle um das Iframe gewünschten 895px gebracht:

Code:: /* Resets defualt browser settings reset.css */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } a:active { outline:none; } body { line-height:1; color:black; background:white; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; } blockquote:before,blockquote:after,q:before,q:after { content:""; } blockquote,q { quotes:"" ""; } /* Page style */ body { background-color: transparent; font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; top center; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.8); -webkit-font-smoothing: subpixel-antialiased; } #container { width:895px; padding:0px; position:relative; z-index:0; } #example { width:895px; height:350px; position:relative; } #frame { position:absolute; z-index:0; width:1039px; height:341px; top:-3px; left:-80px; } /* Slideshow */ #slides { position:absolute; top:15px; left:0px; z-index:100; } /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:895px; overflow:hidden; position:relative; display:none; border:1px solid #000000; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container a { width:895px; height:270px; display:block; } .slides_container a img { display:block; } /* Next/prev buttons */ #slides .next,#slides .prev { position:absolute; top:115px; left:5px; width:24px; height:43px; display:block; z-index:101; } #slides .next { left:842px; } /* Pagination */ .pagination { margin:-16px auto 0; width:65px; position: absolute; z-index: 102; right: 400px; } .pagination li { float:left; margin:0px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png"); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; } /* Footer */ #footer { text-align:center; width:895px; margin-top:9px; padding:0px 0 18px; border-top:1px solid #dfdfdf; } #footer p { margin:0px 0; font-size:1.0em; } /* Anchors */ a:link,a:visited { color:#599100; text-decoration:none; } a:hover,a:active { color:#599100; text-decoration:underline; }

allerdings hast du ja auch bilder verwendet, die du ebenfalls mit anderen Breiten als der gewünschten betitelt hattest, deshalb die änderung im Html:

Code:: <a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="895px" height="278px"></a> <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="895px" height="278px"></a> <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="895px" height="278px"></a> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="895px" height="278px"></a>

Danach hatte ich noch das problem dass einige margins und paddings das ganze etwas nach rechts verschoben hatten, aber auch das hab ich mit dem oben eingestellten CSS schon behoben.
Das alles musst du jetzt mal abändern auf die html seite des iframes einfügen. Mal schauen was passiert. (ich hoffe ja es funktioniert^^)

Zu guter letzt hat dein Iframe code noch Fehler. Du öffnest und schließt wahllos center und deine Tabelle hat nur einen Anfang kein Ende.

Spoiler:

(der Iframe Code korrigiert und mit abgeänderter Breite)

GlG Ray Very Happy

von silberling Mo 19 Aug 2013 - 12:15

habe den slider abgeändert und er funktioniert auch fast. derzeit scheint es so wie ein border oder etwas anderes ca. 1-2px um das bild noch geht, da die bilder nicht komplett an den rang gelangen?

der jetzige code:

Code:: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <style type="text/css"> /* Resets defualt browser settings reset.css */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } a:active { outline:none; } body { line-height:1; color:black; background:white; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; } blockquote:before,blockquote:after,q:before,q:after { content:""; } blockquote,q { quotes:"" ""; } /* Page style */ body { background-color: transparent; font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; top center; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.8); -webkit-font-smoothing: subpixel-antialiased; } #container { width:895px; padding:0px; position:relative; z-index:0; } #example { width:895px; height:350px; position:relative; } #frame { position:absolute; z-index:0; width:1039px; height:341px; top:-3px; left:-80px; } /* Slideshow */ #slides { position:absolute; top:0px; left:0px; z-index:100; } /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:895px; overflow:hidden; position:relative; display:none; border:1px solid #000000; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container a { width:895px; height:304px; display:block; } .slides_container a img { display:block; } /* Next/prev buttons */ #slides .next,#slides .prev { position:absolute; top:115px; left:5px; width:24px; height:43px; display:block; z-index:101; } #slides .next { left:842px; } /* Pagination */ .pagination { margin:-30px auto 0; width:65px; position: absolute; z-index: 102; right: 410px; } .pagination li { float:left; margin:0px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url("http://i39.servimg.com/u/f39/18/36/42/68/pagina12.png"); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; } /* Footer */ #footer { text-align:center; width:895px; margin-top:9px; padding:4.5px 0 18px; border-top:1px solid #dfdfdf; } #footer p { margin:0px 0; font-size:1.0em; } /* Anchors */ a:link,a:visited { color:#599100; text-decoration:none; } a:hover,a:active { color:#599100; text-decoration:underline; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery) </script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'http://i43.servimg.com/u/f43/17/63/75/60/loadin10.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script> </head> <body> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <a title="BILDTITEL" target="_blank"><img src="http://img545.imageshack.us/img545/127/o0vw.png" width="895" height="304"></a> <a title="BILDTITEL" target="_blank"><img src="http://img23.imageshack.us/img23/7359/s53k.png" width="895" height="304"></a> <a title="BILDTITEL" target="_blank"><img src="http://img694.imageshack.us/img694/8060/k677.png" width="895" height="304"></a> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="http://img534.imageshack.us/img534/3315/n8it.png" width="895" height="304"></a> </div> <a href="#" class="prev"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_10.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://i39.servimg.com/u/f39/18/36/42/68/preil_11.png" width="24" height="43" alt="Arrow Next"></a> </div> </div> </div> </body> </html>

von Raylan Mo 19 Aug 2013 - 12:17

Jap ich dachte du wolltest die Border also hab ich folgendes CSS so gelassen wie es ist:

Code:: .slides_container { width:895px; overflow:hidden; position:relative; display:none; border:1px solid #000000; }

du müsstest vermutlich einfach 1 durch 0 ersetzen Wink

funktioniert es jetzt?

von silberling Mo 19 Aug 2013 - 12:21

hmm da passiert nix?

von Raylan Mo 19 Aug 2013 - 12:28

Also bei mir wirds am pc zwar ohne rand angezeigt aber das ist vermutlich auch so ne sache.... vllt versuch mal bei der iframe tabelle den background rauszunehmen....

Code:: <table border="0"><tr><td width="895px"> <center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="895px" height="304px" frameborder="0" scrolling="no"></iframe></center> </td></tr></table>

oder du setzt das iframe einfach mal ohne die tabelle ein

Code:: <center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="895px" height="304px" frameborder="0" scrolling="no"></iframe></center>

ich glaube nicht dass es am css liegt, vllt an einer foreneinstellung aber ich sehs mir schnell nochmal bei mir an^^

Edit: also ich würde vermutlich lösung zwei bevorzugen, einfach weil du die tabelle dann im grunde gar nicht brauchst. Der Rand verschwindet in meinem Forum wenn ich den Background rausnehme, allerdings kann man dann theoretisch auch gleich die tabelle weglassen

von silberling Mo 19 Aug 2013 - 12:38

an dem lag es. thx nochmal!

lg
silber

von Raylan Mo 19 Aug 2013 - 12:39

Bitte schön, wenn ich helfen konnte ^_^

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	

[phpBB2] Sliderbilder vollflächig darstellen lassen?

[phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?

Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?