Я работал с PrettyPhoto, чтобы создать простую галерею. Моя проблема в том, что я не понимаю, как реализовать API из документации, представленной на сайте разработчика . Когда я добавляю код, как я его понимаю, и нажимаю на якорь, ничего не происходит.
У меня есть страница Site.Master и страница с контентом, которая использует плагин. Вот код, который я имею на странице содержания:
<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
$('#prettyPhoto').click(function () {
api_images = ['images/prettyPhoto/dogs.png', 'images/prettyPhoto/Yard1.png', 'images/prettyPhoto/Yard2.png', 'images/prettyPhoto/Yard3.png'];
api_titles = ['Title Dogs', 'Title Yard 1', 'Title Yard 2', 'Title Yard 3'];
api_descriptions = ['Dogs', 'Yard 1', 'Yard 2', 'Yard 3'];
$.prettyPhoto.open(api_images, api_titles, api_descriptions);
});
</script>
</asp:Content>
...
<a href="#" id="prettyPhoto"><img src='images/prettyPhoto/dogs.png' alt='Dogs' style="float:right; margin:0px 0px 10px 10px" /></a>
А вот и контент Site.Master:
<head id="Head1" runat="server">
<link rel="stylesheet" href="Styles/styles.css" type="text/css" />
<link rel="stylesheet" href="styles/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.newWindow').click(function (event) {
var url = $(this).attr("href");
var windowName = $(this).attr("name");
var windowSize = windowSizeArray[$(this).attr("rel")];
window.open(url, windowName, windowSize);
event.preventDefault();
});
$('.slideshow').cycle();
if ($("#content").height() > $("#sidebar").height()) {
$("#sidebar").height($("#content").height());
}
else {
$("#content").height($("#sidebar").height());
}
});
</script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
Я надеюсь, что я не публикую здесь слишком много информации, но мне не ясно, где моя ошибка. И я ЗНАЮ, что делаю ошибку, потому что ранее сегодня у меня был этот элемент управления, работающий так, как я хотел, но затем я должен был начать «точную настройку» его. Прежде, чем я знал это, я потерял след своих изменений и сломал это.