W jaki sposób dodać galerię jQuery ?

Witam,

Powie mi ktoś jak wgrać galerię jQuery do swojego forum ? Nie wiem jak wgrać foldery na ftp.

Link do galerii: http://www.jssor.com/demos/image-gallery.html

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:


Najlepiej jakbyś ściągnął paczkę i zobaczył co i jak. Potem możesz usunąć, sobie nie zaszkodzisz, a mi byś bardzo pomógł

Pliki prawdopodobnie znajdują się w katalogu js. A tu: http://www.jssor.com/development/
masz opisane jak ją dodać.

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:

<!-- 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>

Wrzuciłem ten kod w miejscu wyświetlania:

<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>

W tym miejscu :

<!-- ThumbnailNavigator Skin Begin -->
        <!-- open 'skin\thumbnail-...source.html', copy and paste thumbnail navigator skin here -->
    <!-- ThumbnailNavigator Skin End -->

dodałem ten kod (tak jak napisane) z pliku (thumbnail-01.source):

<!--#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 -->

i wyświetla mi się tylko to co widać tutaj : http://hajlajf.cba.pl/misc.php?page=galeria

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.