News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 5
Seite [1]
tobimo


King for a day




Beiträge: 253
# Thema - 24.06.2010 um 20:26 Uhr
Hallo,

ich wollte gerne mal den DynamicDrive ContentSlider ausprobieren.
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

Diesen Code habe ich wie folgt angepasst:

<div style="width: 233px; height: 31px;">
<div style="float: left; width: 114px;">
<img src="Bilder/warscentertitle.png" alt="Wars Center" />
</div>
<div style="float: left; width: 119px;">
<a href="javascript:featuredcontentslider.jumpTo('slider1', 1)">Test</a>
<a href="javascript:featuredcontentslider.jumpTo('slider1', 2)">Bla</a>
</div>


<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="Bilder/warscenter1.png" />
</div>

<div class="contentdiv">
<img src="Bilder/warscenter2.png" />
</div>


</div>


<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: ["<img src='Bilder/warscenterlast.png' style='float: left;' />","<img src='Bilder/warscenterupcoming.png' style='float: left' />"], //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
&#125

</script>


Das einzigste Problem ist nun, dass wenn ich das Bild tauschen will, unter der Box das zweite Bild kurz angezeigt wird, bevor es dann an der richtigen Stelle erscheint!

Dies passiert nicht mehr, sobald ich enablefade auf false setze..
Und NUR wenn ich diesen Teil hier benutze:
<a href="javascript:featuredcontentslider.jumpTo('slider1', 1)">Test</a>
<a href="javascript:featuredcontentslider.jumpTo('slider1', 2)">Bla</a>



Weiß jemand woran das liegt bzw. wie ich das beheben könnte?


Zuletzt editiert von tobimo am 24.06.2010 um 20:35 Uhr (1x Editiert)
Inaktiv
RaPiD


Geekboy




Beiträge: 1192
# Antwort: 1 - 24.06.2010 um 20:35 Uhr
Sowas hier wie rechts ??
http://www.feinspielen.eu



index codepaste:
<div class="pagination1" id="paginate-slider1">
<div id="sBoxLink1">
<a href="#" class="toc"><img src="images/slider/spacer.gif" border="0" /></a></div>
<div id="sBoxLink2">
<a href="#" class="toc"><img src="images/slider/spacer.gif" border="0" /></a></div>
</div>

<div id="slider1">
<div class="contentdiv">
<div class="nwars" style="margin-top:2px; margin-left:1px;">
{wars:navtop}
</div>
</div>

<div class="contentdiv">
<div class="lwars" style="margin-top:4px; margin-left:3px;">
{wars:navlist2}
</div>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [false, 0.5], //[true/false, fadedegree]
autorotate: [true, 18000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
} } )
</script>
</div>


ContentSlider.css codepaste:
/* -------------- SLIDER 1 --------------- */
.pagination1{
float:left;
margin-top:0px;
margin-left:11px;
margin-right:0px;
margin-bottom:0px;
width:194px;
height:22px;
}
.contentdiv{
float:left;
filter:progid: DXImageTransform.Microsoft.alpha(opacity=100);
visibility:hidden;
-moz-opacity:1;
opacity:1;
}
/* -------------- BUTTON 1 -------------- */
#sBoxLink1 a img{
background:url(images/slider/navi_nwars.png) no-repeat;
margin:0px;
float:left;
width:96px;
height:25px;
}
#sBoxLink1 a img:hover, #sBoxLink1 a.selected img{
background:url(images/slider/hovers/hover_nwars.png) no-repeat;
}
.nwars{
background:url(images/db/versus.png) no-repeat top;
float:left;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:258px;
height:100%;
}
/* -------------- BUTTON 2 -------------- */
#sBoxLink2 a img{
background:url(images/slider/navi_lwars.png) no-repeat;
margin:0px;
float:left;
width:96px;
height:25px;
}
#sBoxLink2 a img:hover, #sBoxLink2 a.selected img{
background:url(images/slider/hovers/hover_lwars.png) no-repeat;
}
.lwars{
float:left;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:250px;
height:100%;
}


Zuletzt editiert von RaPiD am 24.06.2010 um 20:41 Uhr (7x Editiert)
Inaktiv
|
tobimo
Thread-Ersteller


King for a day




Beiträge: 253
# Antwort: 2 - 24.06.2010 um 21:02 Uhr
@ RaPiD:
Ja, vom Prinzip her schon. Nur hatte der Coder anscheinend dasselbe Problem wie ich, dass es mit Fade nicht klappt! Deshalb ist dort vermutlich auch fade auf false gesetzt.


Aber ich habe nun eine Lösung gefunden, nach mehr als 3 Stunden probieren, die einwandfrei klappt (mit fade):

Ich schreibe es für alle die ebenfalls Dynamic Drive mit verschiedenen Zuständen von Bild-Links haben wollen mal auf:

1. toc muss auf markup gesetzt werden!!
2. dann kann man in den div
<div id="paginate-slider1" class="pagination">
<a class="toc toc1" href="#1" rel="1"></a><a class="toc toc2" href="#2" rel="2"></a>
</div>
seine eigenen Links reinschreiben!
3. class="toc" muss immer bestehen bleiben, sonst funktioniert die Verlinkung nicht mehr.

Der Rest ist reine CSS-Arbeit!



Zuletzt editiert von tobimo am 24.06.2010 um 22:05 Uhr (2x Editiert)
Inaktiv
|
tobimo
Thread-Ersteller


King for a day




Beiträge: 253
# Antwort: 3 - 04.09.2010 um 22:21 Uhr
ich grabe diesen Thread nun nochmal aus...

und zwar habe ich eine Switch-Anzeige zwischen Latest Wars und Next Wars. Die Auswahl-Buttons sind mit einer normalen Grafik und einer hover-Grafik gestaltet.

Nun möchte ich aber nicht nur, dass die hover-Grafik bei Mouseover angezeigt wird, sondern auch wenn der jeweilige Inhalt gerade aktiv eingeblendet wird.

Mit anderen Worten, wenn ich auf den Auswahl Button "Next Wars" gehe, und diesen wieder verlasse, wird ja in dem contentdiv die Liste der Next Wars angezeigt... Nun soll aber zusätzlich noch dieser "Effekt" beim Next Wars Button solange bleiben, wie die Next Wars angezeigt werden. (Wechselt ja alle 10 Sekunden automatisch)

Ich hoffe ihr versteht was ich meine, und könnt mir helfen


Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
# Antwort: 4 - 04.09.2010 um 22:38 Uhr
Was benutzt du den zum wechseln?
Den oben angegebenen Slider?

Ansich ist bei diesen dynamic drive sachen immer eine active oder selected class mit dabei,
die genau das erwirkt das du möchtest


Inaktiv
|
tobimo
Thread-Ersteller


King for a day




Beiträge: 253
# Antwort: 5 - 05.09.2010 um 00:51 Uhr
Ah okey Vielen Dank!

Hab jetzt via CSS den Link mit 2 Klassen definiert (einmal Klassenname des Buttons + .selected) und dann klappt es!

Manchmal ist es einfacher als man denkt


Zuletzt editiert von tobimo am 05.09.2010 um 00:55 Uhr (1x Editiert)
Inaktiv
|
Antworten: 5
Seite [1]


Sie müssen sich registrieren, um zu antworten.


ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo