Использование слайдера Anything с Tooptipster
У меня странная проблема. Я использую Anything Slider в сочетании с Tooltipster для создания тегов лица на изображениях. Первоначально я не мог заставить обоих работать вместе, ни один работал или другой, но не оба. Я подумал, что это связано с конфликтом между двумя разными версиями JQuery. Теперь я установил их совместную работу с помощью метода noConflict, и все работает отлично, за исключением того, что подсказки не работают с последним изображением на слайдере!
Если я изменяю порядок изображений, то новое последнее изображение - это то, которое не работает - это всегда последнее изображение. Я могу заставить работать последнее изображение, просто поместив другой тег элемента списка (без какого-либо содержимого) после последнего изображения. Хотя это возможный обходной путь, он оставляет пустое изображение на слайдере, что выглядит не очень хорошо.
Я должен сказать, что я не программист, я только что все это выяснил, но теперь я в замешательстве, поэтому любая помощь будет оценена в отношении того, в чем может быть проблема.
Вот мой код заголовка:
<head>
<meta charset="utf-8">
<title>Gallery Testing</title>
<!-- *** AnythingSlider JavaScript and Styling Links *** -->
<!-- jQuery *** required *** -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting *** required *** -->
<link rel="stylesheet" href="../../css/prettify.css" media="screen">
<script src="../../js/prettify.js"></script>
<!-- jQuery (required) & jQuery UI (for this demo only) -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<!-- Anything Slider optional plugins -->
<script src="../../js/jquery.easing.1.2.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="../../css/anythingslider.css">
<script src="../../js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="../../css/theme-metallic.css" media="screen">
<!-- AnythingSlider optional FX extension -->
<!-- <script src="../../js/jquery.anythingslider.fx.js"></script>
-->
<!-- for Thumbnail slider -->
<link rel="stylesheet" href="../../css/page.css">
<script src="js/page2-slider-thumbnails.js"></script>
<!-- *** ToolTipster JaveScript and Styling Links *** -->
<link rel="stylesheet" type="text/css" href="../../css/tooltipster.css" />
<link rel="stylesheet" type="text/css" href="../../css/themes/tooltipster-light.css" />
<link rel="stylesheet" type="text/css" href="../../css/themes/tooltipster-shadow.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script type="text/javascript" src="../../js/jquery.tooltipster.min.js"></script>
<!--******************************************************************************* -->
<!-- AnythingSlider Java Script Functions -->
<!--
***********************************************************
START - This is the JavaScript required for each face tag.
Each tag must have a unique ID $('#uniquename').
***********************************************************
-->
<!-- Example Image Tag Info - Tag No 1 -->
<script>
var js = $.noConflict();
js(document).ready(function() {
js('#img1-tag1').tooltipster({
animation: 'fade',
delay: 100,
theme: 'tooltipster-shadow',
touchDevices: true,
interactive: true,
trigger: 'click',
content: $('<span><h4>Fred Bloggs</h4></span>')
});
});
</script>
<link href="../../css/skins/oka_skin.css" rel="stylesheet" type="text/css" media="screen">
</head>