quinta-feira, 2 de junho de 2011

Ampliando Images com jQuery

jQuery Image Ampliar permite que qualquer imagem na página a ser ampliada por um fator desejado, quando clicado, através de um elegante zoom in / out efeito.A imagem ampliada é centralizada na tela do usuário até rejeitado. Ele funciona em ambas as imagens com e sem largura explícita / altura atributos definidos. Isto significa que você pode pegar uma imagem grande que, por padrão ficaria fora de lugar, quando demonstrado, reduzi-lo usando largura explícita atributos / altura, depois que os usuários possam ampliá-lo sob demanda para suas dimensões originais quando a imagem é clicada usando este script.

Esse script é extremamente fácil de configurar para permitir a ampliar o "efeito" sobre a imagem, basta dar-lhe uma classe CSS de " magnify ". Você também pode chamarimageMagnify() dinamicamente em uma imagem para aplicar o efeito de ampliar a ela, ou até mesmo afetar a reaplicação após a sua src for alterada, por exemplo. É hora de deixá-lo utilizadores dar uma olhada nas imagens de demonstração da  minha  página! demo aqui http://blogandocomfacilidadedemo.blogspot.com/2011/06/teste.html

1- Passo selecione o codigo abaixo e aplique ele antes do fechamento da tag </head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/mamedes/jquery.magnifier.js">
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


As referências de código acima dois arquivos externos que você deve fazer o download abaixo (clique no botão direito e selecione "Salvar Como"):

2 º Passo: Em seguida, aplicar o efeito de permitir ampliar uma imagem basta inserir uma classe CSS de " magnify "no seu interior, por exemplo:

<img src="ocean.gif" class="magnify" style="width:200px; height:150px" />

<img src="forest.gif" class="magnify" border="0" />

Se sua imagem contém largura explícita atributos / altura, então o script irá ampliar a imagem em relação a essas dimensões. 
Normalmente, isso é o que você quer fazer encolhe uma imagem bastante grande na página e permitir que o usuário ampliá-la apenas sob demanda. Por outro lado, se sua imagem não contém atributos largura explícita / altura, em seguida, suas dimensões natural será utilizado como base da ampliação.
O poder de ampliação padrão, entre outras configurações um pouco, são definidas globalmente na parte superior da jquery.imageWarp.js , que você pode personalizar:

dsettings: {
magnifyby: 3 / / fator de aumento de padrão de imagem ampliada
Duração: 500, / duração / default da animação, em milisegundos
mgopacity: 0,2 / / opacidade da imagem original, quando a imagem ampliada coloca-
}
imagem original cursorcss: 'url (magnify.cur),-moz-zoom-in', / / para o CSS é 'cursor Value' atributo, adicionado a


"magnifyby" valor de 3 significa ampliação 3x, enquanto 1,5 vezes significa 1.5x etc Anote o valor em vermelho, o que costuma ser definida como a URL completa onde"magnify.cur" está localizado em seu servidor. O " url() "atributo CSS é suportado no IE e muda o cursor para uma lupa quando o cursor passa sobre as imagens com a classe CSS" magnify "nesse navegador.

Imagem disponível atributos

Você pode facilmente especificar uma ampliação diferentes e duração de animação para uma imagem específica que se desvia do padrão global, através da inserção de atributos especiais dentro da imagem. Ao lado da classe CSS pré-requisito de " magnify ", os seguintes atributos são suportados que lhe permitem personalizar o efeito para aquela imagem em particular:

"Ampliar" imagens atributos
HTML AtributoDescrição
class="magnify"necessáriaObrigatório. Dê todas as imagens que você deseja ter a capacidade de aumentar esse nome da classe CSS.
data-magnifyby="number"opcionalPermite definir o poder de ampliação para esta imagem em particular. O valor deve ser um número acima de 1, como 1,5 ou 3 etc Padrões para 3, se não definido.Exemplo:
<img src="ocean.gif" class="imagewarp" data-magnifyby="2.5" style="width:200px; height:150px" />
data-magnifyto="number"opcional. v1.1 atributoPermite definir a largura explícita em pixels da imagem deve expandir-se (a altura é redimensionado de acordo). Este atributo se sobrepõe definido " magnifyby "acima.Exemplo:
<img src="ocean.gif" class="imagewarp" data-magnifyto="900" style="width:200px; height:150px" />
data-magnifyduration="number"opcionalPermite definir a duração da animação para esta imagem em particular. Valor deve ser um número que denota milissegundos, como 500 para 1 / 2 segundo, 2.000 por 2 segundos etc Padrões para 500 se não definido.Exemplo:
<img src="forest.gif" class="imagewarp" data-magnifyby="4" data-magnifyduration="1000" />

