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 Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )
» Beitrag von Halbmondfarn in Einstellen der Profilfelder funktioniert nicht
( 1 )
[phpBB2] Bildanzeige vom Slider auf Bild setzen?
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] Bildanzeige vom Slider auf Bild setzen?
Ich habe den Code vom Slider von diesem Tutorial nur möchte ich gerne die 4x Punkte unter den Bildern aufs Bild schieben. Wenn ich die Leiste aufs Bild schiebe, verschwindet diese hinter den Bildern nur möchte ich, dass die Leiste sichtbar bleibt. Es geht ums Testforum 2!
Bei dieser Codestelle kann ich zwar alles verschieben nur wie mache die die Leiste auf den Bildern sichtbar?
Hier der gesamte Code vom Slider:
Bei dieser Codestelle kann ich zwar alles verschieben nur wie mache die die Leiste auf den Bildern sichtbar?
- Code:
/*
Pagination
*/
.pagination {
margin:3px auto 0;
width:65px;
}
.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;
}
Hier der gesamte Code vom Slider:
- 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:3px auto 0;
width:65px;
}
.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>
Zuletzt von silberling am So 18 Aug 2013 - 21:58 bearbeitet; insgesamt 1-mal bearbeitet
silberling- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Re: [phpBB2] Bildanzeige vom Slider auf Bild setzen?
- Spoiler:
- Huhu, also ich hab mich mal mit meinem nicht können mit deinem Problem so nebenher beschäftigt, und mir ist aufgefallen (auch wenn ich den Slyder absolut nicht gebrauchen kann und nciht verstehe, und lieber das stepcarousel selbst gecodet habe weil cih dann auch text reinbringen kann Mein Slyder mit text)
aber mir ist aufgefallen, dass deine bilder in einem div code stehen und das teil dass du über die bilder drüber legen willst in einem anderen....
es wäre einfacher zu erklären wenn der code (html code halt) hier auch zur Verfügung gestellt wäre ;)könntest du den noch posten dann kann ich dir farbig markieren was ich meine
soooo hey ich nochmal mit einem Edit
Ich dussel hab nicht gesehen, dass du den code ja mitgepostet hattest und zwar vollständig
wenn du dir deinen css code ansiehst dann siehst du immer diesen z Code also zb:
- Spoiler:
- #slides .next,#slides .prev {
position:absolute;
top:115px;
left:5px;
width:24px;
height:43px;
display:block;
z-index:101;
}
dieses Z ist minder trikreich, dasjenige ding, welches den höchsten z - Wert verzeichnet wird am meisten im Vordergrund gesehen. ich hab jetzt einfach mal pauschal das hier statt deinem vorangehenden code hingeschrieben:
- Code:
.pagination {
margin:-230px auto 0;
width:65px;
position: absolute;
z-index: 102;}
du siehst der slyder ist oben in der linken ecke ich weiß ja nicht wo du ihn genau haben magst
da ich nicht weiß wo genau du die Punkte haben willst und sie ja vllt auch eher rechts sein sollen hab ich noch die Komponente right hinzugefügt:
- Code:
.pagination {
margin:-230px auto 0;
width:65px;
position: absolute;
z-index: 102;
right: 190px;}
wie du siehst hier eher rechts der mitte.
jetzt musst du eigentlich nur noch den code abändern und dann die Zahlen deinen Wünschen entsprechend anpassen Ich hoffe meine Antwort war dir hilfreich und es geht nun so wie du willst
Raylan- Geselle
- Beiträge : 77
Anmeldedatum : 06.11.12
Re: [phpBB2] Bildanzeige vom Slider auf Bild setzen?
Danke für die Lösung!
silberling- Meister
- Beiträge : 277
Anmeldedatum : 02.02.13
Ähnliche Themen
» [phpBB2]Bilderstempel über ein Bild setzen
» [phpBB2] Slider
» [phpBB2] Slider - Pagination ersetzen
» [phpBB2] Slider ohne Bilder?
» [phpBB2] Slider mit Menü
» [phpBB2] Slider
» [phpBB2] Slider - Pagination ersetzen
» [phpBB2] Slider ohne Bilder?
» [phpBB2] Slider mit Menü
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