function get_settings() {
var doc_location = document.location.href;
var url_strip = new RegExp("http:\/\/.*\/");
var base_url = url_strip.exec(doc_location);
var settings = { "base_url" : base_url }
return settings;
}


settings = get_settings();
alert(settings.base_url);


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

<script type="text/javascript" src="<?=base_url();?>skin/js/jquery.js"></script>
<script type="text/javascript" src="<?=base_url();?>skin/js/jquery.lightbox-0.5.min.js"></script>

3° PASSO

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

<script type="text/javascript">
    <?=$this->lightbox->simple('profile_img');?>
</script>

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

- Tag <a> com href apontando para a imagem em tamanho real

- Tag <img> exibindo o thumbnail

<a href="http://exemplo.com/imagens/imagem.jpg">
    <img src="http://exemplo.com/imagens/thumb.jpg" alt="Nome da imagem" />
</a>

4° PASSO

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

<?php

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()
}

Depois de algum tempo sem postar, estou “me permitindo” atualizar o blog com mais uma dica utilizando o jQuery, implementado a partir do artigo encontrado no blog “Ajaxianos” do Wender Lima.

Desta vez um busca por cep onde você dita as regras.

Let’s go –>

Requerimentos:

• jquery.js
• busca_cep.js

Download: busca_cep.js

Demonstração: exemplo do Busca CEP

Documentaçao:

No header do seu formulário, inicialize a biblioteca busca_cep.js

<script language="javascript" src="js/busca_cep.js" type="text/javascript"></script>

Defina as opções obrigatórias (target e campos)

Options ={
 target: "name_do_campo_cep",
 campos: {
    "rua"     :"name_do_campo_rua",
    "bairro"  :"name_do_campo_bairro",
    "cidade"  :"name_do_campo_cidade",
    "estado"  :"name_do_campo_estado"
 }
 };

Chamar o método initForms(opções)

initBuscaCep(Options)

*Obs. Você pode decidir quais campos quer preencher (rua, bairro, cidade, estado) passando o name dos inputs como valor do objeto”campos”

O código completo ficará como no exemplo abaixo.

<script type=”text/javascript”>

Options ={
target: “cep”,
//objeto com os names dos input do seu formulário
campos: {“rua”:”endereco”,”bairro”:”bairro”, “cidade”:”cidade”, “estado”: “estado”}
};
initBuscaCep(Options)

</script>

<form action=”http://sua_url.com.br”>

<label for=”cep”><input type=”text” id=”cep” name=”cep” /></label>

<label for=”rua”><input type=”text” id=”rua” name=”rua” /></label>

<label for=”bairro“><input type=”text” id=”bairro” name=”bairro” /></label>

<label for=”cidade“><input type=”text” id=”cidade” name=”cidade” /></label>

<label for=”estado“><input type=”text” id=”estado” name=”estado” /></label>

<input type=”button” value=”Enviar” />

</form>

Defina as propriedades obrigatórias para o correto funcionamento

• [target] String – Name do objeto de formulário referente ao CEP. Default = “cep” .
• [campos] Objeto – Recebe um objeto javascript correspondente aos nomes dos campos de cado objeto de formulário. Você pode decidir em recuperar os campos “rua, bairro, cidade, estado”. Ex.

      campos: {"rua":"endereco","cidade":"cidade"}

Qualqer dúvida entrem em contato com ldmotta@visie.com.br.

Comentários serão bem vindos.

Às vezes, nas brincadeiras de fim de semana, nos vem inspiração para resolver probleminhas do nosso cotidiano. Foi desta forma que resolvi criar uma “bibliotecazizinha” com jQuery que carregasse grandes formulários em uma página (magentopia) no estilo formulator, mas que desse ao usuário final uma experiência agradável ao ter que preencher cansativos passos destes formulários de cadastro.

Estou falando da jqFormulator, que está na versão “ontem.de.madrugada.1″ e tambem está aberta a novas idéias e melhoramentos.

Requerimentos:

• jquery-1.3.2.min.js >
• jqFormulator.js

Download: jqFormulator.js

Demonstração: exemplo do jqFormulator

Documentaçao:

No header do seu formulário, inicialize a biblioteca jqFormulator.js

<script language="javascript" src="js/jqFormulator.js" type="text/javascript"></script>

Defina as opções obrigatórias (titles e files)

Options ={
 type: "POST",
 titles: Array("Passo 1","Passo 2"),
 files: Array(
 "files/reserva-passo-1.php",
 "files/reserva-passo-2.php"
 )
 };

Chamar o método initForms(opções)

initForms(Options)

Insira o seu formulário na página com id = ‘formulator’

<form id="formulator" method="post" action="jqFormulator.php"></form>

O código completo ficará como no exemplo abaixo.

<script type=”text/javascript”>
Options ={
type: “POST”,
//array com os títulos de cada passo
titles: Array(“Passo 1″,”Passo 2″),
//array com os formuláios que serão chamados
files: Array(
“files/reserva-passo-1.php”,
“files/reserva-passo-2.php”
)
};
initForms(Options)
</script>
<div id=”forms”>
<form id=”formulator” method=”post” action=”#”></form>
</div>

Defina as propriedades obrigatórias para o correto funcionamento

• [type] String – Refine o tipo de envio (GET ou POST) default: POST.
  
• [titles] Array – Recebe um array que serão os titulos de cada passo. Caso a quantidade de títulos passados seja inferior a quantidade de arquivos, o sistema irá atribuir títulos sequenciais. Ex.

      titles: Array("Passo 1","Passo 2")

• [files] Array – Recebe um array com as urls dos arquivos que serão carregados. Ex.

Array (“files/cadastro/passo1.php”, “files/cadastro/passo2.php”, “files/cadastro/passo-n.php”)

Fig. 1 - Passo 1, na primeira exibição, o usuário só poderá acessar
o formulário do passo 1.


Fig. 2 - Passo 2, ao clicar em prosseguir no passo 1,
o título "Passo 1 e Passo 2" transformam-se em link permitindo ao
usuário navegar entre o primeiro e segundo passos e assim
suscessivamente.

Espero que está humilde aplicação possa ser útil a todos. Qualqer
dúvida entrem em contato com ldmotta@visie.com.br.

Comentários serão bem vindos.

http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html?page=1