jQuery lightBox com CodeIgniter

ldmotta — Tue, 20 Oct 2009 14:10:10 +0000

Implementando o “exelente” jQuery lightbox plugin com CodeIgniter

Foi atravéz da matéria do Leandro Vieira (iMasters) que implementou o Lightbox JS criado pelo Lokesh Dhakar, e outra do Gin2 (wiki do CodeIgniter), que resolvi inseri este plugin como biblioteca no codeigniter, dando ao usuário maior praticidade na hora do desenvolvimento e aplicação de lightbox em suas galeria.

Escolhi o jQuery lightbox plugin, porque além de bastante simples, faz o trabalho com maestria (parabéns Leonardo).

“Para este exemplo, estou levando em consideração que você tenha uma instalação do CI funcionando.”

1° PASSO

Baixe a última versão da biblioteca jQuery lightbox plugin e disponibilize em uma pasta da sua instalação do CI, neste caso, defini como na estrutura abaixo.

Estrutura de diretórios

2° PASSO

No header da view onde estará a sua galeria de imagens, insira o código que carrega a biblioteca

3° PASSO

Em algum lugar na página, crie uma tag javascript que vai escrever a função definida na biblioteca lightbox.php

Como definido no jQuery lightbox plugin, os objetos que farão parte da galeria devem obedecer o seguinte critério:

- Tag com href apontando para a imagem em tamanho real

- Tag exibindo o thumbnail

4° PASSO

Crie uma biblioteca de nome “lightbox.php” com o código abaixo:

class LightBox {

    function simple($target='simpleModal') {
        $block = $this->jsBlock();
        $url = base_url();
        $output = "
        $(function() {
            $('#profile_img a').lightBox({
                imageLoading:'{$url}skin/images/lightbox-ico-loading.gif',
                imageBtnPrev:'{$url}skin/images/lightbox-btn-prev.gif',
                imageBtnNext:'{$url}skin/images/lightbox-btn-next.gif',
                imageBtnClose:'{$url}skin/images/lightbox-btn-close.gif',
                imageBlank:'{$url}skin/images/lightbox-blank.gif'
            }); // Seleciona todos os links dentro do elemento com ID galeria
        });";
        return $block['open'].$output.$block['close'];
    }

    function jsBlock() {
        $blocks = array(
            'open'=>''."\n\r",
            'close'=>''."\n\r"
        );
        return $blocks;
    }

}

?>

5° PASSO

Agora no controler que chama a view da sua galeria, instancie a biblioteca lightbox.php da seguinte forma:

function index() {
    $this->load->library('lightbox');
    $this->load->helper('url'); //assistente de url, usado ao chamar base_url()
}

Motanet » Plugins

jQuery lightBox com CodeIgniter