Kod html wklejasz do szablonu, javascript wrzucasz do folderu jscripts i arkusze stylów (css) do global.css
Ok, tylko jakie pliki javascript mam wrzucić do jscripts, jakie arkusze styli do global.css i gdzie wszystkie inne foldery widoczne na screenie, żebym miał akurat tą jedną galerię bez żadnych niepotrzebnych mi sliderów ?
Screen:
![[Obrazek: 57334708104982749008.png]](http://iv.pl/images/57334708104982749008.png)
Najlepiej jakbyś ściągnął paczkę i zobaczył co i jak. Potem możesz usunąć, sobie nie zaszkodzisz, a mi byś bardzo pomógł
No tylko, że ja się nie mogę połapać z niczym, co do czego wkleić... Jak nie ma struktury folderów to ja się gubię
a z tego opisu ja nic nie rozumiem, nie znam angielskiego. Wrzuciłem pliki z folderu
js na ftp do folderu
jscripts, ale nie wiem co z resztą. Wkleiłem jeden kod do headerinclude i drugi tam gdzie ma być galeria, ale się nie wyświetla.
Wkleiłeś do headerinclude... Wgrałeś pliki do jscripts..., a w tych kodach zmieniłeś ścieżkę?
Nie wyświetla się, co? Całość? A HTML w miejscu wyświetlania dodałeś?
Wgrałem do headerinclude ten kod:
Kod:
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
Kod:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div>
<img u="image" src="image1.jpg" />
<img u="thumb" src="thumb-image1.jpg" />
</div>
<div><img u="image" src="image2.jpg" /></div>
</div>
<!-- ThumbnailNavigator Skin Begin -->
<!-- open 'skin\thumbnail-...source.html', copy and paste thumbnail navigator skin here -->
<!-- ThumbnailNavigator Skin End -->
</div>
Kod:
<!-- ThumbnailNavigator Skin Begin -->
<!-- open 'skin\thumbnail-...source.html', copy and paste thumbnail navigator skin here -->
<!-- ThumbnailNavigator Skin End -->
Kod:
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -->
<style>
/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p (normal)
.jssort01 .p:hover (normal mouseover)
.jssort01 .p.pav (active)
.jssort01 .p.pdn (mousedown)
*/
.jssort01 {
position: absolute;
/* size of thumbnail navigator container */
width: 800px;
height: 100px;
}
.jssort01 .p {
position: absolute;
top: 0;
left: 0;
width: 72px;
height: 72px;
}
.jssort01 .t {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 68px;
height: 68px;
border: #000 2px solid;
box-sizing: content-box;
background: url(../img/t01.png) -800px -800px no-repeat;
_background: none;
}
.jssort01 .pav .c {
top: 2px;
_top: 0px;
left: 2px;
_left: 0px;
width: 68px;
height: 68px;
border: #000 0px solid;
_border: #fff 2px solid;
background-position: 50% 50%;
}
.jssort01 .p:hover .c {
top: 0px;
left: 0px;
width: 70px;
height: 70px;
border: #fff 1px solid;
background-position: 50% 50%;
}
.jssort01 .p.pdn .c {
background-position: 50% 50%;
width: 68px;
height: 68px;
border: #000 2px solid;
}
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
/* ie quirks mode adjust */
width /**/: 72px;
height /**/: 72px;
}
</style>
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default;">
<div u="prototype" class="p">
<div class=w><div u="thumbnailtemplate" class="t"></div></div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion Thumbnail Navigator Skin End -->
Odwołując się do Twojego kodu - ścieżki uwzględnione? Chyba raczej niekoniecznie, skoro konsola błędów wyrzuca ich brak. Pomijam już fakt, o którym wiedzieć powinieneś - nie includujemy dodatkowych bibliotek jQuery, bo nie ma to najmniejszego sensu, skoro dopuszczalne są maksymalnie dwie.
W paczce tego 'slidera' masz przykłady i dema. Otwórz sobie edytorem (np. notepad++) i zobacz jak to jest tam zrobione.
Pozamieniaj ścieżki i działać powinno.
Jeszcze chyba za mało o tym wiem. Nie mogę sobie z tym poradzić... Dziękuję, że próbowaliście mi pomóc, niestety muszę zrezygnować, chyba że ktoś by chciał zrobić to za mnie.
Jeśli nie możesz sobie poradzić z tak 'zaawansowanym' sliderem, to może na początek zacznij od jakiegoś prostszego? Przykładowo: coin-slider, bardzo łatwy w instalacji.
Miałem coin-slider wcześniej i poradziłem sobie z instalacją, ale właśnie chodziło mi o galerię zdjęć z pokazem slajdów tego typu, dlatego podjąłem się tej instalacji.