JSimplePresentation

LIVE PREVIEWBUY FOR $6

Este item representa uma nova visão de uma apresentação de slides, oferecida como um plug -in jQuery.
Alguns dos usos possíveis:

• Para usá -lo em vez de PowerPoint para apresentar suas idéias
• Para anunciar um produto, um site, …
• Para fazer um livro projetado para HTML
• etc, etc.

Características

• Capaz de usar outros plugins além deste
• Capaz de carregar o número ilimitado de páginas
• Ele pode contém o que você deseja (uma página é uma div) simples)
• As páginas (centro da página) são redimensionadas automaticamente com o navegador
• Total e facilmente personalizável
• Muito fácil de usar
• Navegação do teclado (direita / esquerda / espaço / L)
• Opção de apresentação de slides
• Opção AutoPlay
• Opção de loop
• Opção de pré -carregamento da imagem
• Vá para uma determinada página (com controle de entrada garantido)
• W3C válido
• Funciona no iOS (iPhone / iPad) e certamente no Android
• Três temas incluídos (cinza, azul, laranja)
• 4 predefinições de transição
• Você pode escrever sua própria transição com uma função simples na chamada do plug -in
• As transições podem ser diferentes para as próximas e anteriores ações
• Bem comentado (a maioria das ações no código contém comentários)

Como usá -lo

JS – Sintaxe

$(document).simplePresentation({
    autoplay: boolean,
    loop: boolean,
    intervalTime: integer,
    preloading: boolean,
    transitionFct: function
});

JS – Exemplo com uma transição predefinida

var transitionFunction = function(elt, source, transitionTime) {
    Transition.opacity(elt, source, transitionTime);
};

$(document).simplePresentation({
    autoplay: false,
    loop: false,
    intervalTime: 2000,
    preloading: false,
    transitionFct: transitionFunction
});

JS – Exemplo com uma transição que escrevemos

var transitionFunction = function(elt, source, transitionTime) {
    elt.css("opacity", "0");

    // If we're going to the next page
    if (source == "RIGHT") {
        elt.css("marginLeft", "100%");
        elt.animate({
            "opacity": 1,
            "marginLeft": "0px" 
        }, transitionTime);
    } else {
        elt.css("marginRight", "100%");
        elt.animate({
            "opacity": 1,
            "marginRight": "0px" 
        }, transitionTime);
    }
};

$presentation = $(document).simplePresentation({
    autoplay: false,
    loop: false,
    intervalTime: 4000,
    preloading: true,
    transitionFct: transitionFunction
});

Html

<div id="container">
    <div id="page1">
        ...
    </div>
    <div id="page2">
        ...
    </div>
</div>

Cada div com id = ”PageX” representa uma página.

Cada páginas deve ter um ID que começa com “página”.

Navegadores compatíveis

Este item funciona com os seguintes navegadores:

• Firefox 4+
• IE7+ (usa uma folha de estilo CSS separada para o IE menor que V.9)
• Ópera
• Cromo
• Safári

Source