Photoswipe

<< Click to Display Table of Contents >>

Navigation:  »No topics above this level«

Photoswipe

Previous pageReturn to chapter overviewNext page

Intro

 

Vantagens:

oResponsivo - imagem sempre ocupa maior espaço possível

oFunciona bem nos smartphones

oGestures (touch)

 

Desvantagens (sobre o Fancybox):

oNão tem thumbs

 

 

Telas

 

swipe1

 

swipe2

 

aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link href="/js/photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

        <h3>Photoswipe Responsive com Swipe</h3>

 

        <ul id="Gallery" class="gallery">

            <li>

                <asp:HyperLink ID="hlLink" runat="server" NavigateUrl="~/img/efapi1.jpg">

                    <asp:Image ID="Image1" runat="server" ImageUrl="~/img/efapi1.jpg" AlternateText="Mensagem 1" />

                </asp:HyperLink>

            </li>

            <li>

                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/img/efapi2.jpg">

                    <asp:Image ID="Image2" runat="server" ImageUrl="~/img/efapi2.jpg" AlternateText="Mensagem 22222" />

                </asp:HyperLink>

            </li>

            <li>

                <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/img/efapi3.jpg">

                    <asp:Image ID="Image3" runat="server" ImageUrl="~/img/efapi3.jpg" AlternateText="Foto muito feita" />

                </asp:HyperLink>

            </li>

        </ul>

    </form>

    <script type="text/javascript" src="/js/photoswipe/klass.min.js"></script>

    <script src="/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="/js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>

    <script type="text/javascript">

        (function (window, $, PhotoSwipe) {

            $(document).ready(function () {

                var options = { };

                $("#Gallery a").photoSwipe(options);

            });

        }(window, window.jQuery, window.Code.PhotoSwipe));

    </script>

</body>

</html>

 

cs

 

Não tem

 

Projeto

 

swipe3

 

Links

 

http://www.photoswipe.com/