Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2012, 17:48
Новичок на форуме
Отправить личное сообщение для popuas82 Посмотреть профиль Найти все сообщения от popuas82
 
Регистрация: 18.07.2012
Сообщений: 4

Не работают слайдеры под табами
Здравствуйте!
Помогите дотюкать, как заставить работать скрипт слайдера в табе. А конкретно.
Для слайдера использую плагин Google Slider kit

и для реализации табов тоже пробовал его же, но испробовал разные варианты скриптов для создания табов.

В общем в первом табе сладер подгружается хорошо, но после переключения на второй, он не отображается

подключение других скриптов правильная
<!-- jQuery library -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<!-- jQuery Plugin scripts -->
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<!-- Slider Kit scripts -->
<script type="text/javascript" src="js/jquery.sliderkit.1.9.2.pack.js"></script>
<script type="text/javascript" src="js/facebox.js"></script>


вот как тут правильно сделать?
$(document).ready(function(){
		// Tabs плагин jquery-ui-1.8.21.custom.min.js
		$('#tabs').tabs(); 
				
		// плагин jquery.sliderkit.1.9.2.pack.js
		$("#carousel_one").sliderkit({
			auto:true,
			autospeed:4000,
			shownavitems:5,
			circular:false,
			fastchange:false,
			scrolleasing:"easeOutExpo", //"easeOutBounce, easeOutBack"
			scrollspeed:500
		});
		
		$("#carousel_two").sliderkit({
			auto:true,
			autospeed:4000,
			shownavitems:5,
			circular:false,
			fastchange:false,
			scrolleasing:"easeOutExpo", //"easeOutBounce, easeOutBack"
			scrollspeed:500
		});
		
});


Есть две таба (вкладки)
<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
			</ul>
</div>


И вот два ДОМ слайдера
<!-- tab 2 -->
			<div id="tabs-1">
				<div id="carousel_one" class="sliderkit">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
						
							<ul>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
							</ul>
						</div>
						
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev">
							<a href="#" title="Scroll to the left"><span>Previous</span></a>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next">
							<a href="#" title="Scroll to the right"><span>Next</span></a>
						</div>
						
					</div>
				</div>
			</div>

<!-- tab 2 -->
			<div id="tabs-2">
				<div id="carousel_two" class="sliderkit">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
						
							<ul>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a><p>Игра света и тени в природе</p>
								</li>
								<li>
									<div class="time">
										<img src="images/clock.png"  />
									</div>
									<a href="#" title=""><img src="images/images/photos/6.jpg" width="176px" height="105px"  alt="" /></a>
								</li>
							</ul>
						</div>
						
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev">
							<a href="#" title="Scroll to the left"><span>Previous</span></a>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next">
							<a href="#" title="Scroll to the right"><span>Next</span></a>
						</div>
						
					</div>
				</div>
			</div>


И для будущего хочу понять, как избежать таких проблем?

Последний раз редактировалось popuas82, 19.07.2012 в 10:17. Причина: дополнение
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2012, 16:33
Новичок на форуме
Отправить личное сообщение для popuas82 Посмотреть профиль Найти все сообщения от popuas82
 
Регистрация: 18.07.2012
Сообщений: 4

Куда копать, кто поможет
Ну хоть кто-нибудь объясните пожалуйста как сделать чтобы каруселька загружалась во вкладке, когда переключаешь табы
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2012, 16:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

popuas82,
Лучше ссылку на страницу с примером - не айс просить помощи и помогающим склеивать страницу
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2012, 08:07
Новичок на форуме
Отправить личное сообщение для popuas82 Посмотреть профиль Найти все сообщения от popuas82
 
Регистрация: 18.07.2012
Сообщений: 4

Здравствуйте!

