Адаптивная галерея изображений

<div id="rg-gallery" class="rg-gallery">
    <div class="rg-thumbs">
        <!-- Карусель Elastislide для миниатюр -->
        <div class="es-carousel-wrapper">
            <div class="es-nav">
                <span class="es-nav-prev">Предыдущий</span>
                <span class="es-nav-next">Следующий</span>
            </div>
            <div class="es-carousel">
                <ul>
                    <li>
                        <a href="#">
                            <img src="/images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Здесь описание" />
                        </a>
                    </li>
                    <li>...</li>
                </ul>
            </div>
        </div>
        <!-- Карусель Elastislide для миниатюр -->
    </div><!-- rg-thumbs -->
</div><!-- rg-gallery -->

<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
    <div class="rg-image-wrapper">
        {{if itemsCount > 1}}
            <div class="rg-image-nav">
                <a href="#" class="rg-image-nav-prev">Предыдущее изображение</a>
                <a href="#" class="rg-image-nav-next">Следующее изображение</a>
            </div>
        {{/if}}
        <div class="rg-image"></div>
        <div class="rg-loading"></div>
        <div class="rg-caption-wrapper">
            <div class="rg-caption" style="display:none;">
                <p></p>
            </div>
        </div>
    </div>
</script>

rg-image-wrapper{
   position:relative;
   padding:20px 30px;
   background:transparent url(../images/black.png) repeat top left;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   min-height:20px;
}

rg-image{
   position:relative;
   text-align:center;
   line-height:0px;
}

rg-image img{
   max-height:100%;
   max-width:100%;
}

.rg-image-nav a{
    position:absolute;
    top:0px;
    left:0px;
    background:#000 url(../images/nav.png) no-repeat -20% 50%;
    width:28px;
    height:100%;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.3;
    outline:none;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

rg-image-nav a.rg-image-nav-next{
   right:0px;
   left:auto;
   background-position:115% 50%;
   -moz-border-radius: 0px 10px 10px 0px;
   -webkit-border-radius: 0px 10px 10px 0px;
   border-radius: 0px 10px 10px 0px;
}

.rg-image-nav a:hover{
    opacity:0.8;
}

.rg-caption {
    text-align:center;
    margin-top:15px;
    position:relative;
}
.rg-caption p{
    font-size:11px;
    letter-spacing:2px;
    font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
    line-height:16px;
    padding:0 15px;
    text-transform:uppercase;
}

.rg-view{
    height:30px;
}
.rg-view a{
    display:block;
    float:right;
    width:16px;
    height:16px;
    margin-right:3px;
    background:#464646 url(../images/views.png) no-repeat top left;
    border:3px solid #464646;
    opacity:0.8;
}
.rg-view a:hover{
    opacity:1.0;
}
.rg-view a.rg-view-full{
    background-position:0px 0px;
}
.rg-view a.rg-view-selected{
    background-color:#6f6f6f;
    border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
    background-position:0px -16px;
}

.rg-loading{
    width:46px;
    height:46px;
    position:absolute;
    top:50%;
    left:50%;
    background:#000 url(../images/ajax-loader.gif) no-repeat center center;
    margin:-23px 0px 0px -23px;
    z-index:100;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.7;
}

	// Контейнер галереи
	var $rgGallery			= $('#rg-gallery'),
	// Контейнер карусели
	$esCarousel			= $rgGallery.find('div.es-carousel-wrapper'),
	// Пункт карусели
	$items				= $esCarousel.find('ul > li'),
	// Общее количество пунктов
	itemsCount			= $items.length;

    Gallery = (function() {
        //Функция галереи
    })();
 
    Gallery.init();

			// Индекс текущего пункта
			var current			= 0, 
			// Режим : карусель || во весь экран
			mode 			= 'carousel',
			// Проверка, если одно изображение загружено
			anim			= false,
			init			= function() {
				
				// (Не обязательно) предварительная загрузка изображений здесьы...
				$items.add('<img src="/images/ajax-loader.gif"/><img src="/images/black.png"/>').imagesLoaded( function() {
					// Добавляем опции
					_addViewModes();
					
					// Добавляем обертку большого изображения
					_addImageWrapper();
					
					// Выводим первое изображение
					_showImage( $items.eq( current ) );
				});
				
				// Инициализуем карусель
				_initCarousel();
				
			},

			_initCarousel	= function() {
				
				// Используем плагин elastislide:
				$esCarousel.show().elastislide({
					imageW 	: 65,
					onClick	: function( $item ) {
						if( anim ) return false;
						anim	= true;
						// По нажатию клавиши мыши выводим изображение
						_showImage($item);
						// Меняем текущее
						current	= $item.index();
					}
				});
				
				// Устанавливаем текущее для elastislide
				$esCarousel.elastislide( 'setCurrent', current );
				
			},

			_addViewModes	= function() {
				
				// Кнопки вверху справа: скрыть / показать карусель
				
				var $viewfull	= $('<a href="#" class="rg-view-full"></a>'),
					$viewthumbs	= $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
				
				$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
				
				$viewfull.bind('click.rgGallery', function( event ) {
					$esCarousel.elastislide( 'destroy' ).hide();
					$viewfull.addClass('rg-view-selected');
					$viewthumbs.removeClass('rg-view-selected');
					mode	= 'fullview';
					return false;
				});
				
				$viewthumbs.bind('click.rgGallery', function( event ) {
					_initCarousel();
					$viewthumbs.addClass('rg-view-selected');
					$viewfull.removeClass('rg-view-selected');
					mode	= 'carousel';
					return false;
				});
				
			},

			_addImageWrapper= function() {
				
				// Добавляем структуру для больших изображений и кнопок навигации (если общее количество пунктов  > 1)
				
				$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
				
				if( itemsCount > 1 ) {
					// Добавляем навигацию
					var $navPrev		= $rgGallery.find('a.rg-image-nav-prev'),
						$navNext		= $rgGallery.find('a.rg-image-nav-next'),
						$imgWrapper		= $rgGallery.find('div.rg-image');
						
					$navPrev.bind('click.rgGallery', function( event ) {
						_navigate( 'left' );
						return false;
					});	
					
					$navNext.bind('click.rgGallery', function( event ) {
						_navigate( 'right' );
						return false;
					});
				
					// Добавляем событие touchwipe для обертки большого изображения
					$imgWrapper.touchwipe({
						wipeLeft			: function() {
							_navigate( 'right' );
						},
						wipeRight			: function() {
							_navigate( 'left' );
						},
						preventDefaultEvents: false
					});
				
					$(document).bind('keyup.rgGallery', function( event ) {
						if (event.keyCode == 39)
							_navigate( 'right' );
						else if (event.keyCode == 37)
							_navigate( 'left' );	
					});
					
				}
				
			},

			_navigate		= function( dir ) {
				
				// Навигация по большим изображениям
				
				if( anim ) return false;
				anim	= true;
				
				if( dir === 'right' ) {
					if( current + 1 >= itemsCount )
						current = 0;
					else
						++current;
				}
				else if( dir === 'left' ) {
					if( current - 1 < 0 )
						current = itemsCount - 1;
					else
						--current;
				}
				
				_showImage( $items.eq( current ) );
				
			},

			_showImage		= function( $item ) {
				
				// Выводим большое изображение, которое ассоциировано с $item
				
				var $loader	= $rgGallery.find('div.rg-loading').show();
				
				$items.removeClass('selected');
				$item.addClass('selected');
					 
				var $thumb		= $item.find('img'),
					largesrc	= $thumb.data('large'),
					title		= $thumb.data('description');
				
				$('<img/>').load( function() {
					
					$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
					
					if( title )
						$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
					
					$loader.hide();
					
					if( mode === 'carousel' ) {
						$esCarousel.elastislide( 'reload' );
						$esCarousel.elastislide( 'setCurrent', current );
					}
					
					anim	= false;
					
				}).attr( 'src', largesrc );
				
			};
		
		return { init : init };