Efeito Milkbox para blogger

O Milkbox é mais um clone do Lightbox, desta vez feito por Luca Reghellin. A diferença é que no Milkbox, além de poder visualizar as imagem das mesma maneira que o Lightbox faz, você pode visualizar vídeos, galerias completas e até páginas html de uma maneira fácil e interativa.

No meu blog de testes, você pode visualizar o efeito da página em html. E nesta página, que vêm junto ao efeito quando você faz o download, você pode visualizar como funciona os outros efeitos, tais como arquivo SWF, imagens, galeria e a página html.

COMO INSTALAR O MILKBOX

Faça o Download do arquivo. Ele contêm páginas de demonstração.

Coloque o código abaixo, acima de



    <link href="http://www.pinkskulldesign.com/milkbox-3.0.1/css/milkbox/milkbox.css"
    rel="stylesheet">






    // <![CDATA[

    var addJsonGalleries;

    $(window).addEvent('domready',function(){

    addJsonGalleries = function(){

    //add 3 json galleries

    milkbox.addGalleries([

    { name:'obj-gall1', autoplay:true, autoplay_delay:4, files:[ { href:'/blog/2011/07/img/01b.jpg',
    title:'Test title' }, { href:'/blog/2011/07/swf/testswf1_var1_yellow_ampvar2_300.swf', size:"width:550,
    height:400" } ]},


    { name:'obj-gall2', autoplay_delay:9, files:[ { href:'/blog/2011/07/swf/testswf2_var1_ultex_ampvar2_30.swf',
    size:"width:400, height:300" }, { href:'/blog/2011/07/swf/testswf1.swf', size:"width:550,
    height:400" } ]},


    { name:'obj-gall3', files:[ { href:'/blog/2011/07/img/croda_b.jpg' }, { href:'/blog/2011/07/img/ska_b.jpg' }
    ]}

    ]);

    }//addObjGalleries

    });

    // ]]>

    Os arquivos foram colocados dentro do meu próprio servidor, mas você pode usar o Free Javascript Host, Google Codes ou Dropbox para hospedar os arquivos .JS, e usar para hospedar o .CSS do efeito, o Zymic Host, 110MB Hosting, Google Sites ou até mesmo o Dropbox.

    COMO FAZER O EFEITO FUNCIONAR - CHAMANDO O CÓDIGO

    Imagens


    <a data-milkbox="milkbox:g1" href="http://draft.blogger.com/LINK_DA_IMAGEM"
    title="
    TÍTULO DA IMAGEM">IMAGEM OU TEXTO

    Ou seja, é o data-milkbox="milkbox:g1" que irá chamar o código do efeito, coloque da mesma forma que mostra a imagem acima.

    Arquivo SWF


    <![CDATA[
    <a href="LINK SWF" title="TÍTULO DO SWF" data-milkbox="single"
    data-milkbox-size="width:650, height:250">Link para o arquivo swf

    Além de chamar o arquivo swf com o código data-milkbox="single" você terá que determinar os valores, ou seja, o tamanho do arquivo, para isso insira também o código data-milkbox-size="width:650, height:250", mas lembre-se de mudar os valores de largura (width) e altura (height) de acordo com o tamanho real do arquivo pois estes valores citados acima são apenas para demonstração.

    Página HTML em IFRAME


    <![CDATA[
    <a href="LINK_PÁGINA_HTML" data-milkbox="milkbox:g1" data-milkbox-size="width:600,height:450"
    title="TÍTULO DA PÁGINA HTML NO IFRAME">LINK DE TEXTO OU IMAGEM

    Chame o efeito com o código data-milkbox="milkbox:g1" e use também o código data-milkbox-size="width:600,height:450" para determinar a largura (width) e altura (height) do Iframe.

    Neste caso, a página externa que usei para inserir no iframe foi a mesma página externa de demonstração que vêm junto ao arquivo para Download, e você pode usá-la como exemplo.

    Espero que eu tenha sido clara mas para demais dúvidas sobre o arquivo, se eu puder ajudar, deixe um comentário, ou envie um e-mail para o Luca Reghellin, que desenvolveu o efeito, atravéz de milkbox@reghellin.com, ou até mesmo acesse a página do Milkbox.

    É isso.

    Até mais!

    Bella Felix

    facebooktwitterlinkedin

    Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.