Делаем «резиновую» галерею на основе Coda-Slider 2.0

27 Окт
2011

Всем доброго времени суток! Без долгих введений, начну излагать! Итак…

Что имеем:

1. Стандартную «резиновую» разметку. 2. Подключенный плагин Coda-Slider 2.0

Задача:

Добиться кроссбраузерного отображения слайдера при 100% ширине (предполагается, что все изображения имеют одинаковые width и height)

Решение:

1. Прописываем у изображений атрибуты width и height. Разметка для работы coda-slider нужна следующая…
<div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="coda-slider-1">

		<div class="panel">
			<div class="panel-wrapper">	
                                <!-- прописываем атрибуты width и height, как минимум,  у изображения в первом div.panel -->
				<img src="img-slider/1.jpg" alt="" width="1200" height="548"/>

			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">	
				<img src="img-slider/2.jpg" alt=""/>

			</div>
		</div>
		<!-- etc. -->
                <div class="panel">
			<div class="panel-wrapper">	
				<img src="img-slider/10.jpg" alt=""/>

			</div>
		</div>	
	</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
2. Немного и нехитро шаманим Собственно, вот листинг…
var docWidth;                //ширина document
var panelLeftPos;                //left позиция панели (.panel)
var navBlockWidth;                //ширина навигационного блока (.coda-nav)
var galleryItemWidth;                //ширина изображения
var galleryItemHeight;                //высота изображения
var arrowHeight;                //высота стрелок prev и next
var arrowTopPos;                //top позиция стрелок prev и next
	
function codaSliderInit()
{	
        //устанавливаем ширину панели равной ширине изображения до инициализации плагина,
        //чтобы правильно просчитались offset, panelWidth, panelContainerWidth в coda-slider-2.0.js
	$('.panel').width($('.panel-wrapper:first').children().width());

        //инициализация плагина
	$('#coda-slider-1').codaSlider();
}
	
//вычисляем все необходимые значения
function getData()
{
	docWidth = $(document).width();
	galleryItemWidth = $('.panel-wrapper:first').children().width();
	galleryItemHeight = $('.panel-wrapper:first').children().height();
	panelLeftPos = (docWidth - galleryItemWidth) / 2;
	navBlockWidth = $(".coda-nav ul li a").outerWidth(true) * $(".coda-nav ul li a").length;
	arrowHeight = $(".coda-nav-left").height();
	arrowTopPos = (galleryItemHeight-arrowHeight) / 2;
}

//вызываем эту функцию при $(document).ready и resize окна браузера 
function tuningCodaSlider()
{
	getData();
        
        //блок навигации: центрируем по горизонтали, позиционируем по вертикали
	$(".coda-nav ul").css({"left":((docWidth-navBlockWidth) / 2),"top": galleryItemHeight - 22,"width": navBlockWidth});
	
        //устанавливаем 100% ширину слайдера	
	$(".coda-slider").css({"width":docWidth,"height":galleryItemHeight});
		
        //центрируем по горизонтали активное изображение
	$(".panel-wrapper").css({"left":panelLeftPos});
	
        //центрируем по вертикали стрелки prev и next
	$(".coda-nav-left").css({"top":arrowTopPos});
	$(".coda-nav-right").css({"top":arrowTopPos});
}

$(document).ready(function() {
			
		codaSliderInit();
		
		tuningCodaSlider();	
		
		$(window).bind("resize", function(){
		
		tuningCodaSlider();
		
		});
	});

3. Прописываем стили
/*CODA SLIDER MAIN LAYOUT*/
.coda-slider .panel-wrapper {position:relative; }
.coda-slider-wrapper { clear: both; overflow: hidden; }
.coda-slider { float: left; overflow: hidden; position: relative; }
.coda-slider .panel { display: block; float: left}
.coda-slider .panel-container { position: relative; }

/*NAVIGATION BLOCK*/
.coda-nav ul { clear: both; display: block; position:absolute; z-index:1000 }
.coda-nav ul li { display: inline }
.coda-nav ul li a { background: url(../img/circle.png) 1px 1px no-repeat; display: block; width:9px; height:9px; float: left;  text-decoration: none; margin: 0 3px;}
.coda-nav ul li a.current {background: url(../img/circle.png) 0 -9px no-repeat; width:9px !important; height:9px !important; position:relative; top:0;}

/*PREV AND NEXT ARROWS*/	
.coda-nav-left a, .coda-nav-right a { width: 59px; height:72px;z-index:1000; display: block;}       
.coda-nav-left, .coda-nav-right { position:absolute}
.coda-nav-left { left:0; z-index: 1005; background: url(../img/l-r-but.png) 0 0 no-repeat; }
.coda-nav-right { right:0; background: url(../img/l-r-but.png) 0 -144px no-repeat;}
.coda-nav-left:hover { background: url(../img/l-r-but.png) 0 -72px no-repeat;}
.coda-nav-right:hover { background: url(../img/l-r-but.png) 0 -216px no-repeat; }

Вуаля… готово! Исходники Демо Надеюсь, топик будет кому-нибудь полезен! P.S. Ещё один вариант применения, просмотр панорамных фото…
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх