|
<< Click to Display Table of Contents >> Versão funcional testada |
  
|
|
<< Click to Display Table of Contents >> Versão funcional testada |
|
Após tentar implementar e não conseguir, fiz novamente do zero.
Usei o jquery mais recente disponível (dez/13) e deixei o mais clean que consegui.
Então deixo aqui um zip completo, do projeto, com versão em html puro, arquivos originais css/js e versão aspnet.
Só não incluí as imagens porque isso é o de menos.
html puro
<html>
<head>
<title>Titulo</title>
<link href="../jquery/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script src="klass.min.js"></script>
<script src="../jquery/jquery-1.10.2.min.js"></script>
<script src="../jquery/jquery.mobile-1.4.0.min.js"></script>
<script src="code.photoswipe.jquery-3.0.4.min.js"></script>
<script>
(function (window, $, PhotoSwipe) {
$(document).ready(function () {
$("#gallery a").photoSwipe(
{
enableMouseWheel: true,
enableKeyboard: true,
loop: false
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div id="gallery">
<a href="http://accb.market.com.br/files/posts/img/11_1003500257.jpg" rel="external"><img src="http://accb.market.com.br/files/posts/img/t11_1003500257.jpg" alt="Image 001" /></a>
<a href="http://accb.market.com.br/files/posts/img/11_1003505414.jpg" rel="external"><img src="http://accb.market.com.br/files/posts/img/t11_1003505414.jpg" alt="Image 002" /></a>
<a href="http://accb.market.com.br/files/posts/img/11_1003503696.jpg" rel="external"><img src="http://accb.market.com.br/files/posts/img/t11_1003503696.jpg" alt="Image 003" /></a>
</div>
</body>
</html>
aspnet
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" ViewStateMode="Disabled" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Teste Photoswipe</title>
<link href="/js/jquery/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<link href="/js/photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="gallery">
<asp:HyperLink ID="hlLink" runat="server" NavigateUrl="http://accb.market.com.br/files/posts/img/11_1003500257.jpg">
<asp:Image ID="Image1" runat="server" ImageUrl="http://accb.market.com.br/files/posts/img/t11_1003500257.jpg" AlternateText="Mensagem 1" />
</asp:HyperLink>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://accb.market.com.br/files/posts/img/11_1003505414.jpg">
<asp:Image ID="Image2" runat="server" ImageUrl="http://accb.market.com.br/files/posts/img/t11_1003505414.jpg" AlternateText="Mensagem 22222" />
</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="http://accb.market.com.br/files/posts/img/11_1003503696.jpg">
<asp:Image ID="Image3" runat="server" ImageUrl="http://accb.market.com.br/files/posts/img/t11_1003503696.jpg" AlternateText="Foto muito feita" />
</asp:HyperLink>
</div>
</form>
<script src="/js/photoswipe/klass.min.js"></script>
<script src="/js/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/jquery/jquery.mobile-1.4.0.min.js"></script>
<script src="/js/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>
<script>
(function (window, $, PhotoSwipe) {
$(document).ready(function () {
$("#gallery a").photoSwipe(
{
enableMouseWheel: true,
enableKeyboard: true,
loop: false
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</body>
</html>
projeto
arquivos