Как соединить jQuery Slider и Highslide?

01.08.2013, 13:42. **Показов** 1414. **Ответов** 1

Author24 — интернет-сервис помощи студентам

Дорогие друзья!

Не могли бы Вы мне подсказать, как правильно соединить jQuery Slider и Highslide на главной странице?

У меня в шапке работает слайдер, но вместе с ним не работает Highslide для фотографий.

Слайдер:

HTML5

<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 
<style type="text/css">
 .slider {
   width:1000px;
   height:300px;
   overflow:hidden;
   margin:0px auto;
   background-image:url(slider/img/4.png);
   background-repeat:no-repeat;
   background-position:center;
}
 .slider img {
   width:1000px;
   height:300px;
   display:none;
}
</style>
 
<body onload="Slider();" ...
 
  <div class="slider">
  <img id="1" src="slider/img/1.png" border="0" alt="1" />
  <img id="2" src="slider/img/2.png" border="0" alt="2" />
  <img id="3" src="slider/img/3.png" border="0" alt="3" />
  </div>

Highslide:

HTML5

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
 
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.wrapperClassName = 'wide-border';
</script>
 
<a href="highslide/graphics/1.jpg" class="highslide" onclick="return hs.expand(this)">
<font color="#FFFFFF"><img src="highslide/graphics/2.png" title="Увеличить" width="100" height="100" alt="1" border="0" align="left" hspace="7" vspace="6" /></font></a>

В случае соединения двух "плагинов" (?) слайдер в шапке работает исправно, а при нажатии на превью фотографии с highslide на ней появляется полоска со словом "loading..." и далее ничего не происходит.

До этого я пыталась соединить jQuery Slider и Prototype Lightbox:

HTML5

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
 
<a href="https://www.cyberforum.ru/images/clients/1.JPG" rel="lightbox">

Так же ничего не получилось.

Анна

@vooduq · 01.08.2013, 15:29

возможно в них используются уникальные переменные которые совпадают
для протототайпа нужно обезопасить свой jquery код например обернуть его функцией

Javascript

$.noConflict();
jQuery(document).ready(function($) {
 
ваш код jquery
 
});

т.к. прототайп и джейквери используют один и тот же символ вызова $

	01.08.2013, 15:29

Как соединить jQuery Slider и Highslide?

Решение