X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Добавление ссылок «конец» и «начало», переходящие на последнею ссылку и на первую, JS
Алерт
Алерт
Topic Starter сообщение 18.12.2011, 15:24; Ответить: Алерт
Сообщение #1


Здравствуйте.
Нашла интересную галерею, подстроила под себя, а вот ссылки для того, что бы возвращаться на первый год и на последний не получается ((( .. пробовала якорями сделать, но так всё почему то вообще перестаёт работать. В JS не сильна. Может быть кто ни будь сможет помочь. За любые подсказки буду очень благодарна
<div id="timeline">

<ul id="dates">

<li><a class="year_link" href="#1966">1966</a></li>
<li><a class="year_link" href="#1988" >1988</a></li>
<li><a class="year_link" href="#1990">1990</a></li>
<li><a class="year_link" href="#1991">1991</a></li>
<li><a class="year_link" href="#1993">1993</a></li>
<li><a class="year_link" href="#1994">1994</a></li>
<li><a class="year_link" href="#1997">1997</a></li>
<li><a class="year_link" href="#2001">2001</a></li>
<li><a class="year_link" href="#2004">2004</a></li>
<li><a class="year_link" href="#2012">2012</a></li>
<li></li>
</ul>
<ul id="issues">

<li id="1966" class="selected" >
<img src="images_2/66.jpg" width="350" height="256" />
<h1 class="year">1966</h1>
<p>текст1.</p>
</li>
<li id="1988">
<img src="images_2/02.jpg" width="350" height="256" />
<h1 class="year">1988</h1>
<p>текст2.</p>
</li>
<li id="1990">
<img src="images_2/03.jpg" width="350" height="256" />
<h1 class="year">1990</h1>
<p>текст3.</p>
</li>
<li id="1991">
<img src="images_2/97.jpg" width="350" height="256" />
<h1 class="year">1991</h1>
<p>текст4.</p>
</li>
<li id="1993">
<img src="images_2/05.jpg" width="350" height="256" />
<h1 class="year">1993</h1>
<p>текст5.</p>
</li>
<li id="1994">
<img src="images_2/00.JPG" width="350" height="256" />
<h1 class="year">1994</h1>
<p>текст6.</p>
</li>
<li id="1997">
<img src="images_2/06.JPG" width="350" height="256" />
<h1 class="year">1997</h1>
<p>текст7..</p>
</li>
<li id="2001">
<img src="images_2/08.jpg" width="350" height="256" />
<h1 class="year">2001</h1>
<p>текст8</p>
</li>
<li id="2004">
<img src="images_2/2004.JPG" width="350" height="256" />
<h1 class="year">2004</h1>
<p>текст9</p>
</li>
<li id="2012" >
<img src="images_2/2012.JPG" width="350" height="256" />
<h1 class="year">2012</h1>
<p>текст9</p>
</li>

</ul>



<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>
</div>


a.year_link {
    color: #FCEEB7;
    text-shadow: #000 1px 1px 2px;
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a.year_link:hover,
a.year_link.selected {
    color: #ffcc00;
    text-decoration: none;
}

h1.year {
    text-align: center;
    color: #ccc;
    text-shadow: #000 1px 1px 2px;
    margin-bottom: 5px;

}

.year {
    font-size: 18px;
}
    
.sociales {
    text-align: center;
    margin-bottom: 20px;
}

#timeline {
    width: 700px;
    height: 600px;
    overflow: hidden;
    margin: 40px auto;
    margin-left: 30px;
    position: relative;
    background: url('../images_2/dot.gif') 3px top repeat-y;
}
    
#dates {
    width: 150px;
    height: 600px;
    overflow: hidden;
    float: left;
    margin-left:-20px;
        }
        
#dates li {
    list-style: none;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 24px;
    padding-left: 10px;
    background: url('../images_2/biggerdot.png') left center no-repeat;
            }
            
#dates a.year_link {
    line-height: 38px;
    padding-bottom: 10px;
}

#dates .selected {
font-size: 38px;
                }
        
#issues {
    width: 550px;
    height: 500px;
    overflow: hidden;
    float: left;
        }    
#issues li {
    margin-top:-10px;
    width: 550px;
    height: 650px;
    list-style: none;
}

#issues li img {
    margin: 60px 0 0 70px;
}

#issues li h1.year {
    color: #ffcc00;
    font-size: 48px;
    text-align: center;
    text-shadow: #000 1px 1px 2px;
}

#issues li p {
    color:#000000;
    font-size: 14px;
    margin: 10px 20px;
    font-weight: normal;
    line-height: 22px;
}
        
    
#next,
#prev {
    position: absolute;
    left: 55%;
    font-size: 70px;
    width: 38px;
    height: 22px;
    background-position: 0 -44px;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}
#next:hover,
#prev:hover {
    background-position:  0 0;
}

#next {
    bottom: 0;
    background-image: url('../images_2/next_v.png');
            }
            
#prev {
    top: 0;
    background-image: url('../images_2/prev_v.png');
}

#next.disabled,
#prev.disabled {
    opacity: 0.2;
}


$(function(){
            $().timelinr({
                orientation: 'vertical',
                issuesSpeed: 300,
                datesSpeed: 100,
                issuesSpeed: 500,
                arrowKeys: 'true',
                startAt: 1
            })
        });

jQuery.fn.timelinr = function(options){
    // default plugin settings
    settings = jQuery.extend({
        orientation:                 'horizontal',        // value: horizontal | vertical, default to horizontal
        containerDiv:                 '#timeline',        // value: any HTML tag or #id, default to #timeline
        datesDiv:                     '#dates',            // value: any HTML tag or #id, default to #dates
        datesSelectedClass:         'selected',            // value: any class, default to selected
        datesSpeed:                 500,                // value: integer between 100 and 1000 (recommended), default to 500 (normal)
        issuesDiv:                     '#issues',            // value: any HTML tag or #id, default to #issues
        issuesSelectedClass:         'selected',            // value: any class, default to selected
        issuesSpeed:                 200,                // value: integer between 100 and 1000 (recommended), default to 200 (fast)
        issuesTransparency:         0.2,                // value: integer between 0 and 1 (recommended), default to 0.2
        issuesTransparencySpeed:     500,                // value: integer between 100 and 1000 (recommended), default to 500 (normal)
        prevButton:                 '#prev',            // value: any HTML tag or #id, default to #prev
        nextButton:                 '#next',            // value: any HTML tag or #id, default to #next
        arrowKeys:                     'false',            // value: true | false, default to false
        startAt:                     1,                    // value: integer, default to 1 (first)
        autoPlay:                     'false',            // value: true | false, default to false
        autoPlayDirection:             'forward',            // value: forward | backward, default to forward
        autoPlayPause:                 2000                // value: integer (1000 = 1 seg), default to 2000 (2segs)
        
    }, options);

    $(function(){
        // setting variables... many of them
        var howManyDates = $(settings.datesDiv+' li').length;
        var howManyIssues = $(settings.issuesDiv+' li').length;
        var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
        var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
        var widthContainer = $(settings.containerDiv).width();
        var heightContainer = $(settings.containerDiv).height();
        var widthIssues = $(settings.issuesDiv).width();
        var heightIssues = $(settings.issuesDiv).height();
        var widthIssue = $(settings.issuesDiv+' li').width();
        var heightIssue = $(settings.issuesDiv+' li').height();
        var widthDates = $(settings.datesDiv).width();
        var heightDates = $(settings.datesDiv).height();
        var widthDate = $(settings.datesDiv+' li').width();
        var heightDate = $(settings.datesDiv+' li').height();
        
        // set positions!
        if(settings.orientation == 'horizontal') {    
            $(settings.issuesDiv).width(widthIssue*howManyIssues);
            $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
            var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
        } else if(settings.orientation == 'vertical') {
            $(settings.issuesDiv).height(heightIssue*howManyIssues);
            $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
            var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
        }
        
        $(settings.datesDiv+' a').click(function(event){
            event.preventDefault();
            // first vars
            var whichIssue = $(this).text();
            var currentIndex = $(this).parent().prevAll().length;

            // moving the elements
            if(settings.orientation == 'horizontal') {
                $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
            } else if(settings.orientation == 'vertical') {
                $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
            }
            $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
            
            // now moving the dates
            $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
            $(this).addClass(settings.datesSelectedClass);
            if(settings.orientation == 'horizontal') {
                $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:settings.datesSpeed});
            } else if(settings.orientation == 'vertical') {
                $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:settings.datesSpeed});
            }
        });

        $(settings.nextButton).bind('click', function(event){
            event.preventDefault();
            if(settings.orientation == 'horizontal') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/widthIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
                var currentIssueDate = currentPositionDates-widthDate;
                if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
                    $(settings.issuesDiv).stop();
                    $(settings.datesDiv+' li:last-child a').click();
                } else {
                    if (!$(settings.issuesDiv).is(':animated')) {
                        $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
                        $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:settings.datesSpeed});
                        $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
                    }
                }
            } else if(settings.orientation == 'vertical') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/heightIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
                var currentIssueDate = currentPositionDates-heightDate;
                if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
                    $(settings.issuesDiv).stop();
                    $(settings.datesDiv+' li:last-child a').click();
                } else {
                    if (!$(settings.issuesDiv).is(':animated')) {
                        $(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
                        $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:settings.datesSpeed});
                        $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
                    }
                }
            }
        });

        $(settings.prevButton).click(function(event){
            event.preventDefault();
            if(settings.orientation == 'horizontal') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/widthIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
                var currentIssueDate = currentPositionDates+widthDate;
                if(currentPositionIssues >= 0) {
                    $(settings.issuesDiv).stop();
                    $(settings.datesDiv+' li:first-child a').click();
                } else {
                    if (!$(settings.issuesDiv).is(':animated')) {
                        $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
                        $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:settings.datesSpeed});
                        $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
                    }
                }
            } else if(settings.orientation == 'vertical') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/heightIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
                var currentIssueDate = currentPositionDates+heightDate;
                if(currentPositionIssues >= 0) {
                    $(settings.issuesDiv).stop();
                    $(settings.datesDiv+' li:first-child a').click();
                } else {
                    if (!$(settings.issuesDiv).is(':animated')) {
                        $(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
                        $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
                        $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:settings.datesSpeed},{queue:false, duration:settings.issuesSpeed});
                        $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
                    }
                }
            }
        });
        
        // keyboard navigation, added since 0.9.1
        if(settings.arrowKeys=='true') {
            if(settings.orientation=='horizontal') {
                $(document).keydown(function(event){
                    if (event.keyCode == 39) {
                       $(settings.nextButton).click();
                    }
                    if (event.keyCode == 37) {
                       $(settings.prevButton).click();
                    }
                });
            } else if(settings.orientation=='vertical') {
                $(document).keydown(function(event){
                    if (event.keyCode == 40) {
                       $(settings.nextButton).click();
                    }
                    if (event.keyCode == 38) {
                       $(settings.prevButton).click();
                    }
                });
            }
        }
        
        // default position startAt, added since 0.9.3
        $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
        
        // autoPlay, added since 0.9.4
        if(settings.autoPlay == 'true') {
            setInterval("autoPlay()", settings.autoPlayPause);
        }
    });

};

