Как сделать ссылку на изображение в слайд-шоу?

Для своего веб-сайта-портфолио я сделал слайд-шоу с помощью карусели cycle2 с несколькими большими изображениями на моей рабочей странице.

Все изображения также отображаются на главной странице очень маленькими.

Я хотел бы, чтобы меньшие изображения на главной странице функционировали как ссылки на большие изображения в слайд-шоу.

Я попытался дать всем изображениям в слайд-шоу другой идентификатор для ссылки. Но ссылка всегда ведет к первому изображению слайд-шоу, а не к изображению с идентификатором. Может ли кто-нибудь дать мне несколько советов по этому поводу?

Спасибо, Ноа.


person Noa    schedule 16.08.2015    source источник
comment
есть ли какой-нибудь код, который вы могли бы показать нам?   -  person MoLow    schedule 16.08.2015


Ответы (1)


Вам нужно будет использовать API-интерфейс cycle2 для перехода от слайд-шоу к соответствующему слайду, когда пользователь щелкает ссылку. Вот относительный фрагмент из документов API:

// goto 3rd slide
$('.cycle-slideshow').cycle('goto', 2);

Вам просто нужно использовать порядковые номера рассматриваемого слайда. Вы должны запустить этот код, а затем указать ссылку на якорь слайд-шоу.

Остальную документацию по API можно найти здесь: http://jquery.malsup.com/cycle2/api/


ОБНОВЛЕНИЕ

$(document).ready( function() {
    var field = 'slide';
    var url = window.location.href;
    var slideNumber = url.indexOf('?slide');
    if ( slideNumber === -1 ) {
        slideNumber = url.indexOf('&slide');
    }
    if ( slideNumber >= 0 ) {
        $('.cycle-slideshow').cycle('goto', url[slideNumber + 1]);
    }
});
person Brad Decker    schedule 16.08.2015
comment
Спасибо, попробую! - person Noa; 18.08.2015
comment
Это работает очень хорошо, когда я делаю ссылку на своей рабочей странице на слайд-шоу на той же странице. Но сейчас пытаюсь сделать ссылку с главной страницы на слайд-шоу на рабочей странице. Но я не уверен, в какой документ поместить язык сценария, потому что ссылка сначала должна перейти на рабочую страницу, а затем выполнить часть сценария. Вы понимаете мой вопрос? - person Noa; 18.08.2015
comment
Вам нужно будет взглянуть на URL-адрес, когда кто-то заходит на страницу, и определить, есть ли у него #slideshow или что-то еще в URL-адресе. И включите параметр запроса, для которого индекс должен изменить ползунок, например: yourpage.com/# slideshow?slide=2 Затем в jQuery(document).ready() проверьте URL-адрес, чтобы увидеть, предоставлен ли слайд, и измените слайд на заданный индекс. :) - person Brad Decker; 18.08.2015
comment
Добавлен грубый пример в качестве обновления, возможно, есть лучший способ проверить наличие строки запроса с помощью библиотеки или чего-то еще. - person Brad Decker; 18.08.2015
comment
Хорошо, посмотрю, большое спасибо за помощь! - person Noa; 18.08.2015
comment
Добро пожаловать. Если это работает для вас, обязательно проголосуйте и примите мой ответ :) - person Brad Decker; 20.08.2015