Com cria uma galeria de foto com jquery

dinfoweb · Janeiro 11, 2012

Ola e todos eu estou a procura de um album de foto que tem categorias de imagens exemplo (carro azul ->exibir mais carros azul (Carro vermelho -> exibir mais carro vermelho)o menu inicialmente seria carro azul e carro vermelho assim que eu clika nem uma das imagens do azul ou do vermelho ai abre outras fotos conforme a foto anterior q cliquei

Ted k' · Janeiro 11, 2012

Esse filtro precisa estar dentro da animação, não pode ser uma página antes ou um ajax para chamar o relacionada a cada?

dinfoweb · Janeiro 11, 2012

sim pode

William Bruno · Janeiro 11, 2012

é possível fazer isso, com absolutamente todos os plugins de modais existentes.

Qual a dúvida ?

dinfoweb · Janeiro 11, 2012

eu gostaria de um modelo ja pronto pq da maneira q estou fazedo nao esta fucinado normal

William Bruno · Janeiro 11, 2012

Desculpe, mas não tenho nenhum modelo.

Aqui no fórum ajudamos com dúvidas. Apresente oque você tem, que tentaremos lhe guiar.

dinfoweb · Janeiro 11, 2012

ele ate fuciona normal na primeira fes q carrego a pagina ai depois eu mundo para outra foto ai ja era o script nao fuciona mais

Pagina protudos.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Conjunto de Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="title" content="Sonho de Luz - Meu Soninho, um Companheiro pra Brincar e Dormir" />
<meta name="url" content="http://www.meusoninho.com.br/" />
<meta name="description" content="Sonho de Luz - Meu Soninho, um Companheiro pra Brincar e Dormir" />
<meta name="keywords" content="meu soninho sonho de luz brinquedos educativos criança bebê" />
<meta name="charset" content="ISO-8859-1" />
<meta name="autor" content="Target Publicidade" />
<meta name="company" content="Sonho de Luz" />
<meta name="revisit-after" content="15" />
<link rev="made" href="mailto:web@meusoninho.com.br" />
<meta http-equiv="expires" content="Never" />
<meta http-equiv="content-language" content="pt-BR" />
<meta http-equiv="vw96.object type" content="Index" />
<meta name="revisit-after" content="1 days" />
<meta name="owner" content="web@meusoninho.com.br" />

<!-- Título da Página -->
<title>Meu Soninho - O Produto</title>

<!-- Link da Folha de Estilos -->
<link href="estilo.css" rel="stylesheet" type="text/css" />

<!-- Link do Fav Icon -->
<link rel="icon" href="midias/favicon.png" type="image/x-icon" />

   <!-- Acompanhamento Google Analytics -->
<script type="text/javascript"> 
var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-23604913-1']);  _gaq.push(['_trackPageview']);
(function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })(); </script>

   <!-- jqZoom -->
   <script src="livraria/jqzoom/jquery-1.6.js" type="text/javascript"></script>
<script src="livraria/jqzoom/jquery.jqzoom-core.js" type="text/javascript"></script>
   <link rel="stylesheet" href="livraria/jqzoom/jquery.jqzoom.css" type="text/css" />
   <script type="text/javascript">
var $a = jQuery.noConflict();
	$a(document).ready(function() {

	$a("#mostra").load("pato.php");
	$a("a[name=link]").live("click", function(e) {
		if (e.which == 2 || e.which == 3){
   		return false;
		}else{
   		//COLOCAR EM UMA VARIAVEL
  			 var href = $a(this).attr("href");

   		//PEGA O LINK E CHAMA O ARQUIVO DENTRO NA DIV CONTEUDO
   		 $a("#mostra").load(href, function(){
   $a('.jqzoom').jqzoom({ zoomType: 'standard', lens:true,
   preloadImages: false, alwaysOn:false  });
});
		}
	//Prevent default serve PARA BLOQUEAR A AO DO LINK
  		e.preventDefault();
   	});


});
</script>
</head>

<body>

<div id="cabecario">
<div id="topo"><img src="midias/Logo.png" alt="Sonho de Luz - Meu Soninho" width="150" height="154" />    
	 <div id="menu-duvidas">

  		 <a href="duvidas"><img src="midias/nuvem1.png" alt="Dúvidas" width="130" height="53" class="imagens" /></a>    
        </div>


