Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jCarousel - kilka problemów, pytań
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
ryczy
24.09.2010, 16:31:07
Witam wczoraj próbowałem wgrać sobie skrypt o nazwie: jCarousel - http://sorgalla.com/jcarousel/
Mój kod wygląda tak: 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="/lib/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
  3. <link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
  4. <ul id="mycarousel" class="jcarousel-skin-tango">
  5.    <!-- The content goes in here -->
  6.    <li class="jcarousel-item-1"><img src="./partnerzy/e-rekiny-bwin.png"/></li>
  7.    <li class="jcarousel-item-2"><img src="./partnerzy/e-rekiny-unibet.png"/></li>
  8.    <li class="jcarousel-item-3"><img src="./partnerzy/e-rekiny-doxxbet.png"/></li>
  9. </ul>
  10. <script type="text/javascript">
  11. jQuery(document).ready(function() {
  12.     jQuery('#mycarousel').jcarousel({
  13.         // Configuration goes here
  14.     });
  15. });
  16. </script>
  17. <div class="jcarousel-skin-tango">
  18.   <div class="jcarousel-container">
  19.     <div class="jcarousel-clip">
  20.       <ul class="jcarousel-list">
  21.         </ul>
  22.     </div>
  23.     <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
  24.     <div class="jcarousel-next"></div>
  25.   </div>
  26. </div>
[HTML] pobierz, plaintext


Jak to wygląda w praktyce można sprawdzić na moim forum www.E-REKINY.PL

I teraz pytania:

- czy obrazki jakie będę chciał do tego wstawić muszą mieć takie same wymiary jak budki przy insalacji,
- jak zrobić aby miedzy obrazkami była przerwa,
- no i jak ten cały script rozszerzyć na szerokość mojego forum,
devnul
24.09.2010, 17:53:34
1) nie
2) margin:0 5px; dla li
3) przejżeć /skins/tango/skin.css i odpowiednio wyedytować
ryczy
24.09.2010, 22:01:22
Ok dzięki za pomoc prz pierwszym i trzecim ale nie moge sobie poradzic z drugim jak mam taka linijke np. 

[HTML] pobierz, plaintext 
  1. <li class ="jcarousel-item-1"><img src="./partnerzy/e-rekiny-bwin.png"/></li>
[HTML] pobierz, plaintext


to gdzie wstawić to margin:0 5px;
devnul
24.09.2010, 22:03:31
albo w CSSie przy definicji ostylowania elementu LI albo bezpośrednio w li
[HTML] pobierz, plaintext 
  1. <li class ="jcarousel-item-1" style="margin:0 5px"><img src="./partnerzy/e-rekiny-bwin.png"/></li>
[HTML] pobierz, plaintext
ryczy
24.09.2010, 22:12:07
hmmm.... niestety nie pomogło to w rozdzieleniu obrazków sadsmiley02.gif:
devnul
24.09.2010, 22:16:14
bo to jednak trochę zależy także od Twojego cssa. Spróbuj na siłę:
[HTML] pobierz, plaintext 
  1. <li class ="jcarousel-item-1" style="margin:0 5px !important"><img src="./partnerzy/e-rekiny-bwin.png"/></li>
[HTML] pobierz, plaintext

albo zamiast margin użyj padding, możliwe że jcarousel gdzieś tam w stylach albo w js sobie marginami operuje i przez to ich definicja jest olewana
ryczy
24.09.2010, 22:29:22
No i dalej nic kurde ;/

A w /skins/tango/skin.css jak to znaleźć bo nic mi końcówkami li nie znajduje sciana.gif

devnul
24.09.2010, 22:34:32
bo i nie musi - sprawdź sobie jaką klasę dostaje li prawdopodobnie będzie to jcarousel-item albo cos w tym stylu - możesz to sprawdzić korzystając z narzędzia "wyświetl informacje o elemencie" będącego częścią dodatku webdeveloper toolbar dla firefoxa albo z firebuga przez inspektor obiektów
ryczy
24.09.2010, 23:26:41

Do devnul bo zablokował pw worriedsmiley.gif
1. Ok
2. Sory biggrin.gif
3. Nie pomyślałem
4. Zamieniłem to margin na padding ale nic to nie dało - wiec jak to rozwiązuje sprawę sprawdzałeś ?
5. Jak przecież nie wysyłałem żadnego e-maila do ciebie ? Sprawdzałem tylko stronkę z twojego profilu na forum smile.gif
6. To ostatnia PW będę pisał w temacie ;]
========================================

Więc może podam tutaj kod z pliku skin.css może ktoś mi teraz powie gdzie co trzeba z edytować bo wcześniejsze zamiany margin:0 5px !important | margin:0 5px | padding:0 5px !important = nie śmigają 

[CSS] pobierz, plaintext 
  1. .jcarousel-skin-tango .jcarousel-container {
  2.     -moz-border-radius: 10px;
  3.     background: #F0F6F9;
  4.     border: 1px solid #346F97;
  5. }
  6.  
  7. .jcarousel-skin-tango .jcarousel-direction-rtl {
  8. 	direction: rtl;
  9. }
  10.  
  11. .jcarousel-skin-tango .jcarousel-container-horizontal {
  12.     width: 750px;
  13.     padding: 20px 40px;
  14. }
  15.  
  16. .jcarousel-skin-tango .jcarousel-container-vertical {
  17.     width: 75px;
  18.     height: 750px;
  19.     padding: 40px 20px;
  20. }
  21.  
  22. .jcarousel-skin-tango .jcarousel-clip-horizontal {
  23.     width:  750px;
  24.     height: 75px;
  25. }
  26.  
  27. .jcarousel-skin-tango .jcarousel-clip-vertical {
  28.     width:  75px;
  29.     height: 750px;
  30. }
  31.  
  32. .jcarousel-skin-tango .jcarousel-item {
  33.     width: 75px;
  34.     height: 75px;
  35. }
  36.  
  37. .jcarousel-skin-tango .jcarousel-item-horizontal {
  38. 	margin-left: 0;
  39.     margin-right: 10px;
  40. }
  41.  
  42. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
  43. 	margin-left: 10px;
  44.     margin-right: 0;
  45. }
  46.  
  47. .jcarousel-skin-tango .jcarousel-item-vertical {
  48.     margin-bottom: 10px;
  49. }
  50.  
  51. .jcarousel-skin-tango .jcarousel-item-placeholder {
  52.     background: #fff;
  53.     color: #000;
  54. }
  55.  
  56. /**
  57.  *  Horizontal Buttons
  58.  */
  59. .jcarousel-skin-tango .jcarousel-next-horizontal {
  60.     position: absolute;
  61.     top: 43px;
  62.     right: 5px;
  63.     width: 32px;
  64.     height: 32px;
  65.     cursor: pointer;
  66.     background: transparent url(next-horizontal.png) no-repeat 0 0;
  67. }
  68.  
  69. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
  70.     left: 5px;
  71.     right: auto;
  72.     background-image: url(prev-horizontal.png);
  73. }
  74.  
  75. .jcarousel-skin-tango .jcarousel-next-horizontal:hover {
  76.     background-position: -32px 0;
  77. }
  78.  
  79. .jcarousel-skin-tango .jcarousel-next-horizontal:active {
  80.     background-position: -64px 0;
  81. }
  82.  
  83. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
  84. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
  85. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
  86.     cursor: default;
  87.     background-position: -96px 0;
  88. }
  89.  
  90. .jcarousel-skin-tango .jcarousel-prev-horizontal {
  91.     position: absolute;
  92.     top: 43px;
  93.     left: 5px;
  94.     width: 32px;
  95.     height: 32px;
  96.     cursor: pointer;
  97.     background: transparent url(prev-horizontal.png) no-repeat 0 0;
  98. }
  99.  
  100. .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
  101.     left: auto;
  102.     right: 5px;
  103.     background-image: url(next-horizontal.png);
  104. }
  105.  
  106. .jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
  107.     background-position: -32px 0;
  108. }
  109.  
  110. .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
  111.     background-position: -64px 0;
  112. }
  113.  
  114. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
  115. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
  116. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
  117.     cursor: default;
  118.     background-position: -96px 0;
  119. }
  120.  
  121. /**
  122.  *  Vertical Buttons
  123.  */
  124. .jcarousel-skin-tango .jcarousel-next-vertical {
  125.     position: absolute;
  126.     bottom: 5px;
  127.     left: 43px;
  128.     width: 32px;
  129.     height: 32px;
  130.     cursor: pointer;
  131.     background: transparent url(next-vertical.png) no-repeat 0 0;
  132. }
  133.  
  134. .jcarousel-skin-tango .jcarousel-next-vertical:hover {
  135.     background-position: 0 -32px;
  136. }
  137.  
  138. .jcarousel-skin-tango .jcarousel-next-vertical:active {
  139.     background-position: 0 -64px;
  140. }
  141.  
  142. .jcarousel-skin-tango .jcarousel-next-disabled-vertical,
  143. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
  144. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
  145.     cursor: default;
  146.     background-position: 0 -96px;
  147. }
  148.  
  149. .jcarousel-skin-tango .jcarousel-prev-vertical {
  150.     position: absolute;
  151.     top: 5px;
  152.     left: 43px;
  153.     width: 32px;
  154.     height: 32px;
  155.     cursor: pointer;
  156.     background: transparent url(prev-vertical.png) no-repeat 0 0;
  157. }
  158.  
  159. .jcarousel-skin-tango .jcarousel-prev-vertical:hover {
  160.     background-position: 0 -32px;
  161. }
  162.  
  163. .jcarousel-skin-tango .jcarousel-prev-vertical:active {
  164.     background-position: 0 -64px;
  165. }
  166.  
  167. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
  168. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
  169. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
  170.     cursor: default;
  171.     background-position: 0 -96px;
  172. }
[CSS] pobierz, plaintext


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.