jCarousel - kilka problemów, pytań Opcje

[ryczy]

Witam wczoraj próbowałem wgrać sobie skrypt o nazwie: jCarousel - http://sorgalla.com/jcarousel/
Mój kod wygląda tak:

[HTML] pobierz, plaintext 
<script type="text/javascript" src="/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
<ul id="mycarousel" class="jcarousel-skin-tango">
   <!-- The content goes in here -->
   <li class="jcarousel-item-1"><img src="./partnerzy/e-rekiny-bwin.png"/></li>
   <li class="jcarousel-item-2"><img src="./partnerzy/e-rekiny-unibet.png"/></li>
   <li class="jcarousel-item-3"><img src="./partnerzy/e-rekiny-doxxbet.png"/></li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
    });
});
</script>
<div class="jcarousel-skin-tango">
  <div class="jcarousel-container">
    <div class="jcarousel-clip">
      <ul class="jcarousel-list">
        </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
  </div>
</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]

1) nie
2) margin:0 5px; dla li
3) przejżeć /skins/tango/skin.css i odpowiednio wyedytować

[ryczy]

Ok dzięki za pomoc prz pierwszym i trzecim ale nie moge sobie poradzic z drugim jak mam taka linijke np.

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

to gdzie wstawić to margin:0 5px;

[devnul]

albo w CSSie przy definicji ostylowania elementu LI albo bezpośrednio w li

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

[ryczy]

hmmm.... niestety nie pomogło to w rozdzieleniu obrazków (IMG:style_emoticons/default/sadsmiley02.gif) :

[devnul]

bo to jednak trochę zależy także od Twojego cssa. Spróbuj na siłę:

[HTML] pobierz, plaintext 
<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]

No i dalej nic kurde ;/

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

[devnul]

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]

Do devnul bo zablokował pw (IMG:style_emoticons/default/worriedsmiley.gif)
1. Ok
2. Sory (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}
 
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 750px;
    padding: 20px 40px;
}
 
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 750px;
    padding: 40px 20px;
}
 
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  750px;
    height: 75px;
}
 
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 750px;
}
 
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}
 
.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin-left: 0;
    margin-right: 10px;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin-left: 10px;
    margin-right: 0;
}
 
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
 
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
 
/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(prev-horizontal.png);
}
 
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}
 
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
 
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
 
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(next-horizontal.png);
}
 
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}
 
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
 
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
 
/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}
 
.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}
 
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}
 
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}
 
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
[CSS] pobierz, plaintext