Скрипт слайдера, спрятанного под спойлер
Ранее мы уже рассматривали несколько различных скриптов для создания спойлеров на сайте. На этот раз мы предлагаем Вам еще один скрипт, основным отличием которого от предыдущих будет наличие нескольких заголовков и всего одного тела спойлера, содержимое которого будет меняться в зависимости от того, на какой заголовок спойлера был произведен клик.
Помимо выше перечисленного, внутри спойлера будет располагаться простой слайдер для просмотра изображений. Таким образом, можно будет разместить на одной страничке множество изображений, скрытых под спойлерами и разбитых на группы с минимальными затратами полезного места и легким доступом к каждому из них без перезагрузки странички.
Для наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на три заголовка спойлеров, находящихся чуть ниже. По клику по каждому из них, появится слайдер с первым изображением из группы. При помощи стрелок <<< и >>> можно будет прокручивать изображения в группе:
| <<< | >>> |
Важным моментом в нашем скрипте является то, что при переходе к другой группе изображений (при клике по другому заголовку спойлера) скрипт запоминает последнее просмотренное изображение, на котором Вы остановились. При возвращении к данной группе показ изображений начнется именно с того, на котором Вы остановились.
Для реализации подобного слайдера под спойлером Вам потребуется подключить у себя на сайте библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее необходимо разместить заголовки и тело спойлера для отображения и скрытия слайдера:
<div style="text-align: center;">
<div class="sp_links" id="sp_0">Заголовок № 1</div>
<div class="sp_links" id="sp_1">Заголовок № 2</div>
<div class="sp_links" id="sp_2">Заголовок № 3</div>
</div>
<div id="body">
<table style="margin: 0 auto;">
<tr>
<td id="show_back"><b><<<</b></td>
<td id="slide_show"></td>
<td id="show_forward"><b>>>></b></td>
</tr>
</table>
</div>Не забываем в шапку сайта между тегами <head> и </head> добавить стили для правильного отображения и работы слайдера и спойлеров:
<style type="text/css">
#body { display: none; font-style: italic; }
#show_back, #show_forward, .sp_links { cursor: pointer; }
.sp_links { display: inline-block; width: 200px; margin: 5px; border-radius: 7px;
text-align: center; font-weight: bold; color: #0000FF; border: 1px solid #333333; }
.selected { background-color: #CCCCCC; }
</style>Теперь остается добавить JavaScript код, который будет показывать и скрывать содержимое спойлера при кликах по заголовкам, а также отвечающий за работу слайдера:
<script type="text/javascript">
$(document).ready(function(){
var time = 400;
var num = [0,0,0];
var imgs = [
["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"],
["image/Banner2.png","image/Banner3.png","image/Banner4.png"],
["image/img_4.png","image/Banner4.png","image/img_3.png","image/Banner3.png"]
];
$("#show_back").click(function() { num[id]--; });
$("#show_forward").click(function() { num[id]++; });
$("#show_back, #show_forward").click(function() {
if (num[id]<0) num[id]=imgs[id].length-1;
if (num[id]>=imgs[id].length) num[id]=0;
$("#img_show").fadeOut(time, function() {
$(this).attr("src", imgs[id][num[id]]).fadeIn(time);
});
});
$(".sp_links").click(function() {
id = $(this).attr("id").substr(3);
if ($(this).hasClass("selected")!=true) {
$("#body").fadeOut(time, function() {
$("#slide_show").html('<img src="'+imgs[id][num[id]]+'" alt="" id="img_show">');
}).fadeIn(time);
$(".sp_links").removeClass("selected");
$(this).addClass("selected");
}
else {
$(".sp_links").removeClass("selected");
$("#body").fadeOut(time);
}
return false;
});
});
</script>Поясним пару важных моментов по данному скрипту. В num = [0,0,0]; хранятся номера изображений в массиве, с которых начнется просмотр для каждого спойлера в отдельности.
Т.е. запись num = [0,2,0]; означает, что для второго спойлера просмотр начнется с изображения под номером 3 в массиве изображений (т.к. отсчет начинается с 0).
imgs является двумерным массивом с адресами изображений.
При желании слайдер изображений можно будет заменить на слайдер html страничек. Таким образом возможно будет реализовать слайдер не только изображений, но и любого другого содержимого html страничек.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.