Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?von Joost Gestern um 18:40
» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54
» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48
» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44
» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04
» Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03
» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41
» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38
» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07
» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51
» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50
» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33
» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53
» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52
» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47
» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17
» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02
» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium ( 2 )
» Beitrag von Joost in Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )
» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )
[phpBB2] Sliderbilder vollflächig darstellen lassen?
2 verfasser
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1 • Teilen
[phpBB2] Sliderbilder vollflächig darstellen lassen?
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:
lg
silber
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>
- 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- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
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)
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:
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.
GlG Ray
<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)
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;
}
- 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>
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>
GlG Ray
Raylan- Geselle
- Beiträge : 77
Anmeldedatum : 06.11.12
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
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:
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- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
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;
}
Raylan- Geselle
- Beiträge : 77
Anmeldedatum : 06.11.12
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
hmm da passiert nix?
silberling- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
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....
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
- 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>
- Code:
<center><iframe src="http://test1000.forumieren.com/h5-slider-breiter-neu" width="895px" height="304px" frameborder="0" scrolling="no"></iframe></center>
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
Raylan- Geselle
- Beiträge : 77
Anmeldedatum : 06.11.12
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
an dem lag es. thx nochmal!
lg
silber
lg
silber
silberling- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Re: [phpBB2] Sliderbilder vollflächig darstellen lassen?
Bitte schön, wenn ich helfen konnte ^_^
Raylan- Geselle
- Beiträge : 77
Anmeldedatum : 06.11.12
Ähnliche Themen
» [phpBB2] Beitrag um Avatar fließen lassen
» [phpBB2] Zufallszitate per Modul anzeigen lassen
» [phpBB2] Chatbox nur im Forumsbereich anzeigen lassen?
» [phpBB2] Kalenderereignisse durch Mitglieder erstellen lassen
» [phpBB2] Onlineanzeige im Profil wie hier anzeigen lassen?
» [phpBB2] Zufallszitate per Modul anzeigen lassen
» [phpBB2] Chatbox nur im Forumsbereich anzeigen lassen?
» [phpBB2] Kalenderereignisse durch Mitglieder erstellen lassen
» [phpBB2] Onlineanzeige im Profil wie hier anzeigen lassen?
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten