В статье содержится описание плагина, который позволяет организовать слайдшоу с вертикальной прокруткой, и навигацией и переходом по ссылке, привязанной к изображению.
HTML
<div id="wrapper-content">
<div class="row-54">
</div>
<div id="side-nav" class="mobile-remove">
<div class="row-24 section-1 nav">
<a id="section-1" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-2 nav remove-right-border">
<a id="section-2" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-3 nav remove-right-border">
<a id="section-3" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-4 nav remove-right-border">
<a id="section-4" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-5 nav remove-right-border">
<a id="section-5" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-6 nav remove-right-border">
<a id="section-6" class="section"><span>BUTTON</span></a>
</div>
<div class="row-24 section-7">
<span class="smaller-9">Просто информационная строка.</span>
</div>
</div>
<div id="main-container">
<div class="overlay">Выберите урок в меню слева!</div>
<div id="main-container-background">
<div class="row-273 s1 mobile-public">
<noscript style="color:#000"> Ваш браузер не поддерживает JavaScript!</noscript>
</div>
<div class="row-273 s2 mobile-public">
IMAGE
</div>
<div class="row-273 s3 mobile-public">
IMAGE
</div>
<div class="row-273 s4 mobile-public">
IMAGE
</div>
<div class="row-273 s5 mobile-public">
IMAGE
</div>
<div class="row-273 s6 mobile-public">
IMAGE
</div>
</div>
</div>
</div>
JavaScript
В HTML нужно вставить функцию перед телом документа:
<script type="text/javascript">
$(document).ready(function() {
$("#side-nav a").vertSlider(
{
text : new Array("ruseller.com: Главная",
"Визуальный редактор",
"Триггеры MySQL",
"Использование PDO",
"Особенности jQuery",
"Текст урока"),
color : new Array("#ff0d4c",
"#0d13ff",
"#0dff18",
"#fff10d",
"#000",
"#ff0deb"),
button : new Array("Главная",
"Урок №1",
"Урок №2",
"Урок №3",
"Урок №4",
"Урок №5"),
image : new Array("images/009_article_screenshot.png",
"images/010_article_screenshot.png",
"images/011_article_screenshot.png",
"images/012_article_screenshot.png",
"images/013_article_screenshot.png",
"images/014_article_screenshot.png"),
title : new Array("Переход на главную страницу сайта ruseler.com",
"Переход к видеоуроку про визуальный редактор",
"Переход к уроку про триггеры MySQL",
"Переход к уроку про использование PDO для доступа к базам данных",
"Перехеод к описанию особенностей jQuery",
"Переход обратно к тексту урока"),
link : new Array("http://ruseller.com/index.php",
"http://ruseller.com/adds.php?rub=12&id=1687",
"http://ruseller.com/lessons.php?rub=28&id=630",
"http://ruseller.com/lessons.php?rub=28&id=610",
"http://ruseller.com/lessons.php?rub=32&id=632",
"http://ruseller.com/lessons.php?rub=32&id=636")
});
});
</script>
jQuery плагин
jQuery.fn.vertSlider = function(options) {
$('#main-container-background a[name]').removeAttr("name");
$('#main-container').css('overflow', 'hidden');
$('#side-nav').css('visibility', 'visible');
var overlay = { //Здесь задается текст поумолчанию для строки состояния поверх избражения
text : new Array(null,
null,
null,
null,
null,
null)
};
var color = { //Здесь задается цвет фона по умлочанию для строки состояния поверх изображения
color : new Array(null,
null,
null,
null,
null,
null)
};
var button = { //Здесь задается текст кнопок по умолчанию для строки состояния поверх изображения
button : new Array(null,
null,
null,
null,
null,
null)
};
var image = {//Здесь задаются изображения по умолчанию
image : new Array(null,
null,
null,
null,
null,
null)
};
var title = {//Заголовки ссылок по умолчанию
title : new Array(null,
null,
null,
null,
null,
null)
};
var link = {//Изображения для ссылок по умолчанию
link : new Array(null,
null,
null,
null,
null,
null)
};
var options = $.extend(overlay, color, button, image, title, link, options);
return this.each(function() {
$("a#section-1 span").html(options.button[0]);
$("a#section-2 span").html(options.button[1]);
$("a#section-3 span").html(options.button[2]);
$("a#section-4 span").html(options.button[3]);
$("a#section-5 span").html(options.button[4]);
$("a#section-6 span").html(options.button[5]);
$('.s1').html('<a href="' + options.link[0] + '" title= "' + options.title[0] + '"><img src="' + options.image[0] + '" /></a>');
$('.s2').html('<a href="' + options.link[1] + '" title= "' + options.title[1] + '"><img src="' + options.image[1] + '" /></a>');
$('.s3').html('<a href="' + options.link[2] + '" title= "' + options.title[2] + '"><img src="' + options.image[2] + '" /></a>');
$('.s4').html('<a href="' + options.link[3] + '" title= "' + options.title[3] + '"><img src="' + options.image[3] + '" /></a>');
$('.s5').html('<a href="' + options.link[4] + '" title= "' + options.title[4] + '"><img src="' + options.image[4] + '" /></a>');
$('.s6').html('<a href="' + options.link[5] + '" title= "' + options.title[5] + '"><img src="' + options.image[5] + '" /></a>');
$(this).click(function() {
var index = $('#side-nav a').index(this);
$(this).parent().removeClass('remove-right-border').css("border-right-color", options.color[index]);
$(this).parent().siblings().addClass('remove-right-border');
$("#main-container-background").animate({ top: index * -307 }, 'slow');
$(".overlay").hide().css("background-color", options.color[index]).text(options.text[index]).fadeIn(1500);
});
});
};