// autoPlay, added since 0.9.4
function autoPlay(){
    var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
    if(settings.autoPlayDirection == 'forward') {
        if(currentDate.parent().is('li:last-child')) {
            $(settings.datesDiv+' li:first-child').find('a').trigger('click');
        } else {
            currentDate.parent().next().find('a').trigger('click');
        }
    } else if(settings.autoPlayDirection == 'backward') {
        if(currentDate.parent().is('li:first-child')) {
            $(settings.datesDiv+' li:last-child').find('a').trigger('click');
        } else {
            currentDate.parent().prev().find('a').trigger('click');
        }
    }
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 18.12.2011, 16:51; Ответить: Алерт
Сообщение #2


(bestolloch @ 18.12.2011, 14:54) *
извеняюсь за офф топ, просто отписал - не понял проблему.) а удалить сообщение нельзя


Я хочу добавить ссылку с названием "Конец" - которая переходит сразу на конец последний ссылки(последниего года), а в конце добавить ссылку с "Начало", которая кидает пользоывателя на первую ссылку(т.е на первый год). Как добавить ссылки это понятно, пробовала сдлетать якорями, но тогда проблема в том, что кидает куда надо, но после этого ничего не работает..вот я и хочу попросить помощи как можно реализовать это с поммощью JS. Да..действительно так не понятно ..прекрепила скрин

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.

Эскизы прикрепленных изображений
Прикрепленное изображение
 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Сайт не индексируется в Google без добавления ссылок в адурилку
4 Nekit 985 20.3.2024, 21:44
автор: MorKer
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5812 18.3.2024, 16:33
автор: 2Index
Горячая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок
Большой опыт работы, отзывы
304 tario777 203064 13.3.2024, 14:01
автор: tario777
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыРучное размещение вечных ссылок и статей на хороших площадках
Опыт 10 лет!
419 leonidukg 273826 12.3.2024, 15:17
автор: leonidukg
Открытая тема (нет новых ответов) Backlinks.su - генератор обратных ссылок
Он позволяет разместить 1500+ внешних ссылок на ваш сайт бесплатно!
0 MihaylovRA 1189 3.3.2024, 18:08
автор: MihaylovRA


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:35
Дизайн