Сообщение от Deff Посмотреть сообщение
popuas82,
Лучше ссылку на страницу с примером - не айс просить помощи и помогающим склеивать страницу
извиняюсь за промах, вот прикрепляю архив с примером...
Вложения:
Тип файла: zip test_tabs.zip (479.1 Кб, 9 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2012, 08:18
Новичок на форуме
Отправить личное сообщение для popuas82 Посмотреть профиль Найти все сообщения от popuas82
 
Регистрация: 18.07.2012
Сообщений: 4

Вроде бы что то получилось
В общем как нуб в яваскрипте я поднапряг извилины и что то вроде вышло...

выкинул из кода лишний скрипт библиотеку jqueri ui и собрал всё на плагине Slider kit

и у меня в итоге получился вот такой код

$(window).load(function(){
			var cortwo = 0;
			function coruselTwo(){
				var cortwo = 1;
				$("#carousel_two").sliderkit({
					auto:false,
					autospeed:4000,
					shownavitems:5,
					circular:true,
					fastchange:true,
					scrolleasing:"easeOutBack",
					scrollspeed:500
				});
			};

			function coruselOne(){
				$("#carousel_one").sliderkit({
					auto:false,
					autospeed:4000,
					shownavitems:5,
					circular:false,
					fastchange:true,
					scrolleasing:"easeOutBounce",
					scrollspeed:500
				});
			};
			
			if (cortwo == 0) coruselOne();
			
			$(".tabs-imbricate_one").click(function() {
				$("#carousel_one").css('display','block');
				$("#carousel_two").css('display','none');
				setTimeout(coruselOne, 100)
			});
			
			$(".tabs-imbricate_two").click(function() {
				$("#carousel_two").css('display','block');
				$("#carousel_one").css('display','none');
				setTimeout(coruselTwo, 20)
			});
				
				// Tabs > Imbricated
				$(".tabs-imbricate").sliderkit({
					cssprefix:"customtabs",
					auto:false,
					tabs:true,
				});
				
			});


если есть замечания по коду, то критика профи не помешала бы...
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2012, 12:33
Интересующийся
Отправить личное сообщение для nohc Посмотреть профиль Найти все сообщения от nohc
 
Регистрация: 02.09.2009
Сообщений: 11

Как решить проблему?
Помогите пожалуйста. В JS вообще ноль.
Подключаю Slider Kit.
На выходе нужно получить 5 табов, в третьем - галерея.
В первом подключается хорошо, во втором и последующих - никак.

К сожалению, ссылку дать не могу - делаю на Denwer`е.
Библиотеку брал с официального сайта, на всякий случай - вложил архив в сообщение.

Код в head:
<!-- jQuery library -->
<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/_oldies/jquery-1.3.min.js"></script>
		<!--<script type="text/javascript" src="/assets/templates/v_1.0/ex/jquery.sliderkit.1.9.2t/js/external/jquery-1.6.2.min.js"></script>-->
		
		<!-- jQuery Plugin scripts -->
		<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/external/jquery.mousewheel.min.js"></script>
		
		<!-- Slider Kit scripts -->
		<script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>
    <script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/addons/sliderkit.delaycaptions.1.1.pack.js"></script>
    <script type="text/javascript" src="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/js/sliderkit/addons/sliderkit.imagefx.1.0.pack.js"></script>

		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility			
        
			
	// Tabs > Imbricated
				$(".tabs-imbricate").sliderkit({
					cssprefix:"customtabs",
					auto:false,
                                        freeheight:true,
					tabs:true
				});
        
        // Photo gallery > With captions
				$(".photosgallery-captions").sliderkit({
					mousewheel:true,
					keyboard:true,
					shownavitems:6,
					auto:false,
					delaycaptions:true
				});			

			});	
		</script>
		
		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos.css" media="screen, projection" />
		
		<!-- Slider Kit compatibility -->	
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie7.css" /><![endif]-->
		<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/assets/templates/v_1.0/ext/jquery.sliderkit.1.9.2/css/sliderkit-demos-ie8.css" /><![endif]-->


Код HTML:
<!-- Start of tabs-imbricate -->
<div class="customtabs tabs-imbricate">
  <div class="customtabs-nav">
    <div class="customtabs-nav-clip">
      <ul>
        <li><a href="#">Таб 1</a></li>
				<li><a href="#">Таб 2</a></li>
				<li><a href="#">Таб 3 с фотогалереей</a></li>
        <li><a href="#">Таб 4</a></li>
        <li><a href="#">Таб 5</a></li>
			</ul>
		</div>
	</div>
	<div class="customtabs-panels">
    <div class="customtabs-panel">Lorem Ipsum 1</div>
    <div class="customtabs-panel">Lorem Ipsum 2</div>
    <div class="customtabs-panel">
      <!-- Start photosgallery-captions -->
			<div id="photosgallery-captions" class="sliderkit">
			    <!-- Start Навигация -->
					<div class="sliderkit-nav">
            <div class="sliderkit-nav-clip">
						  <ul>
								<li><a href="#" rel="nofollow"><img src="/thumb-img1.jpg" /></a></li>
								<li><a href="#" rel="nofollow"><img src="/thumb-img2.jpg" /></a></li>
								<li><a href="#" rel="nofollow"><img src="/thumb-img3.jpg" /></a></li>
							</ul>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a rel="nofollow" href="#" title="Previous line"><span>Previous line</span></a></div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a rel="nofollow" href="#" title="Next line"><span>Next line</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a rel="nofollow" href="#" title="Previous photo"><span>Previous photo</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a rel="nofollow" href="#" title="Next photo"><span>Next photo</span></a></div>
					</div>
					<!-- // end of Навигация -->
					<!-- Start Вывод img -->
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<img src="/img1.jpg" />
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<p>Описание картинки 1</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>
						<div class="sliderkit-panel">
							<img src="/img2.jpg" />
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<p>Описание картинки 2</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>						
						<div class="sliderkit-panel">
							<img src="/img3.jpg" />
							<div class="sliderkit-panel-textbox">
								<div class="sliderkit-panel-text">
									<p>Описание картинки 3</p>
								</div>
								<div class="sliderkit-panel-overlay"></div>
							</div>
						</div>						
          </div> 
          <!-- // end of Вывод img -->
			</div>
		  <!-- // end of photosgallery-captions -->
    </div>
    <div class="customtabs-panel">Lorem Ipsum 4</div>
    <div class="customtabs-panel">Lorem Ipsum 5</div>
  </div>
</div>
<!-- // end of tabs-imbricate -->
Вложения:
Тип файла: zip jquery.sliderkit.1.9.2.zip (1.09 Мб, 9 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работают два JS скрипта вместе на одной странице 5art@mail.ru Events/DOM/Window 44 15.07.2012 17:51
Под IE8 задизейблена кнопка, а под Mozilla нет Svetich Internet Explorer 2 05.07.2011 09:03
Подстроить высоту страницы под юзера, прошу совета у гуру batonsu Events/DOM/Window 11 10.11.2010 18:39
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 00:05
Выезжание таблицы из под ниоткуда. lancer Элементы интерфейса 3 29.06.2008 14:03