Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Добавление ссылок «конец» и «начало», переходящие на последнею ссылку и на первую

#1 myrka

myrka
  • Пользователь
  • 22 сообщений
  • Репутация: 10
0

Отправлено 18 Декабрь 2011 - 14:24

Здравствуйте.
Нашла интересную галерею, подстроила под себя, а вот ссылки для того, что бы возвращаться на первый год и на последний не получается ((( .. пробовала якорями сделать, но так всё почему то вообще перестаёт работать. В 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

#2 myrka

myrka
    Topic Starter
  • Пользователь
  • 22 сообщений
  • Репутация: 10

Отправлено 18 Декабрь 2011 - 15:51

извеняюсь за офф топ, просто отписал - не понял проблему.) а удалить сообщение нельзя


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

Прикрепленные изображения

  • 2421412.JPG

  • 0


Оформление форума – IPBSkins.ru