Перейти к содержимому


Партнерская программа Kredov

Как сделать чтобы работали два слайдера на одной странице независимо

#1 WebWorkKz

WebWorkKz
  • Пользователь
  • 5 сообщений
  • Репутация: 0
0

Отправлено 24 Январь 2016 - 10:14

Добрый день уважаемые веб-мастера!

Помогите пожалуйста мне таком вопросе:

 

Мне нужно установить несколько слайдеров (, тото вроде fansybox) на одной страничке, но когда я устанавливаю в разных местах и листаю на втором, то на первом тоже листаются слайды. Они работаю как один слайдер, а мне нужно, чтобы они работали независимо друг от друга.

Спойлер

Помогите пожалуйста!

Прикрепленные файлы

  • Прикрепленный файл  i.html   1,89К   Количество загрузок: 57
  • Прикрепленный файл  fancybox.css   2,15К   Количество загрузок: 51
  • Прикрепленный файл  core_ajaxconst.php   1,46К   Количество загрузок: 49

 

 

Сообщение отредактировал WebWorkKz: 24 Январь 2016 - 11:20

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 24 Январь 2016 - 11:13

@WebWorkKz, во-первых, не плохо было бы код под спойлер спрятать - это правила хорошего тона. Во-вторых есть живой пример?


  • 0

#3 WebWorkKz

WebWorkKz
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 24 Январь 2016 - 11:27

Извините, исправил. 

 

Вот живой пример 

http://webwork.kz/buh1/i.html

 

Там два слайдера, а работать по отдельности не хотят

@lxman


  • 0

#4 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 24 Январь 2016 - 12:07

@WebWorkKz, в общем вот код js

<script type="text/javascript">
  function setBigImage(foto) {
	$("#adpdp14").attr('href', $(foto).parent('.it').children('a').attr('href'));
        document.getElementById("dp14").src = foto.src;
  }
  function setBigImage2(foto) {
	$("#adpdp15").attr('href', $(foto).parent('.it').children('a').attr('href'));
        document.getElementById("dp15").src = foto.src;
  }  
</script> 

 и вот так код html

          <div class="img">
			<a href="./i_files/5.jpg" rel="example_group" id="adpdp14">
			<img src="./i_files/5.jpg" id="dp14" style="margin-bottom: 3px;" alt=""></a>
		  </div>
          <div class="thumbs">
            <div class="it"><a style="display:none;" href="./i_files/1.jpg" rel="example_group"></a>
				<img src="./i_files/1.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/3.jpg" rel="example_group"></a>
				<img src="./i_files/3.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/4.jpg" rel="example_group"></a>
				<img src="./i_files/4.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/5.jpg" rel="example_group"></a>
				<img src="./i_files/5.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/6.jpg" rel="example_group"></a>
				<img src="./i_files/6.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/7.jpg" rel="example_group"></a>
				<img src="./i_files/7.jpg" onclick="setBigImage(this);" alt=""></div>
            <div class="clr"></div>
          </div>
<br>
<br>
<br>

          <div class="img">
			<a href="./i_files/1.jpg" rel="example_group" id="adpdp15">
			<img src="./i_files/1.jpg" id="dp15" style="margin-bottom: 3px;" alt=""></a>
		  </div>
          <div class="thumbs">
            <div class="it"><a style="display:none;" href="./i_files/1.jpg" rel="example_group"></a>
				<img src="./i_files/1.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/3.jpg" rel="example_group"></a>
				<img src="./i_files/3.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/4.jpg" rel="example_group"></a>
				<img src="./i_files/4.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/5.jpg" rel="example_group"></a>
				<img src="./i_files/5.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/6.jpg" rel="example_group"></a>
				<img src="./i_files/6.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="it"><a style="display:none;" href="./i_files/7.jpg" rel="example_group"></a>
				<img src="./i_files/7.jpg" onclick="setBigImage2(this);" alt=""></div>
            <div class="clr"></div>
          </div>

Но сразу хочу предупредить, что этот метод громоздкий и под каждый отдельный слайдер придётся вписывать свою javascript функцию, хотя возможно тут можно сократить и сделать универсальное решение. Но писать новую функцию для обработки мне не хочется да и времени нет. Надеюсь итак сойдёт

Кстати вот пример рабочий

Только HTML разметку из моего полностью не берите, найдите что поправлено и сделайте также у себя

Прикрепленные файлы

  • Прикрепленный файл  i.html   5,06К   Количество загрузок: 66

  • 1

#5 WebWorkKz

WebWorkKz
    Topic Starter
  • Пользователь
  • 5 сообщений
  • Репутация: 0

Отправлено 24 Январь 2016 - 12:14

Спасибо Вам огромное! Вы очень мне помогли! Хорошо что есть такие умные люди! :)


  • 0

#6 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 24 Январь 2016 - 16:33

@WebWorkKz, да не за что  :) И хорошо, что вы инициативу проявили, а так тема могла бы пройти мимо глаз


Сообщение отредактировал Ixman: 24 Январь 2016 - 16:33

  • 0


Оформление форума – IPBSkins.ru