Versão funcional testada

<< Click to Display Table of Contents >>

Navigation:  Photoswipe >

Versão funcional testada

Previous pageReturn to chapter overviewNext page

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

 

photoswipe

 

arquivos

 

projeto completo