Перейти к публикации
DaImeR

Адаптация слайдера

Рекомендованные сообщения

DaImeR

Ситуация такая. Был html шаблон со слайдером

<div class="flexslider">
<ul class="slides">
   <li><a href=" 2012/04/time-management-for-designers/"><img src="/upload/iblock/c89/c89604d9c63f857c57c7d7aab77f06ab.jpg" alt="ОТ ВОЗМОЖНОСТИ ВЫБОРА К ВЫБОРУ ВОЗМОЖНОСТЕЙ"></a>
<div class="flex-caption">
<div class="caption">
<span class="category">
<h2><a href="/news/23/" title="View all posts in Books" rel="category tag">Философские науки</a></h2>
</span>
<h2><a href="/news/23/">ОТ ВОЗМОЖНОСТИ ВЫБОРА К ВЫБОРУ ВОЗМОЖНОСТЕЙ</a></h2>
<div class="excerpt">							<p>Человек склонен к экстраординарным способам самоутверждения в структуре мироздания.</p>
</div>
<div class="more">
<a class="btn" href="/news/24/">Читать все</a>
</div></div></div>
</li>
									
<li>
<a href="/news/26/"><img src="/upload/medialibrary/721/721abeff83d1bc9d178b287c1dc9a332.jpg" /></a>				<div class="flex-caption">
<div class="caption">
<span class="category">
<h2><a href="/news/26/" title="View all posts in Games" rel="category tag">Технические науки</a></h2>
</span>
<h2><a href="/news/26/">СОВЕРШЕНСТВОВАНИЕ МЕТОДИКИ ИСПЫТАНИЯ ТОПЛИВОПОДАЮЩЕЙ АППАРАТУРЫ ДИЗЕЛЕЙ</a></h2>
<div class="excerpt">
<p>Для выполнения установленных законодательством норм выбросов вредных веществ современные топливоподающие системы, с электронной системой управления впрыском топлива обеспечивают управление...</p>
</div>
<div class="more">
<a class="btn" href=" 2012/01/angry-birds-downloaded-6-5m-times-on-christmas-day/">Читать все</a>
</div></div></div>
</li>
</ul>
</div>

Натянули дизайн на битрикс. Там есть свой слайдер с шаблоном:

 

<?if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<style type="text/css">
	.asd_slider_window {
		height:<?= $arResult[0]['PICTURE']['HEIGHT']?>px;width:<?= $arResult[0]['PICTURE']['WIDTH']?>px;
	}
	#asd_slider_overtext {
		width: <?= $arResult[0]['PICTURE']['WIDTH']?>px;
	}
	#asd_slider_overtext .asd_slider_title {
		width: <?= $arResult[0]['PICTURE']['WIDTH']-10?>px;
	}
	#asd_slider_overtext .asd_slider_des {
		width: <?= $arResult[0]['PICTURE']['WIDTH']-10?>px;
	}
</style>
<script type="text/javascript">
	var timerSpeed = <?= $arParams['TIME']*1000?>;
</script>

<div class="asd_slider_main_view">
	<div class="asd_slider_window">
		<div class="asd_slider_image_reel">
			<?foreach ($arResult as $i => $arItem):?>
				<?if (strlen($arItem['DETAIL_PAGE_URL'])):?>
			<a href="<?= $arItem['DETAIL_PAGE_URL']?>" title="<?= $arItem['NAME']?>"><img src="<?= $arItem['PICTURE']['SRC']?>" width="<?= $arItem['PICTURE']['WIDTH']?>" height="<?= $arItem['PICTURE']['HEIGHT']?>" alt="<?= $arItem['NAME']?>" title="<?= $arItem['NAME']?>" hspace="0" /></a>
				<?else:?>
				<img src="<?= $arItem['PICTURE']['SRC']?>" width="<?= $arItem['PICTURE']['WIDTH']?>" height="<?= $arItem['PICTURE']['HEIGHT']?>" alt="<?= $arItem['NAME']?>" title="<?= $arItem['NAME']?>" />
				<?endif;?>
				<div class="asd_slider_hidden" id="asd_slider_title_<?= $i?>"><?= $arItem['NAME']?></div>
				<div class="asd_slider_hidden" id="asd_slider_text_<?= $i?>"><?= $arItem['PREVIEW_TEXT']?></div>
				<div class="asd_slider_hidden" id="asd_slider_link_<?= $i?>"><?= $arItem['DETAIL_PAGE_URL']?></div>
			<?endforeach;?>
		</div>
		<?if ($arParams['SHOW_PREVIEW_TEXT'] == 'Y'):?>
		<div id="asd_slider_overtext">
			<a class="asd_slider_title" href="<?= $arResult[0]['DETAIL_PAGE_URL']?>"><?= $arResult[0]['NAME']?></a>
			<a class="asd_slider_des" href="<?= $arResult[0]['DETAIL_PAGE_URL']?>"><?= $arResult[0]['PREVIEW_TEXT']?></a>
		</div>
		<?endif;?>
	</div>
	<div id="asd_slider_paging">
		<?foreach ($arResult as $i => $arItem):?>
		<a href="#" rel="<?= $i+1?>"><?= $i+1?></a>
		<?endforeach;?>
	</div>
</div>
<br clear="all" />
<?endif;?>

и у него есть свой JS

if (typeof requestInterval != 'function') {
	window.requestInterval = function(fn, delay) {
		return setInterval(fn, delay);
	}
}
if (typeof clearRequestInterval != 'function') {
	window.clearRequestInterval = function(handle) {
		return clearInterval(handle);
	}
}

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$('#asd_slider_paging').show();
	$('#asd_slider_paging a:first').addClass('active');

	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $('.asd_slider_window').width();
	var imageSum = $('.asd_slider_image_reel img').size();
	var imageReelWidth = imageWidth * imageSum;

	//Adjust the image reel to its new size
	$('.asd_slider_image_reel').css({'width' : imageReelWidth});

	//Paging + Slider Function
	rotate = function(){
		var triggerID = $active.attr('rel') - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$('#asd_slider_paging a').removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

		//Slider Animation
		$('.asd_slider_image_reel').animate({
			left: -image_reelPosition
		}, 500 );

		//Change text
		$('#asd_slider_overtext .asd_slider_title').html($('#asd_slider_title_' + triggerID).html());
		$('#asd_slider_overtext .asd_slider_title').attr('href', $('#asd_slider_link_' + triggerID).html());
		$('#asd_slider_overtext .asd_slider_des').html($('#asd_slider_text_' + triggerID).html());
		$('#asd_slider_overtext .asd_slider_des').attr('href', $('#asd_slider_link_' + triggerID).html());
	};

	//Rotation + Timing Event
	rotateSwitch = function(){
		play = requestInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('#asd_slider_paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('#asd_slider_paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, timerSpeed); //Timer speed in milliseconds (3 seconds)
	};

	rotateSwitch(); //Run function on launch

	//On Hover
	$('.asd_slider_image_reel').hover(function() {
		clearRequestInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});
	$('#asd_slider_overtext').hover(function() {
		clearRequestInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});

	//On Click
	$('#asd_slider_paging a').click(function() {
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearRequestInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});

});

 

Цель такова: Нужно адаптировать дизайн слайдера под дизайн который был  в HTML версии

 

Сам дизайн адаптировать получилось, но похоже есть какие то косяки в JS коде

http://prntscr.com/1g4452

 

http://prntscr.com/1g4496

 

 

 

Надеюсь все изложил логически верно

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...