Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Slider
Outside
post
Post #1





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 28.08.2013

Ostrzeżenie: (0%)
-----

Od dwóch dni szukam rozwiązania w internecie, próbuje przerabiać różne skrypty i nic z tego, a mianowicie mam sobie stronkę
http://ezeszyt.ugu.pl/str i jest tam ranking i terminarz, chciałbym aby to było przesuwane, posiada ktoś może gotowy taki slider, ktory będzie po prostu przesuwał tamto po wcisnieciu strzzałek na bokach?
Na googlach dwa dni przeszukane i poznajdywałem tylko gotowe rozwiązania, które obsługują tylko zdjęcia, a jak wrzucam tam tekst to jest pełno problemów ze stroną..
Go to the top of the page
+Quote Post
phpion
post
Post #2





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Chociażby to:
http://jquerytools.org/demos/scrollable/index.html
Korzystam, fajny plugin.
Go to the top of the page
+Quote Post
Outside
post
Post #3





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 28.08.2013

Ostrzeżenie: (0%)
-----

Da rady to przerobic aby uzyc wlasne strzalki do przewijania i gdzie wrzucic ten kod javascript? Miedzy znacznikami <script> </script> w <head> tak?

Jest ktoś w stanie mi pomóc?(IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
com
post
Post #4





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

wystarczy zajrzeć do źródła strony (IMG:style_emoticons/default/wink.gif) http://jquerytools.org/media/css/scrollable-buttons.css odpowiada za ostylowanie strzałek, żeby tego użyć po pierwsze musisz mieć jQuery a
[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2.   // initialize scrollable
  3.   $(".scrollable").scrollable();
  4. });
[JAVASCRIPT] pobierz, plaintext


Miedzy znacznikami <script> </script> tak jak powiedziałeś nie koniecznie w head ale możesz (IMG:style_emoticons/default/wink.gif)