Links que expandir um particular "ampliar" a imagem

Para a imagem que levam a classe CSS " magnify ", clicando sobre eles, obviamente, provoca o efeito multiplicador. No entanto, se isso não bastasse, você também pode adicionar links arbitrários na página que expandir um particular "ampliar" a imagem também. Tendo em conta o seguinte: " magnify imagem ":
<img id="sarah" src="girl.gif" class="imagewarp" data-magnifyby="5" style="width:200px; height:150px" />
O link seguinte arbitrária também ampliar a superior, quando o link for clicado:
<a href=#" rel="magnify[sarah]"> Zoom sobre Sarah </ a>
A sintaxe é simples rel="magnify[imageid]" , acrescentou dentro do link, onde ImageID é a identificação do " magnify "a imagem que você deseja associar a ligação com.Naturalmente, não se esqueça de dar o seu "ampliar" a imagem de um ID único e de primeira.
Está aqui um exemplo:

 Dinamicamente aplicar o efeito de ampliar uma imagem

Até agora tudo o que acima se refere à adição de ampliar o efeito de uma imagem estática na página, modificando a sua marcação. Você pode, entretanto, também aplicar o efeito de ampliar uma imagem dinâmica, ou reaplicar o efeito para a mesma imagem, como depois da imagem src foi alterado, por exemplo.
Para adicionar o efeito de aumentar a uma imagem na demanda, chamar o método imageMagnify(options) no desejado "imagens jQuery objeto wrapper, tais como:
jQuery ("# ​​myimage"). imageMagnify ({/ / aplicar o efeito de imagem com ID = "myimage"
magnifyby: 5
})
ou
jQuery ("mygallery div # img"). imageMagnify ({/ / aplicar o efeito de imagem com ID = "myimage"
magnifyto: 750,
magnifyduration: 1000 //<-- vírgula no final após última opção!
})
Se você não estiver familiarizado com a seleção de elementos usando jQuery, consulte seletores jQuery . Ao chamar imageMagnify(options) , as seguintes opções podem ser passadas para o método, com o mesmo objectivo como o seu atributos HTML colegas acima:
imageMagnify() "Opções de parâmetro
HTML AtributoDescrição
magnifyby: "number"Mesmo como contrapartida atributo acima.
magnifyto: "number"Mesmo como contrapartida atributo acima. Se as substituições definidas
magnifyby definição acima.
magnifyduration: "number"Mesmo como contrapartida atributo acima.
thumbdimensions: [width, height]Informa o script da imagem de "miniatura" dimensões antes que a imagem é ampliada.
Isso é necessário quando você está chamando imageMagnify() em uma imagem que
 não possui dimensões explícitas definidas (seja via CSS ou script) no momento da chamada imageMagnify() nele. Isso pode acontecer por imagens que são dinamicamente
adicionados à página ou apenas teve a sua src propriedade atualizada, na qual novas
 dimensões da imagem em miniatura pode ser diferente do velho um. Por exemplo:
MyImg var = document.createElement ("img")
myimg.src = "test.gif"
jQuery (MyImg). imageMagnify ({
magnifyby: 2,
humbdimensions: [150, 200] / / especificar as dimensões da imagem de pré
ampliação, como nesta imagem do ponto de não retornar alguma informação
dimensões
})
document.body.appendChild (MyImg)
Vamos ver um exemplo prático agora. Vamos dizer que você deseja aplicar o efeito de ampliar para uma imagem que pode ser alterado através de um menu drop-down. A cada mudança de imagem é necessário reaplicar o efeito de ampliar a imagem de novo, tanto como a sua src e as dimensões mudaram. Então chamamos imageMagnify()sobre a imagem cada vez que a imagem é alterada dentro do nosso código:
<form>
id="imageselect"> <select
<option> Selecione uma imagem e clique para ampliar </ option>
<option> Amsterdam 1 </ option>
<option> Amsterdam 2 </ option>
<option> Amsterdam 3 </ option>
<option> Amsterdam 4 </ option>
</ Select>
</ Form>


<img id="imagebox" src="amster1.jpg" class="magnify" data-magnifyby="2" style="width:200px" />


<script type="text/javascript">


Imagebox var = document.getElementById ("Imagebox")
imageselect var = document.getElementById ("imageselect")
imagelist var = ["amster1.jpg", "amster2.jpg", "amster3.jpg", "amster4.jpg"]


função imageselect.onchange = () {
if (this.selectedIndex! = 0) {
imagebox.src = [this.selectedIndex-1] imagelist
jQuery (Imagebox). imageMagnify ({ 
magnifyby: 2 
})

}
}


</ Script>

Marcadores: , ,

0 Comentários:

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial