Slide Thumbs - вертикальный

Question

Я новичок в JavaScript и не могу понять, как это сделать. Я хочу горизонтальный слайдер или скрипт с вкладками с миниатюрами и стрелками, которые в данный момент отображаются на миниатюре, например:

*http://jqueryglobe.com/labs/slide_thumbs/*

Но оно должно быть по горизонтали по вертикали. Может кто-нибудь может помочь мне решить эту проблему? Заранее спасибо

Edit: Да извини Я имею в виду вертикальный. Мой плохой.

Answer 1

Это не так сложно на самом деле.

Вам просто нужно изменить порядок HTML-кода, чтобы изображения отображались справа / слева от контейнера основного изображения предварительного просмотра. Затем, если вы посмотрите на простой задействованный javascript, просто измените все, что говорит «слева» на «верх» и «ширину» на «высоту», примерно так (этот код взят из самой страницы -> просмотр источника):

$(document).ready(function() {
            // Save  the jQuery objects for later use.
            var outer       = $("#preview_outer");
            var arrow       = $("#arrow");
            var thumbs      = $("#thumbs span");

            var preview_pos;
            var preview_els = $("#preview_inner div");
            var image_width = preview_els.eq(0).height(); // Get height of imaages

            // Hook up the click event
            thumbs.click(function() {
                // Get position of current image
                preview_pos = preview_els.eq( thumbs.index( this) ).position();

                // Animate them!
                outer.stop().animate( {'scrollTop' : preview_pos.top},  500 );
                arrow.stop().animate( {'top' : $(this).position().top },    500 );
            });

            // Reset positions on load
            arrow.css( {'top' : thumbs.eq(0).position().top } ).show();
            outer.animate( {'scrollTop' : 0}, 0 );

            // Set initial width
            $("#preview_inner").css('height', preview_els.length * image_height);
        });