Na marginesie popraw sobie kodowanie na stronie (IMG:style_emoticons/default/wink.gif) a & wstawiaj za pomocą znacznika &amp; (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Outside
post
Post #5





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 28.08.2013

Ostrzeżenie: (0%)
-----

Wszystko wstawiłem jak trzeba, kod jest poniżej, a mimo to nie działa.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. 	"http://www.w3.org/TR/html4/DTD/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Polish Summer League</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  8.  
  9. <script type="text/javascript">
  10. $(function() {
  11.   // initialize scrollable
  12.   $(".scrollable").scrollable();
  13. });
  14. </script>
  15.  
  16.  
  17.  <style type="text/css">
  18.  /*
  19. root element for the scrollable.  when scrolling occurs this
  20. element stays still.
  21. */
  22. .scrollable {
  23.   /* required settings */
  24.   position:relative;
  25.   overflow:hidden;
  26.   width: 660px;
  27.   height:90px;
  28. }
  29.  
  30. /*
  31. root element for scrollable items. Must be absolutely positioned
  32. and it should have a extremely large width to accommodate scrollable
  33. items.  it's enough that you set width and height for the root element
  34. and not for this element.
  35. */
  36. .scrollable .items {
  37.   /* this cannot be too large */
  38.   width:20000em;
  39.   position:absolute;
  40. }
  41.  
  42. /*
  43. a single item. must be floated in horizontal scrolling.  typically,
  44. this element is the one that *you* will style the most.
  45. */
  46. .items div {
  47.   float:left;
  48. }
  49.  
  50. /* this makes it possible to add next button beside scrollable */
  51. .scrollable {
  52.     float:left;
  53. }
  54.  
  55. /* prev, next, prevPage and nextPage buttons */
  56. a.browse {
  57.     background:url(left-mini.png) no-repeat;
  58.     display:block;
  59.     width:30px;
  60.     height:30px;
  61.     float:left;
  62.     margin:40px 10px;
  63.     cursor:pointer;
  64.     font-size:1px;
  65. }
  66.  
  67. /* right */
  68. a.right {   background-position: 0 -30px; clear:right; margin-right: 0px;}
  69. a.right:hover { background-position:-30px -30px; }
  70. a.right:active { background-position:-60px -30px; }
  71.  
  72. /* left */
  73. a.left { margin-left: 0px; }
  74. a.left:hover  { background-position:-30px 0; }
  75. a.left:active { background-position:-60px 0; }
  76.  
  77. /* up and down */
  78. a.up, a.down  {
  79.     float: none;
  80.     margin: 10px 50px;
  81. }
  82.  
  83. /* up */
  84. a.up:hover { background-position:-30px 0; }
  85. a.up:active { background-position:-60px 0; }
  86.  
  87. /* down */
  88. a.down { background-position: 0 -30px; }
  89. a.down:hover { background-position:-30px -30px; }
  90. a.down:active { background-position:-60px -30px; }
  91.  
  92.  
  93. /* disabled navigational button */
  94. a.disabled {
  95.     visibility:hidden !important;
  96. }
  97. /*
  98.   root element for the scrollable.
  99.   when scrolling occurs this element stays still.
  100.   */
  101. .scrollable {
  102.  
  103.     /* required settings */
  104.     position:relative;
  105.     overflow:hidden;
  106.     width: 550px;
  107.     height:120px;
  108.  
  109.     /* custom decorations */
  110.     border:1px solid #ccc;
  111.     background:url(/media/img/gradient/h300.png) repeat-x;
  112. }
  113.  
  114. /*
  115.    root element for scrollable items. Must be absolutely positioned
  116.    and it should have a extremely large width to accomodate scrollable
  117.    items.  it's enough that you set the width and height for the root
  118.    element and not for this element.
  119. */
  120. .scrollable .items {
  121.     /* this cannot be too large */
  122.     width:20000em;
  123.     position:absolute;
  124.     clear:both;
  125. }
  126.  
  127. .items div {
  128.     float:left;
  129.     width:680px;
  130. }
  131.  
  132. /* single scrollable item */
  133. .scrollable img {
  134.     float:left;
  135.     margin:20px 5px 20px 21px;
  136.     background-color:#fff;
  137.     padding:2px;
  138.     border:1px solid #ccc;
  139.     width:100px;
  140.     height:75px;
  141.  
  142.     -moz-border-radius:4px;
  143.     -webkit-border-radius:4px;
  144. }
  145.  
  146. /* active item */
  147. .scrollable .active {
  148.     border:2px solid #000;
  149.     position:relative;
  150.     cursor:default;
  151. }
  152.  
  153. </style>
  154. </head>
  155. <body>
  156.  
  157. <div style="margin:0 auto; width: 634px; height:120px;">
  158. <!-- "previous page" action -->
  159. <a class="prev browse left"></a>
  160.  
  161. <!-- root element for scrollable -->
  162. <div class="scrollable" id="scrollable">
  163.  
  164.   <!-- root element for the items -->
  165.   <div class="items">
  166.  
  167.     <!-- 1-5 -->
  168.     <div>
  169.       <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
  170.       <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
  171.       <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
  172.       <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
  173.     </div>
  174.  
  175.     <!-- 5-10 -->
  176.     <div>
  177.       <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
  178.       <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
  179.       <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
  180.       <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
  181.     </div>
  182.  
  183.     <!-- 10-15 -->
  184.     <div>
  185.       <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
  186.       <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
  187.       <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
  188.       <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
  189.     </div>
  190.  
  191.   </div>
  192.  
  193. </div>
  194.  
  195. <!-- "next page" action -->
  196. <a class="next browse right"></a>
  197. </div>
  198.  
  199.  
  200.  
  201.  
  202. </body>
  203. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
com
post
Post #6





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

daj tam zamiast 
[HTML] pobierz, plaintext 
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
[HTML] pobierz, plaintext

to
[HTML] pobierz, plaintext 
  1. <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
[HTML] pobierz, plaintext



a
Kod
<script type="text/javascript">
$(function() {
// initialize scrollable
$(".scrollable").scrollable();
});
</script>

najlepiej po 
[HTML] pobierz, plaintext 
  1. <!-- "next page" action -->
  2. <a class="next browse right"></a>
  3. </div>
[HTML] pobierz, plaintext


btw priv nie służy do rozwiązywania problemów (IMG:style_emoticons/default/wink.gif)

Ten post edytował com 25.09.2013, 18:41:53
Go to the top of the page
+Quote Post
Outside
post
Post #7





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 28.08.2013

Ostrzeżenie: (0%)
-----

Jest jescze jeden problem, pomimo tego, że dobrze znam css to nie mam bladego pojęcia jak to rozwiązać.
Strzałki są tam zrobione takim zdjęciem
(IMG:http://jquerytools.org/media/img/scrollable/arrow/hori_large.png)
W jaki sposób mogę umieścić tam swoje strzałki na lewo i prawo?
Go to the top of the page
+Quote Post
com
post
Post #8





Grupa: Zarejestrowani
Postów: 3 034
Pomógł: 366
Dołączył: 24.05.2012

Ostrzeżenie: (0%)
-----

poczytaj na temat sprite css to rozwiąże twój problem (IMG:style_emoticons/default/wink.gif) nie żebym się prosił ale mogę liczyć na pomógł? (IMG:style_emoticons/default/tongue.gif) dlatego właśnie nie rozwiązuje się problemów na priv, ale to na przyszłość (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Outside
post
Post #9





Grupa: Zarejestrowani
Postów: 63
Pomógł: 1
Dołączył: 28.08.2013

Ostrzeżenie: (0%)
-----

Oczywiscie, ze tak. juz dane (IMG:style_emoticons/default/smile.gif)
O sprite css nie wiedzialem, ale sie wlasnie dowiedzialem i wielkie dzieki za to, pozniej stestuje to wszystko jeszcze raz, dziekuje bardzo za pomoc (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 21:39
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn