Lupa para Ampliar Imagens com jQuery
JQZoom é uma lupa para ampliar imagens inline construído na plataforma muito popular – jQuery. É um script muito bom e fácil de implementar, para que se possa ampliar tudo o que quisermos.
Características Principais:
Simples - Fácil de usar.
Compatibilidade - Com outros scripts e plataformas.
Flexível - Máximo controlo sobre as opções disponíveis.
Estilo - Fácil de personalizar.
Bonito - Agradável de se ver.
Trabalha com todos os browsers modernos.
Instalação:
Para proceder à instalação deste script, necessita de carregar todos os ficheiros e directórios do pack jQzoom para o seu servidor. O pack actual inclui o JS, CSS & directórios de IMAGENS.
Nota: Se você decidir renomear os directórios ou alterar a estrutura do directório, dê uma vista de olhos nos caminhos das imagens dentro do CSS e lembre-se de especificar os caminhos correctos dos ficheiros na página que os vai chamar.
Adicione primeiro o último release da livraria jQuery, depois o script jQZoom (não se esqueça disto), a ordem correcta destes passos é importante.
Para usar o jQZoom é muito simples. Necessita de especificar o elemento âncora HTML que irá gerar a ampliação, revelando a porção da imagem aumentada.
O elemento âncora molda a pequena imagem que pretende ampliar.
Seguindo este esquema, os elementos base necessários são:
SMALLIMAGE.JPG: Representa a pequena imagem que você pretende ampliar.
BIGIMAGE.JPG: Representa a imagem grande que jQZoom irá revelar.
MYCLASS: Representa a classe âncora, que irá ser usada para instanciar o script jQZoom a todos os elementos, correspondendo a esta classe (você pode usar também um ID).
MYTITLE/IMAGE TITLE: Título da âncora e/ou título da imagem que irá ser usada para revelar o título do zoom perto da janela jQZoom.
Chame o plugin junto à janela de carregamento.
1 2 3 | $(document).ready(function(){ $('.MYCLASS).jqzoom(); }); |
Isto irá instanciar o jQZoom no modo default.
Você pode passar mais opções (veja aqui a documentação), para criar outros efeitos especiais personalizados.
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function(){ var options = { zoomWidth: 300, zoomHeight: 250, xOffset: 10, yOffset: 0, position: "right" //and MORE OPTIONS }; $('.MYCLASS).jqzoom(options); }); |
Para mais informações visite o website do developer Marco Renzi.
Se for o seu caso em que vai utilizar a aplicação, considere doar para este projecto. Desta forma obterá o suporte extra para o plugin, como contribuirá para o crescimento do mesmo.
Requisitos: Plataforma jQuery
Demonstração: http://www.mind-projects.it/projects/jqzoom/
Download: jqzoom_ev1.0.1
Licença: GPL
s3Slider é um plugin jQuery para slideshow de imagens inspirado no Smooth Slideshow. O slideshow é realizado apartir de listas não ordenadas, sendo extramente simples de implementar num website. A informação sobre as imagens dentro do slideshow pode ser exibida quase em qualquer parte da imagem tal como o script pode ser estilizado totalmente via CSS. [...]
jQuery.popeye é um plugin que serve para transformar uma lista não ordenada de imagens numa simples galeria que aumenta a imagem quando este for primida, num estilo Lightbox. As imagens são exibidas numa caixa com controlos ‘próximo’ e ‘anterior’. Bem como a informação sobre a imagem pode ser também mencionada. A caixa compacta tem dimensões que são [...]
Componentes
Realidade Aumentada Open Source: EZFlar: "Realidade Aumentada (RA) é um termo para exibição ao vivo, directo ou indirecto de um ambiente do mundo físico real cujos ele..." 
Lupa para Ampliar Imagens com jQuery: "JQZoom é uma lupa para ampliar imagens inline construído na plataforma muito popular - jQuery. É um script muito bom e fácil ..." 
jQuery Captify Plugin v1.1.1: "Captify é um plugin jQuery escrito por Brian Reavis para mostrar legendas de uma forma muito bonita, quando se passa o rato s..." 
Aplicação em Ajax para Lista de Tarefas: "myTinyTodo é uma aplicação gratuita que permite inserir e gerir tarefas de forma muito simples e intuitiva. A aplicação é con..." 
Boletim Metereológico com UNIQLO Calendar Blog Parts: "UNIQLO acabou de lançar o Calendar Blog Parts, o qual mostra um lindo calendário em Flash com o boletim meterológico. Você po..." Design
Avatares, Caricaturas e Cartoons Online Gratuitos: "São imensas as aplicações online gratuitas que actualmente permitem gerar automaticamente o desenho de avatares e caricaturas..." 
10 Templates de Websites em Photoshop: "Existem pessoas por toda a internet que estão dispostos a oferecer o seu trabalho com fins de promoção ou simplesmente porque..." 
31 Templates Gratuitos para Design em PSD: "Recentemente encontrei esta colecção maravilhosa de recursos que irão certamente ajudar-lhe a poupar imenso tempo. Porquê cri..." 
13 Templates Gratuitos para Design em PSD: "Hoje voltei ao famoso website Deviantart. Aqui encontramos imensos artistas talentosos que disponibilizam gratuitamente recur..." 
Ícones Gratuitos para Designers e Web Developers: "Apesar de todos estes ícones serem gratuitos, você fica desde já encorajado de doar ao autor caso ele ofereca essa opção. Se ..." Extras
Tabela de Acentuação e Caracteres Especiais em HTML: "Para que possa escrever letras com acentos e caracteres especiais característicos do alfabeto latino, você precisa de aplicar..." 
GoingUp! combina Web Analytics com ferramentas SEO: "GoingUp! é uma ferramenta SEO de topo, que combina análise web numa interface AJAX. Você pode obter análises completas do web..." 
Plataforma de Loops e Efeitos Sonoros Gratuitos: "Soundsnap é uma plataforma simpática para encontrar e partilhar loops e efeitos sonoros gratuitos - legalmente. É uma colecçã..." 
Sistema de Grelha 960 para Desenvolvimento Web: "O Sistema de Grelha 960 é uma medida para simplificar o fluxo de trabalho no desenvolvimento web, pela disponibilização das d..." 
Sitepoint está a oferecer o livro: A Arte & Ciência do CSS: "Sitepoint está a oferecer um PDF gratuito do seu novo livro, A Arte & Ciência do CSS por Cameron Adams, Jina Bolton, Davi..." Tutorial
Série de Tutoriais Google Earth - Dia 1 : "Google Earth é uma aplicação que já todos conhecemos. Oferece-nos mapas 3D e imagens de satélite para regiões específicas med..." 
16 Vídeos Tutoriais para Aprender PHP: "Continuando com os vídeos tutoriais da Themeforest, esta série mostra-lhe como começar a programar em PHP. Tal como os vídeos..."
Série de Tutoriais Google Earth - Dia 2: "Neste segundo dia vamos criar a nossa primeira interface Google Earth em português, recorrendo a linguagens de marcação. Depo..." 
Tutorial: Agregar RSS Feeds com PHP e SimplePie: "Por vezes a parte mais simples do RSS fica esquecida. Se quisermos agregar informação de vários RSS Feeds e exibir no nosso s..." 
7 Plugins Wordpress e Dicas para Blog de Sucesso: "Se é blogger e usa a plataforma Wordpress, então estes plugins são para si. Eles estão listados por ordem de instalação para ..."
Ola, em primeiro muito obrigado pelos seus script, sao um espectaculo.
Se eu quiser usar este script para uma pagina so de html, sera que posso?
Como posso integrar a chamada do plugin:
"$(document).ready(function(){$('.MYCLASS).jqzoom();
});"
no html? Assim como o codigo a seguir?
Se poderem dar uma ajuda ficava muito agradecido
muito obrigado
Olá Rui! Obrigado pelas palavras.
Já experimentaste descarregar o pack jqzoom_ev1.0.1.zip?
Dá sim para integrar numa página html. Vê o exemplo que vem com o plugin.
Cumprimentos
obrigado, ja vi que traz um ficheiro html no pacote e ja consegui resolver.
Olá, gostei muito das dicas que encontrei aqui, vc está de parabéns!!
Só tenho uma dúvida na cabeça, será que eu conseguiria integrar este pacote JqZoom numa linguagem php tipo: Já possuo um site de imagens dinâmicas com php mas gostaria de integrar esta função Jquery no meu site para tornar a apresentação mais profissional e atraente para os visitantes….Aguardo sua sugestão e ajuda!!!! Abraços….
Ainda bem Rui! Abraço
Rodrigo, tens de encontrar a imagem/âncora no código HTML onde queres que apareça a lupa para ampliar e na âncora chamas a classe “myclass”. A âncora aponta para a imagem grande, e tag “img” contem a pequena.
Exemplo:
Bom Dia, adorei suas explicações, já baixei o pacote, fiz passo a passo conforme o site, mas ele não faz o efeito zoom ele criou tipo um link, que quando clico na image pequena ele abre a imagem grande, não entendo muito de java script, não sei o que seria o elemento âncora?????se vocêw puder m,e ajudar ficarei muito agradecida…
Oi Patrícia, o elemento âncora é um simples link.
Para o exemplo é dado este:
Isto é um link ou âncora:
O
aponta para o URL que o utilizador vai entrar após clicar no link.
A
é a classe que irá despoletar a função javascript que contem este tutorial. O
é o titulo do link, o qual é exibido quando o utilizador passa o rato sobre o link.
Neste exemplo:
Significa que o link aponta para uma imagem “BIGIMAGE.jpg”, a classe do link é “MYCLASS” e o título “MYTITLE”.
A tag
indica onde está a imagem pequena em relação ao documento actual (src=”"). Neste caso está dentro de uma pasta chamada “/images”. Terá de colocar nesta pasta, a imagem pequena, e a imagem grande.
Qualquer dúvida exponha.
Oi Pedro, muito obrigada pela resposta imediata, mas ainda não consegui fazer, estou tentando, qualquer dúvida entro em contato, acho muito legal pessoas como vc, que compartilham seus conhecimentos.
Veleu mesmo
Oi Acho que só vc pode me ajudar!
tenho um hospedagem no yola e ela não aceita esses oplugns! Mas códigos tipo html aceita normalmente, eu trabalho com imagens e uma galeria me faz muita falta!
Se poder me ajudar entra no meu site e veja o que podemos fazer! Ah aproveita e escolhe algo para vc! abç!
Oi Nil :)
Eu julgo que não consegues colocar grandes galerias de imagens nesse tipo de hospedagem, pois têm muitas limitações, e esta é apenas uma delas – não deixar inserir javascript. Recorde-se que o javascript é usado em quase todas as galerias de imagens.
Provavelmente só conseguirás galerias deste género:
http://www.webreference.com/programming/css_gallery/examples/gallery.htm
Só usa HTML e CSS…
Dispõe!
Oláaaaa Pedro!
Primeiro quero te parabenizar pelo seu site e sua atenção com seus visitantes!
Valeu à pena a quilometragem que andei na web prá te achar….rs rs rs
Meu anjo, abrir um espaço de meu trabalho porém para mostrar detalhes de alguns trajes preciso de um codigo creio o java Script para HTML . Não sou muito boa em códigos javas mas creio que com sua preciosa ajuda eu consigo.
Aguardo respostas….
Um abraçãooooo!
Oi Gina! Obrigado pela palavras de conforto :) Que ajuda precisa mesmo? Cumprs.