Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript]Slider
Forum PHP.pl > Forum > Przedszkole
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.

  1. <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>
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
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <script src="http://malsup.github.io/jquery.cycle2.js"></script>
  3. <script src="http://malsup.github.io/jquery.cycle2.center.js"></script>

po czym
  1. <div class="slideshow"
  2. data-cycle-fx=scrollHorz
  3. data-cycle-timeout=2000
  4. data-cycle-center-horz=true
  5. data-cycle-center-vert=true
  6. >
  7. <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>
  8. <span>test</span>
  9. </div>

następnie dla CSS:
  1. .slideshow {
  2. background: #cde3a4;
  3. padding: 10px;
  4. color: #436500;
  5. border: 1px solid #a8c471;
  6. text-shadow: rgba(255,255,255,0.55) 0px 1px 0px;
  7. line-height: 1.6;
  8. font-size: 12px;
  9. -webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
  10. -moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
  11. box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
  12. margin: 0 auto;
  13. display: block;
  14. }
  15. .slideshow span { opacity: 0; filter:alpha(opacity=0); }


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.
trueblue
Dodaj kolejną linijkę po załączeniu skryptów:
  1. <script>$.fn.cycle.defaults.slides='>span';</script>


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

Cały kod:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <script src="http://malsup.github.io/jquery.cycle2.js"></script>
  3. <script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
  4. <script type="text/javascript" src="images/shoutbox.js"></script>
  5.  
  6. <script>$.fn.cycle.defaults.slides='>span';</script>
  7.  
  8. <script type="text/javascript"><!--
  9. onload = requestNewMessages;
  10. var updateInterval = {REFRESH_SB};
  11. -->
  12. </script>
  13.  
  14. <div id="hmra" style="display: ''; position: relative;">
  15. <table width="100%" border="0" cellspacing="1" cellpadding="0" class="forumline">
  16. <tr>
  17. <td id="section" width="100%" align="left" class="cellpicgl">
  18. <div class="info" style="width:100%;position:relative;">
  19. <center><font color="#161616">ShoutBox</font></center>
  20. </div>
  21. </td>
  22. </tr>
  23.  
  24.  
  25. <table id="SB_content" border="0" align="center" cellpadding="0" cellspacing="1" class="forumline" width="100%">
  26.  
  27. <div class="slideshow"
  28. data-cycle-fx=scrollHorz
  29. data-cycle-timeout=2000
  30. data-cycle-center-horz=true
  31. data-cycle-center-vert=true
  32. >
  33. <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>
  34. <span><b>Aktualności:</b> Wspomóż nasz projekt za darmo! To potrwa tylko chwilę: <a
  35.  
  36. href="http://zt-mta.pl/freedot.php">Wejdź</a></span>
  37. </div>
  38. <tr>
  39. <td>
  40. <div id="SB_box" style="width:100%; height:250px; overflow:auto;">
  41. <div id="SB_inner">
  42.  
  43. </div>
  44. </div>
  45. </td>
  46. </tr>
  47. <tr>
  48.  
  49. <td class="tlowiad" style="text-align: center;">
  50. <span id="message12">{L_GG_MES}:</span>
  51. <input type="text" class="wklesly" id="messageBox" value="" maxlength="{MAXLENGHT}" size="55" onkeydown="handleKey(event);">
  52. <input type="button" class="sb_buttony" id="wyslij" value="{L_SEND}" onclick="sendMessage();" style="margin-right:2px;">
  53. <input type="button" class="sb_buttony" id="emotki" value="Emotki" onclick="emotki();">
  54. <input type="button" value="Arch." class="sb_buttony" onClick="self.location.href=('arch_sb.php')"> <input type="button" value="FAQ"
  55.  
  56. class="sb_buttony" onClick="self.location.href=('viewtopic.php?p=738')">
  57. <input type="button" class="post" style="display: none;" id="zmien" value="{L_EDIT_SB}" onclick="sendEditShout();">
  58. <input type="button" class="post" style="display: none;" id="anuluj1" value="{L_CANCEL_SB}" onclick="anuluj1();">
  59. <input type="button" class="post" style="display: none; width: 560px;" id="refresh12" value="{L_REFRESH_SB}"
  60.  
  61. onclick="refreshSB12();">
  62. <input type="hidden" id="userName" value="{USER_ID}" disabled="disabled">
  63. <input type="hidden" id="userId" value="" disabled="disabled">
  64. </td>
  65. </tr>
  66. <!-- BEGIN smilies_emotki -->
  67. <tr id="ramka" style="display: none;">
  68. <td class="row1" style="text-align: center;">
  69. <!-- END smilies_emotki -->
  70. <!-- BEGIN smilies_row -->
  71. <!-- BEGIN smilies_col -->
  72. <img src="{smilies_row.smilies_col.SMILEY_IMG}" style="cursor:pointer;margin:2px;border:0;"
  73.  
  74. onclick="wstawianieSB('{smilies_row.smilies_col.SMILEY_CODE}',1);" title="{smilies_row.smilies_col.SMILEY_CODE}">
  75. <!-- END smilies_col -->
  76. <!-- END smilies_row -->
  77. <!-- BEGIN smilies_emotki -->
  78. </td>
  79. </tr>
  80. <!-- END smilies_emotki -->
  81. </table>
  82. </div>
  83. <div id="hmra2" style="display: none; position: relative;">
  84. <table width="100%" border="0" cellspacing="1" cellpadding="0" class="forumline">
  85. <tr>
  86. <td id="section" width="100%" align="left" class="cellpicgl">
  87. <div class="info" style="width:100%;position:relative;">
  88. </div><center><font color="#161616">ShoutBox</font></center>
  89. </div>
  90. </td>
  91. </tr>
  92. </table>
  93. </div>
  94. <script language="javascript" type="text/javascript">
  95. <!--
  96. if(GetCookie('hmra3') == '2') ShowHide('hmra', 'hmra2', 'hmra3', '1');
  97. //-->
trueblue
  1. $.fn.cycle.defaults.autoSelector='.slideshow';
  2. $.fn.cycle.defaults.slides='>span';
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
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


Próbowałem też wrzucić na serwer FTP ten skrypt:
  1. <script src="jquery.min.js"></script>

niestety, to samo - wiadomości się nie pojawiają.
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.
trueblue
  1. jQuery(function($) {
  2. $.fn.cycle.defaults.autoSelector='.slideshow';
  3. $.fn.cycle.defaults.slides='>span';
  4. });
playdewu
Teraz i slider i wiadomości na shoutboxie nie działają.

Problem rozwiązany. Wystarczyło użyć nowszej wersji jQuery:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>


trueblue, dziękuję za pomoc! wink.gif

Mam jeszcze jedno pytanko. Istnieje jakiś sposób aby podczas najechania kursorem przewijanie się zatrzymywało?
trueblue
$.fn.cycle.defaults.pauseOnHover=true;
playdewu
Dzięki, jesteś wielki! smile.gif
t3amh4cks
dzięki! biggrin.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.