Lexi Help
Die neuesten Themen
» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Heute um 20:56

» Begriff : "merken"
von inde Heute um 19:31

» Private Nachrichten
von inde Heute um 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde Gestern um 22:24

» Ad Ware im Forum?
von inde Gestern um 20:38

» [Update] Neues Theme der mobilen Version V2
von #Frank Gestern um 16:57

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Do 22 Sep 2016 - 20:30

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

» Forumseite mit Mailware verseucht ?
von inde Mo 19 Sep 2016 - 20:31

» Ich kann keine Hintergrundbilder hochladen
von Serv Mo 19 Sep 2016 - 19:59

» SQL Zugang
von inde Mo 19 Sep 2016 - 18:56

Partner
free forum

[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

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Nutzerprofil 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

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil 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>

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Nutzerprofil 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?

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil 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?

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Nutzerprofil 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

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil 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

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Nutzerprofil 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 ^_^

Raylan
Neuling
Neuling

Weiblich Beiträge : 54
Anmeldedatum : 06.11.12
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten