Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» [phpBB3] Kategorien und Foren unsichtbar machen
von Coffy Heute um 16:11

» Registrierung defekt
von cybercrash Gestern um 22:49

» [phpBB2] index_box.tpl & Avatare verstecken
von Dr.Keks Gestern um 22:40

» [phpBB2] Avatare für Gäste unsichtbar
von Dr.Keks Gestern um 22:37

» Admin Email Ändern
von Bigtuber Gestern um 17:05

» Sternzeichen Wassermann endet am falschen Datum / Fische beginnt zu früh
von VampirinJayna Gestern um 14:22

» [phpBB3] Smilies können nicht neu erstellt werden
von Coffy Gestern um 6:13

» [Mitteilung] ModernBB - Eine neue Foren-Version für Forumieren-Foren
von chamutv Di 28 März 2017 - 20:43

» [phpBB3] [phpBB3] Forum nicht sicher
von Bigtuber Di 28 März 2017 - 17:43

» Passwort vergessen
von Bigtuber Di 28 März 2017 - 14:58

» [#9357]-[phpBB2] Registrierung funktioniert nicht
von amti Di 28 März 2017 - 14:17

» [Sammelthread] Unangebrachte Werbung
von Marcel´s Schnatterbude Mo 27 März 2017 - 9:46

» Admin Passwort vergessen
von ABC-Man Mo 27 März 2017 - 9:01

» Kalender
von Bigtuber So 26 März 2017 - 18:04

» Gifs einfügen
von Bigtuber So 26 März 2017 - 14:58

» Warrior Cats - NordClans
von Eislicht So 26 März 2017 - 0:28

www.forumieren.de

[phpBB2] Sliderbilder vollflächig darstellen lassen?

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Sliderbilder vollflächig darstellen lassen?

Beitrag von silberling am 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:



so sollte es aussehen:


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
avatar
silberling
Stammgast
Stammgast

Männlich Beiträge : 268
Anmeldedatum : 02.02.13
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von Raylan am 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="http://img545.imageshack.us/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)


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:

Code:
<table border="0" bgcolor="#141414"><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>
(der Iframe Code korrigiert und mit abgeänderter Breite)

GlG Ray Very Happy
avatar
Raylan
Neuling
Neuling

Weiblich Beiträge : 63
Anmeldedatum : 06.11.12
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von silberling am 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>
avatar
silberling
Stammgast
Stammgast

Männlich Beiträge : 268
Anmeldedatum : 02.02.13
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von Raylan am 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?
avatar
Raylan
Neuling
Neuling

Weiblich Beiträge : 63
Anmeldedatum : 06.11.12
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von silberling am Mo 19 Aug 2013 - 12:21

hmm da passiert nix?
avatar
silberling
Stammgast
Stammgast

Männlich Beiträge : 268
Anmeldedatum : 02.02.13
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von Raylan am 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 Wink
avatar
Raylan
Neuling
Neuling

Weiblich Beiträge : 63
Anmeldedatum : 06.11.12
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von silberling am Mo 19 Aug 2013 - 12:38

an dem lag es. thx nochmal!

lg
silber
avatar
silberling
Stammgast
Stammgast

Männlich Beiträge : 268
Anmeldedatum : 02.02.13
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

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

Beitrag von Raylan am Mo 19 Aug 2013 - 12:39

Bitte schön, wenn ich helfen konnte ^_^
avatar
Raylan
Neuling
Neuling

Weiblich Beiträge : 63
Anmeldedatum : 06.11.12
keine
Firefox phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten