[PHP][JavaScript]Slider Opcje

[playdewu]

Witajcie.
Potrzebuję skryptu na przewijany tekst, - tak aby powiedzmy co 10s slider z tekstem się przewijał a na jego miejsce pojawiał się nowy tekst.
Coś takiego jest np. tutaj: http://zarabiara.pl/ na samym dole strony "Banery reklamowe".

Próbowałem różnych skryptów niestety żaden nie dawał mi pożądanego efektu.
Oto link do mojej strony: http://zt-mta.pl/
Slider chciałbym umieścić w Shoutboxie, w tym zielonym boxie.

[HTML] pobierz, plaintext 
<span class="message_shoutbox"><b>Rekrutacja:</b> Poszukujemy osoby na stanowisko skryptera! Więcej informacji <a href="http://zt-mta.pl/viewtopic.php?t=242">tutaj.</a></span> 
[HTML] pobierz, plaintext 

Ten post edytował playdewu 16.11.2014, 17:42:34

[kamilo818]

Polecam cycle 2

[playdewu]

Jak mam tego użyć dla tekstu?

[kamilo818]

Wstaw w div tekst i już.

Cycle2 jako slajd używa elementu który sam określisz. Może nim być div, img, li, span itp

[playdewu]

Zgodnie z instrukcją podaną tutaj: http://jquery.malsup.com/cycle2/demo/center.php
Dokleiłem linijki do pliku

[HTML] pobierz, plaintext 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
[HTML] pobierz, plaintext 

po czym

[HTML] pobierz, plaintext 
<div class="slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-center-horz=true
    data-cycle-center-vert=true
    >
<span><b>Rekrutacja:</b> Poszukujemy osoby na stanowisko skryptera! Więcej informacji <a href="http://zt-mta.pl/viewtopic.php?t=242">tutaj.</a></span>
<span>test</span>
</div>
[HTML] pobierz, plaintext 

następnie dla CSS:

[CSS] pobierz, plaintext 
.slideshow {
background: #cde3a4;
padding: 10px;
color: #436500;
border: 1px solid #a8c471;
text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;
line-height: 1.6;
font-size: 12px;
-webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
margin: 0 auto;
display: block;
}
.slideshow span { opacity: 0; filter:alpha(opacity=0); }
[CSS] pobierz, plaintext 

Efektu brak. Zielony pasek bez żadnego tekstu.

@EDIT
Zauważyłem, że po najechaniu na ten zielony pasek w miejsce tekstu zmienia się kursor myszy na tekstowy - tak jakby tekst był, ale niewidzialny.

Odświeżam.

Ten post edytował playdewu 20.11.2014, 18:34:43

[trueblue]

Dodaj kolejną linijkę po załączeniu skryptów:

[HTML] pobierz, plaintext 
<script>$.fn.cycle.defaults.slides='>span';</script>
[HTML] pobierz, plaintext 

[playdewu]

Teraz zamiast jednego pokazują się dwa spany (zielone paski) z tekstem.

Cały kod:

[HTML] pobierz, plaintext 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script> 
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<script type="text/javascript" src="images/shoutbox.js"></script>
 
<script>$.fn.cycle.defaults.slides='>span';</script>
 
<script type="text/javascript"><!--
onload = requestNewMessages;
var updateInterval = {REFRESH_SB};
-->
</script> 
 
<div id="hmra" style="display: ''; position: relative;"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="forumline"> 
<tr> 
<td id="section" width="100%" align="left" class="cellpicgl">
<div class="info" style="width:100%;position:relative;">
<center><font color="#161616">ShoutBox</font></center>
</div> 
</td>
</tr> 
 
 
<table id="SB_content" border="0" align="center" cellpadding="0" cellspacing="1" class="forumline" width="100%">
 
<div class="slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-center-horz=true
    data-cycle-center-vert=true
    >
<span><b>Rekrutacja:</b> Poszukujemy osoby na stanowisko skryptera! Więcej informacji <a href="http://zt-mta.pl/viewtopic.php?t=242">tutaj.</a></span>
<span><b>Aktualności:</b> Wspomóż nasz projekt za darmo! To potrwa tylko chwilę: <a 
 
href="http://zt-mta.pl/freedot.php">Wejdź</a></span>
</div>
	<tr>
		<td>
			<div id="SB_box" style="width:100%; height:250px; overflow:auto;">
				<div id="SB_inner">
 
				</div>
			</div>
		</td>
	</tr>
	<tr>
 
	<td class="tlowiad" style="text-align: center;">
			<span id="message12">{L_GG_MES}:</span>
			<input type="text" class="wklesly"  id="messageBox" value="" maxlength="{MAXLENGHT}" size="55" onkeydown="handleKey(event);">
	<input type="button" class="sb_buttony" id="wyslij" value="{L_SEND}" onclick="sendMessage();" style="margin-right:2px;">
<input type="button" class="sb_buttony" id="emotki" value="Emotki" onclick="emotki();">
			<input type="button" value="Arch." class="sb_buttony" onClick="self.location.href=('arch_sb.php')"> <input type="button" value="FAQ" 
 
class="sb_buttony" onClick="self.location.href=('viewtopic.php?p=738')">
		<input type="button" class="post" style="display: none;" id="zmien" value="{L_EDIT_SB}" onclick="sendEditShout();">
			<input type="button" class="post" style="display: none;" id="anuluj1" value="{L_CANCEL_SB}" onclick="anuluj1();">
			<input type="button" class="post" style="display: none; width: 560px;" id="refresh12" value="{L_REFRESH_SB}" 
 
onclick="refreshSB12();">
			<input type="hidden" id="userName" value="{USER_ID}" disabled="disabled">
			<input type="hidden" id="userId" value="" disabled="disabled">
		</td>
	</tr>
	<!-- BEGIN smilies_emotki -->
	<tr id="ramka" style="display: none;">
		<td class="row1" style="text-align: center;">
	<!-- END smilies_emotki -->
			<!-- BEGIN smilies_row -->
			<!-- BEGIN smilies_col -->
			<img src="{smilies_row.smilies_col.SMILEY_IMG}" style="cursor:pointer;margin:2px;border:0;" 
 
onclick="wstawianieSB('{smilies_row.smilies_col.SMILEY_CODE}',1);" title="{smilies_row.smilies_col.SMILEY_CODE}">
			<!-- END smilies_col -->
			<!-- END smilies_row -->
	<!-- BEGIN smilies_emotki -->
		</td>
	</tr>
	<!-- END smilies_emotki -->
</table>
</table> 
</div> 
<div id="hmra2" style="display: none; position: relative;"> 
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="forumline"> 
<tr> 
<td id="section" width="100%" align="left" class="cellpicgl">
<div class="info" style="width:100%;position:relative;">
</div><center><font color="#161616">ShoutBox</font></center>
</div> 
</td>
</tr> 
</table> 
</div> 
<script language="javascript" type="text/javascript"> 
<!-- 
if(GetCookie('hmra3') == '2') ShowHide('hmra', 'hmra2', 'hmra3', '1'); 
//--> 
</script>
[HTML] pobierz, plaintext 

Ten post edytował playdewu 22.11.2014, 12:21:27

[trueblue]

[HTML] pobierz, plaintext 
<script>
$.fn.cycle.defaults.autoSelector='.slideshow';
$.fn.cycle.defaults.slides='>span';
</script>
[HTML] pobierz, plaintext 

Ten post edytował trueblue 22.11.2014, 12:27:55

[playdewu]

Działa, ale jest jeden problem.
Od teraz każda wiadomość na shoutboxie staje się niewidzialna ;/

[trueblue]

Niewiele mi to mówi.

[playdewu]

Zobacz: http://www.zt-mta.pl/

[trueblue]

"U mnie działa".

[playdewu]

No jak to?
Sprawdzałem na dwóch przeglądarkach, napisałem na shoutboxie "test" wyświetliło tylko autora wiadomości i dwukropek.

[trueblue]

Ach, o to chodzi.
Nie logowałem się, przy próbie niezalogowanego treść jest.
Spróbuj usunąć skrypt i przetestować.

[playdewu]

Działa po przywróceniu oryginalnego skryptu.
Problem prawdopodobnie tkwi w dodaniu diva ze spanami, oryginalnie jest sam span.

@EDIT
Działa po usunięciu tej linijki

[HTML] pobierz, plaintext 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
[HTML] pobierz, plaintext 

Próbowałem też wrzucić na serwer FTP ten skrypt:

[HTML] pobierz, plaintext 
<script src="jquery.min.js"></script>
[HTML] pobierz, plaintext 

niestety, to samo - wiadomości się nie pojawiają.

Ten post edytował playdewu 22.11.2014, 13:40:43

[trueblue]

Na stronie masz 2 skrypt jQuery, a wraz z tym skryptem dołączasz trzeci.
Wyrzuć ten trzeci, o którym piszesz.

[playdewu]

Wyrzucam, to slider przestaje działać. Nic się nie pokazuje.
Wszystkie trzy są niezbędne do prawidłowego działania.

Ten post edytował playdewu 22.11.2014, 13:54:55

[trueblue]

[HTML] pobierz, plaintext 
<script>
jQuery(function($) {
 $.fn.cycle.defaults.autoSelector='.slideshow';
 $.fn.cycle.defaults.slides='>span';
});
</script>
[HTML] pobierz, plaintext 

[playdewu]

Teraz i slider i wiadomości na shoutboxie nie działają.

Problem rozwiązany. Wystarczyło użyć nowszej wersji jQuery:

[HTML] pobierz, plaintext 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
[HTML] pobierz, plaintext 

trueblue, dziękuję za pomoc! (IMG:style_emoticons/default/wink.gif)

Mam jeszcze jedno pytanko. Istnieje jakiś sposób aby podczas najechania kursorem przewijanie się zatrzymywało?

[trueblue]

$.fn.cycle.defaults.pauseOnHover=true;