<div id="menu">
	<a href="home.php"><img src="midias/botao-home.png" width="116" height="35" class="imagens" alt="Meu Soninho - Home" title="Meu Soninho - Home" /></a>
       <a href="empresa.php"><img src="midias/botao-empresa.png" width="107" height="35" class="imagens" alt="Meu Soninho - Empresa" title="Meu Soninho - Empresa" /></a>
       <a href="produto.php"><img src="midias/botao-produto.png" width="109" height="35" class="imagens" alt="Meu Soninho - Produto" title="Meu Soninho - Produto" /></a>
       <a href="lojista.php"><img src="midias/botao-lojista.png" width="109" height="35" class="imagens" alt="Meu Soninho - Lojista" title="Meu Soninho - Lojista" /></a>
       <a href="contato.php"><img src="midias/botao-contato.png" width="115" height="35" class="imagens" alt="Meu Soninho - Contato" title="Meu Soninho - Contato" /></a>
</div>
</div>


</div>

<div id="barra_menu">
<div id="fecha_menu">    
   	<div id="menu_esquerda"></div>       
	<div style="float:right;">
       		<div id="menu_meio">

               <img src="midias/estrelinha.png" class="imagens" alt="Meu Soninho" />
               Um Companheiro para Brincar e Dormir.
               <img src="midias/estrelinha.png" class="imagens" alt="Meu Soninho" />

               </div>
       		<div id="menu_direita">	                
                   <a href="http://www.twitter.com/meusoninho" target="_blank" >
               	<img src="midias/icon-twitter.png" class="imagens" alt="Twitter Meu Soninho" /></a>

                   <a href="http://www.facebook.com/pages/Meu-Soninho/206578816044295" target="_blank" >
               	<img src="midias/icon-facebook.png" class="imagens" alt="Facebook Meu Soninho" /></a>

                   <a href="http://www.twitter.com/meusoninho" target="_blank" >
               	<img src="midias/icon-orkut.png" class="imagens" alt="Twitter Meu Soninho" /></a>

                   <a href="http://www.twitter.com/meusoninho" target="_blank" >
               	<img src="midias/icon-wordpress.png" class="imagens" alt="Twitter Meu Soninho" /></a>
</div></div></div></div>


<div id="quadro">

<div id="produto">
<div id="informacoes">
   	<div id="miniaturas">

       <ul id="fotos_bichos" class="clearfix">

           <li>            
<a href="pato.php" name="link">
     <img src="midias/produtos/pequeno/pato.png" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a></li>


           <li>

   <img src="midias/produtos/pequeno/leao.png" alt="Meu Soninho - Leão" width="60" height="79" title="Leão" /></li>

           <li>

     <img src="midias/produtos/pequeno/girafa.png" alt="Meu Soninho - Girafa" width="60" height="79" title="Girafa" /></li>

           <li>
           <a href="elefante.php" name="link">
           <img src="midias/produtos/pequeno/elefante.png" alt="Meu Soninho - Elefante" width="60" height="79" title="Elefante" /></a></li>



           <li>
           <a href="coelho.php" name="link">
           <img src="midias/produtos/pequeno/coelho.png" alt="Meu Soninho - Coelho" width="60" height="79" title="Coelho" /></a></li>

       </ul><br /><br />

            <div id="mostra"></div>
       </div>


   <div id="preco">
       <div id="fotos_maiores">

       <a href="midias/produtos/grande/pato-5.png" class="jqzoom" rel='gal1'  title="Meu Soninho" >
       <img src="midias/produtos/medio/pato-5.png" alt="Meu Soninho" /></a>



       </div>

   </div>

   </div>

<div id="descricao">
<div id="titulo_soninho">Meu Soninho</div>
<div id="texto_produto">
 <div>
   <p>Produto Importado<br />
Patenteado por Sonho de Luz<br />
<strong>Idade</strong>: De 0 à 5 anos<br />
<strong>Peso</strong>:  120 grs<br />
<strong>Tamanho</strong>: 0.45x0.45  </p>
 </div>
</div>
</div></div>

</div></div>

<div id="rodape">
<h5>

Meu Soninho © 2011. Todos os direitos reservados.<br /></h5>
<div id="by">
<a href="http://www.targetvisual.com.br" target="_blank">Criado por:<br /><img src="midias/target.png" alt="Criado por Target Visual" width="55" height="16" vspace="5" align="middle" class="imagens" /></a></div>


</div>
</body>
</html>

pagina pato.php

<a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-5.png',largeimage: 'midias/produtos/grande/pato-5.png'}">
     <img src="midias/produtos/pequeno/pato-5.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

     <a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-1.png',largeimage: 'midias/produtos/grande/pato-1.png'}">
     <img src="midias/produtos/pequeno/pato-1.png" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

      <a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-2.png',largeimage: 'midias/produtos/grande/pato-2.png'}">
     <img src="midias/produtos/pequeno/pato-2.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

      <a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-3.png',largeimage: 'midias/produtos/grande/pato-3.png'}">
     <img src="midias/produtos/pequeno/pato-3.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

      <a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-4.png',largeimage: 'midias/produtos/grande/pato-4.png'}">
     <img src="midias/produtos/pequeno/pato-4.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a><br />

William Bruno · Janeiro 11, 2012

você já criou um tópico sobre esse assunto:

http://forum.imasters.com.br/topic/453891-erro-com-jquery-perdendo-os-valores/

Floodar vai contra as regras de uso do fórum:

http://forum.imasters.com.br/index.php?app=core&module=help

Tranquei o seu outro tópico.

@topic, debugue o seu código:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

dinfoweb · Janeiro 11, 2012

Desculpa, por coloca dinovo a mesma duvida so q e o seguinte estou tando este debuger mais nao consigo acha o erro

sera q o problema esta aqui na pagina jquery.jqzoom-core.js

/*!
* jQzoom Evolution Library v2.3  - Javascript Image magnifier
* http://www.mind-projects.it
*
* Copyright 2011, Engineer Marco Renzi
* Licensed under the BSD license.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*     * Redistributions of source code must retain the above copyright
*       notice, this list of conditions and the following disclaimer.
*     * Redistributions in binary form must reproduce the above copyright
*       notice, this list of conditions and the following disclaimer in the
*       documentation and/or other materials provided with the distribution.
*     * Neither the name of the organization nor the
*       names of its contributors may be used to endorse or promote products
*       derived from this software without specific prior written permission.
*
* Date: 03 May 2011 22:16:00
*/
(function ($) {
   //GLOBAL VARIABLES
   var isIE6 = ($.browser.msie && $.browser.version < 7);
   var body = $(document.body);
   var window = $(window);
   var jqzoompluging_disabled = false; //disabilita globalmente il plugin
   $.fn.jqzoom = function (options) {
       return this.each(function () {
           var node = this.nodeName.toLowerCase();
           if (node == 'a') {
               new jqzoom(this, options);
           }
       });
   };
   jqzoom = function (el, options) {
       var api = null;
       api = $(el).data("jqzoom");
       if (api) return api;
       var obj = this;
       var settings = $.extend({}, $.jqzoom.defaults, options || {});
       obj.el = el;
       el.rel = $(el).attr('rel');
       //ANCHOR ELEMENT
       el.zoom_active = false;
       el.zoom_disabled = false; //to disable single zoom instance
       el.largeimageloading = false; //tell us if large image is loading
       el.largeimageloaded = false; //tell us if large image is loaded
       el.scale = {};
       el.timer = null;
       el.mousepos = {};
       el.mouseDown = false;
       $(el).css({
           'outline-style': 'none',
           'text-decoration': 'none'
       });
       //BASE IMAGE
       var img = $("img:eq(0)", el);
       el.title = $(el).attr('title');
       el.imagetitle = img.attr('title');
       var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle;
       var smallimage = new Smallimage(img);
       var lens = new Lens();
       var stage = new Stage();
       var largeimage = new Largeimage();
       var loader = new Loader();
       //preventing default click,allowing the onclick event [exmple: lightbox]
       $(el).bind('click', function (e) {
           e.preventDefault();
           return false;
       });
       //setting the default zoomType if not in settings
       var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse'];
       if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) {
           settings.zoomType = 'standard';
       }
       $.extend(obj, {
           create: function () { //create the main objects
               //create ZoomPad
               if ($(".zoomPad", el).length == 0) {
                   el.zoomPad = $('<div/>').addClass('zoomPad');
                   img.wrap(el.zoomPad);
               }
               if(settings.zoomType == 'innerzoom'){
                   settings.zoomWidth  = smallimage.w;
                   settings.zoomHeight  =   smallimage.h;
               }
               //creating ZoomPup
               if ($(".zoomPup", el).length == 0) {
                   lens.append();
               }
               //creating zoomWindow
               if ($(".zoomWindow", el).length == 0) {
                   stage.append();
               }
               //creating Preload
               if ($(".zoomPreload", el).length == 0) {
                   loader.append();
               }
               //preloading images
               if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) {
                   obj.load();
               }
               obj.init();
           },
           init: function () {
               //drag option
               if (settings.zoomType == 'drag') {
                   $(".zoomPad", el).mousedown(function () {
                       el.mouseDown = true;
                   });
                   $(".zoomPad", el).mouseup(function () {
                       el.mouseDown = false;
                   });
                   document.body.ondragstart = function () {
                       return false;
                   };
                   $(".zoomPad", el).css({
                       cursor: 'default'
                   });
                   $(".zoomPup", el).css({
                       cursor: 'move'
                   });
               }
               if (settings.zoomType == 'innerzoom') {
                   $(".zoomWrapper", el).css({
                       cursor: 'crosshair'
                   });
               }
               $(".zoomPad", el).bind('mouseenter mouseover', function (event) {
                   img.attr('title', '');
                   $(el).attr('title', '');
                   el.zoom_active = true;
                   //if loaded then activate else load large image
                   smallimage.fetchdata();
                   if (el.largeimageloaded) {
                       obj.activate(event);
                   } else {
                       obj.load();
                   }
               });
               $(".zoomPad", el).bind('mouseleave', function (event) {
                   obj.deactivate();
               });
               $(".zoomPad", el).bind('mousemove', function (e) {

                   //prevent fast mouse mevements not to fire the mouseout event
                   if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.B) {
                       lens.setcenter();
                       return false;
                   }
                   el.zoom_active = true;
                   if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) {
                       obj.activate(e);
                   }
                   if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) {
                       lens.setposition(e);
                   }
               });
               var thumb_preload = new Array();
               var i = 0;
               //binding click event on thumbnails
               var thumblist = new Array();
               thumblist = $('a').filter(function () {
                   var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i");
                   var rel = $(this).attr('rel');
                   if (regex.test(rel)) {
                       return this;
                   }
               });
               if (thumblist.length > 0) {
                   //getting the first to the last
                   var first = thumblist.splice(0, 1);
                   thumblist.push(first);
               }
               thumblist.each(function () {
                   //preloading thumbs
                   if (settings.preloadImages) {
                       var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")"));
                       thumb_preload[i] = new Image();
                       thumb_preload[i].src = thumb_options.largeimage;
                       i++;
                   }
                   $(this).click(function (e) {
                       if($(this).hasClass('zoomThumbActive')){
                         return false;
                       }
                       thumblist.each(function () {
                           $(this).removeClass('zoomThumbActive');
                       });
                       e.preventDefault();
                       obj.swapimage(this);
                       return false;
                   });
               });
           },
           load: function () {
               if (el.largeimageloaded == false && el.largeimageloading == false) {
                   var url = $(el).attr('href');
                   el.largeimageloading = true;
                   largeimage.loadimage(url);
               }
           },
           activate: function (e) {
               clearTimeout(el.timer);
               //show lens and zoomWindow
               lens.show();
               stage.show();
           },
           deactivate: function (e) {
               switch (settings.zoomType) {
               case 'drag':
                   //nothing or lens.setcenter();
                   break;
               default:
                   img.attr('title', el.imagetitle);
                   $(el).attr('title', el.title);
                   if (settings.alwaysOn) {
                       lens.setcenter();
                   } else {
                       stage.hide();
                       lens.hide();
                   }
                   break;
               }
               el.zoom_active = false;
           },
           swapimage: function (link) {
               el.largeimageloading = false;
               el.largeimageloaded = false;
               var options = new Object();
               options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")"));
               if (options.smallimage && options.largeimage) {
                   var smallimage = options.smallimage;
                   var largeimage = options.largeimage;
                   $(link).addClass('zoomThumbActive');
                   $(el).attr('href', largeimage);
                   img.attr('src', smallimage);
                   lens.hide();
                   stage.hide();
                   obj.load();
               } else {
                   alert('ERROR :: Missing parameter for largeimage or smallimage.');
                   throw 'ERROR :: Missing parameter for largeimage or smallimage.';
               }
               return false;
           }
       });
       //sometimes image is already loaded and onload will not fire
       if (img[0].complete) {
           //fetching data from sallimage if was previously loaded
           smallimage.fetchdata();
           if ($(".zoomPad", el).length == 0) obj.create();
       }
/*========================================================,
|   Smallimage
|---------------------------------------------------------:
|   Base image into the anchor element
`========================================================*/

       function Smallimage(image) {
           var $obj = this;
           this.node = image[0];
           this.findborder = function () {
               var bordertop = 0;
               bordertop = image.css('border-top-width');
               btop = '';
               var borderleft = 0;
               borderleft = image.css('border-left-width');
               bleft = '';
               if (bordertop) {
                   for (i = 0; i < 3; i++) {
                       var x = [];
                       x = bordertop.substr(i, 1);
                       if (isNaN(x) == false) {
                           btop = btop + '' + bordertop.substr(i, 1);
                       } else {
                           break;
                       }
                   }
               }
               if (borderleft) {
                   for (i = 0; i < 3; i++) {
                       if (!isNaN(borderleft.substr(i, 1))) {
                           bleft = bleft + borderleft.substr(i, 1)
                       } else {
                           break;
                       }
                   }
               }
               $obj.btop = (btop.length > 0) ? eval(btop) : 0;
               $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0;
           };
           this.fetchdata = function () {
               $obj.findborder();
               $obj.w = image.width();
               $obj.h = image.height();
               $obj.ow = image.outerWidth();
               $obj.oh = image.outerHeight();
               $obj.pos = image.offset();
               $obj.pos.l = image.offset().left + $obj.bleft;
               $obj.pos.t = image.offset().top + $obj.btop;
               $obj.pos.r = $obj.w + $obj.pos.l;
               $obj.pos.b = $obj.h + $obj.pos.t;
               $obj.rightlimit = image.offset().left + $obj.ow;
               $obj.bottomlimit = image.offset().top + $obj.oh;

           };
           this.node.onerror = function () {
               alert('Problems while loading image.');
               throw 'Problems while loading image.';
           };
           this.node.onload = function () {
               $obj.fetchdata();
               if ($(".zoomPad", el).length == 0) obj.create();
           };
           return $obj;
       };
/*========================================================,
|  Loader
|---------------------------------------------------------:
|  Show that the large image is loading
`========================================================*/

       function Loader() {
           var $obj = this;
           this.append = function () {
               this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText);
               $('.zoomPad', el).append(this.node);
           };
           this.show = function () {
               this.node.top = (smallimage.oh - this.node.height()) / 2;
               this.node.left = (smallimage.ow - this.node.width()) / 2;
               //setting position
               this.node.css({
                   top: this.node.top,
                   left: this.node.left,
                   position: 'absolute',
                   visibility: 'visible'
               });
           };
           this.hide = function () {
               this.node.css('visibility', 'hidden');
           };
           return this;
       }
/*========================================================,
|   Lens
|---------------------------------------------------------:
|   Lens over the image
`========================================================*/

       function Lens() {
           var $obj = this;
           this.node = $('<div/>').addClass('zoomPup');
           //this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
           this.append = function () {
               $('.zoomPad', el).append($(this.node).hide());
               if (settings.zoomType == 'reverse') {
                   this.image = new Image();
                   this.image.src = smallimage.node.src; // fires off async
                   $(this.node).empty().append(this.image);
               }
           };
           this.setdimensions = function () {
               this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x)); 
               this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y)); 
               this.node.top = (smallimage.oh - this.node.h - 2) / 2;
               this.node.left = (smallimage.ow - this.node.w - 2) / 2;
               //centering lens
               this.node.css({
                   top: 0,
                   left: 0,
                   width: this.node.w + 'px',
                   height: this.node.h + 'px',
                   position: 'absolute',
                   display: 'none',
                   borderWidth: 1 + 'px'
               });



               if (settings.zoomType == 'reverse') {
                   this.image.src = smallimage.node.src;
                   $(this.node).css({
                       'opacity': 1
                   });

                   $(this.image).css({
                       position: 'absolute',
                       display: 'block',
                       left: -(this.node.left + 1 - smallimage.bleft) + 'px',
                       top: -(this.node.top + 1 - smallimage.btop) + 'px'
                   });

               }
           };
           this.setcenter = function () {
               //calculating center position
               this.node.top = (smallimage.oh - this.node.h - 2) / 2;
               this.node.left = (smallimage.ow - this.node.w - 2) / 2;
               //centering lens
               this.node.css({
                   top: this.node.top,
                   left: this.node.left
               });
               if (settings.zoomType == 'reverse') {
                   $(this.image).css({
                       position: 'absolute',
                       display: 'block',
                       left: -(this.node.left + 1 - smallimage.bleft) + 'px',
                       top: -(this.node.top + 1 - smallimage.btop) + 'px'
                   });

               }
               //centering large image
               largeimage.setposition();
           };
           this.setposition = function (e) {
               el.mousepos.x = e.pageX;
               el.mousepos.y = e.pageY;
               var lensleft = 0;
               var lenstop = 0;

               function overleft(lens) {
                   return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l; 
               }

               function overright(lens) {
                   return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r; 

               }

               function overtop(lens) {
                   return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t; 
               }

               function overbottom(lens) {
                   return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b; 
               }

               lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2;
               lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2;
               if (overleft(this.node)) {
                   lensleft = smallimage.bleft - 1;
               } else if (overright(this.node)) {
                   lensleft = smallimage.w + smallimage.bleft - this.node.w - 1;
               }
               if (overtop(this.node)) {
                   lenstop = smallimage.btop - 1;
               } else if (overbottom(this.node)) {
                   lenstop = smallimage.h + smallimage.btop - this.node.h - 1;
               }

               this.node.left = lensleft;
               this.node.top = lenstop;
               this.node.css({
                   'left': lensleft + 'px',
                   'top': lenstop + 'px'
               });
               if (settings.zoomType == 'reverse') {
                   if ($.browser.msie && $.browser.version > 7) {
                       $(this.node).empty().append(this.image);
                   }

                   $(this.image).css({
                       position: 'absolute',
                       display: 'block',
                       left: -(this.node.left + 1 - smallimage.bleft) + 'px',
                       top: -(this.node.top + 1 - smallimage.btop) + 'px'
                   });
               }

               largeimage.setposition();
           };
           this.hide = function () {
               img.css({
                   'opacity': 1
               });
               this.node.hide();
           };
           this.show = function () {  

               if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) {
                   this.node.show();
               }       

               if (settings.zoomType == 'reverse') {
                   img.css({
                       'opacity': settings.imageOpacity
                   });
               }
           };
           this.getoffset = function () {
               var o = {};
               o.left = $obj.node.left;
               o.top = $obj.node.top;
               return o;
           };
           return this;
       };
/*========================================================,
|   Stage
|---------------------------------------------------------:
|   Window area that contains the large image
`========================================================*/

       function Stage() {
           var $obj = this;
           this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
           this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
           this.setposition = function () {
               this.node.leftpos = 0;
               this.node.toppos = 0;
               if (settings.zoomType != 'innerzoom') {
                   //positioning
                   switch (settings.position) {
                   case "left":
                       this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset));
                       this.node.toppos = Math.abs(settings.yOffset);
                       break;
                   case "top":
                       this.node.leftpos = Math.abs(settings.xOffset);
                       this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset));
                       break;
                   case "bottom":
                       this.node.leftpos = Math.abs(settings.xOffset);
                       this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset));
                       break;
                   default:
                       this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
                       this.node.toppos = Math.abs(settings.yOffset);
                       break;
                   }
               }
               this.node.css({
                   'left': this.node.leftpos + 'px',
                   'top': this.node.toppos + 'px'
               });
               return this;
           };
           this.append = function () {
               $('.zoomPad', el).append(this.node);
               this.node.css({
                   position: 'absolute',
                   display: 'none',
                   zIndex: 5001
               });
               if (settings.zoomType == 'innerzoom') {
                   this.node.css({
                       cursor: 'default'
                   });
                   var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
                   $('.zoomWrapper', this.node).css({
                       borderWidth: thickness + 'px'
                   });    
               }

                 $('.zoomWrapper', this.node).css({
                     width: Math.round(settings.zoomWidth) + 'px' ,
                     borderWidth: thickness + 'px'
                 });

                 $('.zoomWrapperImage', this.node).css({
                     width: '100%',
                     height: Math.round(settings.zoomHeight) + 'px'
                 });
                 //zoom title
                $('.zoomWrapperTitle', this.node).css({
                       width: '100%',
                       position: 'absolute'
                 });  

               $('.zoomWrapperTitle', this.node).hide();
               if (settings.title && zoomtitle.length > 0) {
                   $('.zoomWrapperTitle', this.node).html(zoomtitle).show();
               }
               $obj.setposition();
           };
           this.hide = function () {
               switch (settings.hideEffect) {
               case 'fadeout':
                   this.node.fadeOut(settings.fadeoutSpeed, function () {});
                   break;
               default:
                   this.node.hide();
                   break;
               }
               this.ieframe.hide();
           };
           this.show = function () {
               switch (settings.showEffect) {
               case 'fadein':
                   this.node.fadeIn();
                   this.node.fadeIn(settings.fadeinSpeed, function () {});
                   break;
               default:
                   this.node.show();
                   break;
               }
               if (isIE6 && settings.zoomType != 'innerzoom') {
                   this.ieframe.width = this.node.width();
                   this.ieframe.height = this.node.height();
                   this.ieframe.left = this.node.leftpos;
                   this.ieframe.top = this.node.toppos;
                   this.ieframe.css({
                       display: 'block',
                       position: "absolute",
                       left: this.ieframe.left,
                       top: this.ieframe.top,
                       zIndex: 99,
                       width: this.ieframe.width + 'px',
                       height: this.ieframe.height + 'px'
                   });
                   $('.zoomPad', el).append(this.ieframe);
                   this.ieframe.show();
               };
           };
       };
/*========================================================,
|   LargeImage
|---------------------------------------------------------:
|   The large detailed image
`========================================================*/

       function Largeimage() {
           var $obj = this;
           this.node = new Image();
           this.loadimage = function (url) {
               //showing preload
               loader.show();
               this.url = url;
               this.node.style.position = 'absolute';
               this.node.style.border = '0px';
               this.node.style.display = 'none';
               this.node.style.left = '-5000px';
               this.node.style.top = '0px';
               document.body.appendChild(this.node);
               this.node.src = url; // fires off async
           };
           this.fetchdata = function () {
               var image = $(this.node);
               var scale = {};
               this.node.style.display = 'block';
               $obj.w = image.width();
               $obj.h = image.height();
               $obj.pos = image.offset();
               $obj.pos.l = image.offset().left;
               $obj.pos.t = image.offset().top;
               $obj.pos.r = $obj.w + $obj.pos.l;
               $obj.pos.b = $obj.h + $obj.pos.t;
               scale.x = ($obj.w / smallimage.w);
               scale.y = ($obj.h / smallimage.h);
               el.scale = scale;
               document.body.removeChild(this.node);
               $('.zoomWrapperImage', el).empty().append(this.node);
               //setting lens dimensions;
               lens.setdimensions();
           };
           this.node.onerror = function () {
               alert('Problems while loading the big image.');
               throw 'Problems while loading the big image.';
           };
           this.node.onload = function () {
               //fetching data
               $obj.fetchdata();
               loader.hide();
               el.largeimageloading = false;
               el.largeimageloaded = true;
               if (settings.zoomType == 'drag' || settings.alwaysOn) {
                   lens.show();
                   stage.show();
                   lens.setcenter();
               }
           };
           this.setposition = function () {
               var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1);
               var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1);
               $(this.node).css({
                   'left': left + 'px',
                   'top': top + 'px'
               });
           };
           return this;
       };
       $(el).data("jqzoom", obj);
   };
   //es. $.jqzoom.disable('#jqzoom1');
   $.jqzoom = {
       defaults: {
           zoomType: 'standard',
           //innerzoom/standard/reverse/drag
           zoomWidth: 315,
           //zoomWindow  default width
           zoomHeight: 410,
           //zoomWindow  default height
           xOffset: 65,
           //zoomWindow x offset, can be negative(more on the left) or positive(more on the right)
           yOffset: 0,
           //zoomWindow y offset, can be negative(more on the left) or positive(more on the right)
           position: "right",
           //zoomWindow default position
           preloadImages: true,
           //image preload
           preloadText: 'Carregando Imagem...',
           title: true,
           lens: true,
           imageOpacity: 0.4,
           alwaysOn: false,
           showEffect: 'show',
           //show/fadein
           hideEffect: 'hide',
           //hide/fadeout
           fadeinSpeed: 'slow',
           //fast/slow/number
           fadeoutSpeed: '2000' //fast/slow/number
       },
       disable: function (el) {
           var api = $(el).data('jqzoom');
           api.disable();
           return false;
       },
       enable: function (el) {
           var api = $(el).data('jqzoom');
           api.enable();
           return false;
       },
       disableAll: function (el) {
           jqzoompluging_disabled = true;
       },
       enableAll: function (el) {
           jqzoompluging_disabled = false;
       }
   };
})(jQuery);

