1

Есть страница. На ней в начале расположены ссылки с якорями на слои расположенные ниже. Также к странице прикреплён скрипт который осуществляет скролл к якорю (слою) указанному в ссылке.
Каждый из этих слоёв к которым осуществляется скролл представляет собой мини эскиз, при нажатии на который увеличивается картинка. Увеличение реализовано при помощи скрипта highslide.

Нужно сделать так, чтобы всё происходило по следующему сценарию:

Клик по ссылке - Скрол до слоя, а затем увеличение картинки.

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

Код скролл скрипта такой:

spScrollToHash = {
    autor: {
        name: 'Szen',
        site: 'http://szenprogs.ru/',
        page: 'http://szenprogs.ru/blog/plavnyj_skrolling_v_ljubom_napravlenii/2011-06-21-111',
        ver: '1.0 beta'
    },

    scroll: function (id, speed, typ) {
        if (id == '' || id == '#' || $(id).length == 0) return false;
        if (speed == undefined || speed < 1 || speed > 1000) speed = 500;
        if (typ == undefined || typ < 1 || typ > 3) typ = 1;
        var par = 'html'
        if ($.browser.safari) par = 'body';
        var offset = $(id).offset();
        spScrollToHash.stop();
        switch (typ) {
        case 1:
            $(par).animate({
                scrollTop: offset.top,
                scrollLeft: offset.left
            }, speed, function () {
                document.location.hash = id;
            });
            break;
        case 2:
            $(par).animate({
                scrollTop: offset.top
            }, Math.round(speed / 2), function () {
                $(par).animate({
                    scrollLeft: offset.left
                }, Math.round(speed / 2), function () {
                    document.location.hash = id;
                });
            });
            break;
        case 3:
            $(par).animate({
                scrollLeft: offset.left
            }, Math.round(speed / 2), function () {
                $(par).animate({
                    scrollTop: offset.top
                }, Math.round(speed / 2), function () {
                    document.location.hash = id;
                });
            });
            break;
        }
        return false;
    },

    stop: function () {
        $('a[href*="#"]').stop();
    },

    ready: function (speed, typ) {
        var id = document.location.hash;
        spScrollToHash.scroll(id, speed, typ);
        $('a[href*="#"]').click(function () {
            id = $(this).attr('href');
            id = id.substr(id.indexOf('#'));
            spScrollToHash.scroll(id, speed, typ);
            return false;
        });
    }
}

$(function () {
    spScrollToHash.ready(400, 1);
});

Еще тут.

1 ответ 1

2

попробуй заменить swith в scroll на:

switch(typ){
    case 1:
      $(par).animate({scrollTop:offset.top,scrollLeft:offset.left},speed,function(){document.location.hash=id;$(id).find('a').click();});
      break;
    case 2:
      $(par).animate({scrollTop:offset.top},Math.round(speed/2),function(){
        $(par).animate({scrollLeft:offset.left},Math.round(speed/2),function(){document.location.hash=id;$(id).find('a').click();});
      });
      break;
    case 3:
      $(par).animate({scrollLeft:offset.left},Math.round(speed/2),function(){
        $(par).animate({scrollTop:offset.top},Math.round(speed/2),function(){document.location.hash=id;$(id).find('a').click();});
      });
      break;
  }
8
  • Всё работает отлично, только он привязан к "id=thumb1" и при клике на разные ссылки открывает одну и ту же картинку. А если ссылка будет такого вида <a href="img/map/objects/3/3.gif" class="highslide" onclick="return hs.expand(this)"> <img src="img/map/objects/3/3_min.gif" alt="Highslide JS" title="1989г. - жилые кварталы в 14-15-м МКР в Северном жилом р-не (РП)." height="56" width="90" /></a>
    – cheh1
    13 мар 2012 в 15:28
  • тут будет сложно отследить элемент по которому нужен клик, тк при id есть возможность однозначно отловить элементь, но если привязываться к классу, то тогда нужно из нескольких элементов выбрать нужный
    – LEroyGGG
    13 мар 2012 в 18:37
  • Как же быть, друг! Помоги пожалуйста, javascript не владею может есть какое нибудь решение?
    – cheh1
    14 мар 2012 в 6:37
  • тут всё зависит от того что можно менять, может есть где в нете глянуть ваш сайт? просто я не совсем понимаю зачем это нужно, а следовательно не могу и предположить как выглядит dom
    – LEroyGGG
    14 мар 2012 в 7:05
  • выправил код, по идее вам надо так если не прокатит, то после свитча поставь alert(id) и потом отпиши что выведет
    – LEroyGGG
    14 мар 2012 в 7:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.