Problema com zoom ao clicar em imagem

[Diogo Matos]

Boa noite amigos!

 

Para vocês, pode parecer um problema simples, mas estou batendo a cabeça.

 

Na página de detalhe dos barcos, ao clicar na foto para abrir o zoom, a foto fica fora de posicionamento, ficando não visível.

Vejam: http://www.internauticaguaruja.com.br/barcos/intermarine-440-full-6/

 

Sou iniciante e vi que o visualizador é o "prettyPhoto".

Gostaria de saber onde que posso resolver essa falha, se é no prettyPhoto.css ou no jquery.prettyPhoto.js.

 

 

 

Muito obrigado!

[DiF]

Olá, 

Não se tem haver, mas o prettyphoto usa o atributo rel, e não data-rel como está no código do seu site.

Esse prefixo "data-"  faz parte do html 5.

 

Repare na sintaxe:

<a href="images/fullscreen/img.jpg" rel="prettyPhoto" title="Descrição da imagem">      <img src="images/thumbnails/t_img.jpg" width="60" height="60" alt="Isto é o titulo da imagem" /></a>

Dentro do elemento <a>  com o link da imagem  grande e o atributo rel, você coloca  o elemento img da imagem pequena.

 

Seria interessante você postar aqui a parte do código que você coloca as imagens grandes e pequenas...

 

att, 

Dif

[Diogo Matos]

Obrigado pela ajuda Dif!

 

Na verdade as imagens estão sendo carregadas no PrettyPhoto, só na exibição que está o problema. Olha o que acontece:

 

Antes

 

Depois

 

Quando abro a imagem vem top:5201, por isso não exibe, altero para 0 e a imagem aparece.

Como faço para alterar essa configuração que modifiquei? No css do PrettyPhoto está top: 0.

 

 

Obrigado!!

[DiF]

Sim, notei.. mas por isso mesmo que  você deveria postar aqui o fragmento da usabilidade do plugin, ou seja, a parte do javascript que chama o plugin.

Ali deve ter algum parâmetro que define a posição  do top.

 

Só pensar um poquinh, se você não definiu manualmente as posições no seu CSS, obviamente está sendo feito pelo plugin.. mas postar só os prints mostrando o lugar não resolve.

 

Para entender melhor o que estou dizendo veja este exemplo no JSFiddle: http://jsfiddle.net/Aslamise/gXkDu/

[Diogo Matos]

Olá Dif!

 

Seria aqui?

<div class="offer_gallery"><div class="gallery_images"><div id="gallery_images"><?phpforeach ($images as $image_id => $image) {?><div class="gallery_image_item"><?php echo wp_get_attachment_image($image->ID, 'detail_barco'); ?><a href="<?php echo wp_get_attachment_url($image->ID); ?>" data-rel="prettyPhoto[gal]"><span><em class="ico_large"></em></span></a></div><?php}?></div></div><div class="gallery_thumbs"><div id="gallery_thumbs"><?phpforeach ($images as $image_id => $image) {?><a href="#"><?php echo wp_get_attachment_image($image->ID, 'thumb_detail'); ?></a><?php}?></div><a href="#" class="prev" id="gallery_thumbs_prev"></a><a href="#" class="next" id="gallery_thumbs_next"></a></div><script>jQuery(document).ready(function($) {function carGalleryInit() {$('#gallery_thumbs').children().each(function(i) {$(this).addClass('itm' + i);$(this).click(function() {$('#gallery_images').trigger('slideTo', [i, 0, true]);$('#gallery_thumbs a').removeClass('selected');$(this).addClass('selected');return false;});});$('#gallery_thumbs a.itm0').addClass('selected');$('#gallery_images').carouFredSel({infinite: false,circular: false,auto: false,width: '100%',scroll: {items: 1,fx: "crossfade"}});$('#gallery_thumbs').carouFredSel({prev: "#gallery_thumbs_prev",next: "#gallery_thumbs_next",infinite: false,circular: false,auto: false,width: '100%',scroll: {items: 1}});}$(window).load(function() {carGalleryInit();});var resizeTimer;$(window).resize(function() {clearTimeout(resizeTimer);resizeTimer = setTimeout(carGalleryInit, 100);});});</script> 

[Diogo Matos]

Diff, quando altero de data-rel para apenas rel, a imagem abre na janela, não no visualizador.

To quebrando a cabeça aqui.