William Bruno · Janeiro 11, 2012

qndo você aperta Ctrl+Shift+J no teu firefox(rodando o teu site), oq aparece ?

dinfoweb · Janeiro 11, 2012

Aparece este erro (Erro: Invalid origin: https://s-static.ak.fbcdn.net

Arquivo-fonte: http://sp.ask.com/toolbar/config/widgets/socialmini/js/ticker_37.js?build=135

Linha: 17)

Oq pode ser

William Bruno · Janeiro 11, 2012

esse erro não é do teu site.

clique em limpar, dê F5 no teu site, e interaja com ele. Ai sim você terá os seus erros.

dinfoweb · Janeiro 11, 2012

entao nao fucionou ainda e problema no codigo mesmo você tem um email na onde eu possa enviar os arquivos para você ta uma olhada

William Bruno · Janeiro 11, 2012

atenção:

 <a href='javascript:void(0);' 
           rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-5.png',largeimage: 'midias/produtos/grande/pato-5.png'}">
     <img src="midias/produtos/pequeno/pato-5.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

não tem nenhuma classe certo ?

mas você procura uma classe:

$a('.jqzoom')

http://www.mind-projects.it/projects/jqzoom/

dinfoweb · Janeiro 11, 2012

Entao oq eu poderia fazer para aruma isso

desculpe nao sei quase nada de jquery

William Bruno · Janeiro 11, 2012

isso é html:

 <a href='javascript:void(0);' class="jqzoom" rel="{gallery: 'gal1', smallimage: 'midias/produtos/medio/pato-5.png',largeimage: 'midias/produtos/grande/pato-5.png'}">
     <img src="midias/produtos/pequeno/pato-5.jpg" alt="Meu Soninho - Pato" width="60" height="79" title="Pato" /></a>

dinfoweb · Janeiro 11, 2012

mudei mais mesmo assim ele nao vai eu coloquei a class certinho e nao foi

Coloquei a class mais nao foi tentei varias maneiras eu acho q nao esta indo por causa dessa parte

<script type="text/javascript">
var $a = jQuery.noConflict();
               $a(document).ready(function() {

               $a("#mostra").load("pato.php");
               $a("a[name=link]").live("click", function(e) {
                       if (e.which == 2 || e.which == 3){
               return false;
                       }else{
               //COLOCAR EM UMA VARIAVEL
                        var href = $a(this).attr("href");

               //PEGA O LINK E CHAMA O ARQUIVO DENTRO NA DIV CONTEUDO
                $a("#mostra").load(href, function(){
   $a('.jqzoom').jqzoom({ zoomType: 'standard', lens:true,
   preloadImages: false, alwaysOn:false  });
});
                       }
               //Prevent default serve PARA BLOQUEAR A AO DO LINK
               e.preventDefault();
       });


       });
       </script>

pq so dessa maneira q consegui tipo carrega as fotos de acordo com cada link q clika tipo do pato ai cliko no pato ai aparece 5 fotos do pato ai cliko no elefante ai aparece 4 fotos do elefante

William Bruno · Janeiro 11, 2012

ele já começa com o pato ne?! e o pato tb tem q exibir a galeria:

$a("#mostra").load("pato.php", function(){
   $a('.jqzoom').jqzoom({ zoomType: 'standard', lens:true, preloadImages: false, alwaysOn:false  });
});

dinfoweb · Janeiro 11, 2012

Legal fuciona na primeira ai depois eu cliko em outro bicho ja nao fuciona mais so troca os bichos ja a função do zoom nao fuciona mais so fuciona no pato ai eu troco para outro bicho ai ja era nao fuciona mais

Tenho q acha uma maneira q ele carrege todas as paginas com a função zoom

isso comerça com o pato e ele tb tem q exibir

William Bruno · Janeiro 11, 2012

Ok, como ficou agora o seu código js ?

Arquivado

Com cria uma galeria de foto com jquery

Recommended Posts

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinfoweb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501