Efeito Ajax

[Lu Oliveira 0]

Pessoal, boa tarde.

 

Estou procurando a muito tempo essa ajuda, encontrei este forum e espero que eu tenha sucesso nessa busca, é o seguinte, neste link http://studioplanoverde.com.br/site/, clicando no botão ou no menu PORTFOLIO, ele vai até lá em baixo na própria páfina e mostrar algumas imagens, e quando clica encima da imagem, ela abre, só que ela abre permanecendo na própria página, o que eu preciso e MUITO, é que quando abre a imagem, ela possa subir um pouco, por que se for prestar atenção, a imagem abre mas fica pela metade da página, aí tem que descer um pouco a barrinha de rolagem.

 

Eu finalmente achei o arquivo desse efeito, a principio, parece um pouco bagunçado, mas é dessa forma que está no arquivo, eu vou postar aqui.

 

Desde já, agradeço e muito pela atenção e principalmente por quem conseguir me ajudar.

/* Dynamic Window Ajax Portfolio Content */
"use strict";
(function($) {

var $actual= null;
var obert=false;
$(".ch-grid").click(function() {
obre($(this).attr('id'));
$actual=$(this);
});
$(".folio-btn").click(function() {
$(".project-window").slideUp("slow");
obert=false;
});

//obre('portfolio-1.html',1);
function obre(quin, dummy){
$.ajax({
url: quin,
success: function(data) {
$('.project-content').html(data);
$(".project-content").hide(0)
$('.project-window').hide(0)
tanca();
canvia();
worksCarousel();

if(dummy!=1){
// if(obert!=true){
$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 500, function(){
$('.project-window').show(0);
$('.project-window').animate({height:900}, 500,function(){
$('.project-window').css('height','auto');
// $(".project-window").slideDown(1500, function() {
$(".project-content").fadeIn("slow");
});
});

/* }else{
$("html, body").animate({ scrollTop: $('#anchor5').offset().top }, 300, function(){
$('.project-window').show(0);
$(".project-content").fadeIn("slow");
});
}
obert=true; */
}
}
});
}

function tanca(){
$(".close").click(function() {
$('#portfolio').slideUp("slow");
$('#portfolio').animate({ scrollTop: $('#portfolio').offset().top });
obert=false;
});
}

function seguent(){
if($actual.next().hasClass('final')){
$actual=$($('.inici').next());
}else{
$actual=$($actual.next());
}
if($actual.hasClass('isotope-hidden')){
seguent();
}else{
obre($actual.attr('id'));
}
}

function enrera(){
if($actual.prev().hasClass('inici')){
$actual=$($('.final').prev());
}else{
$actual=$($actual.prev());
}

if($actual.hasClass('isotope-hidden')){
enrera();
}else{
obre($actual.attr('id'));
}
}

function canvia(){
$('.btn-next').click(function() {
seguent();
$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);
});
$('.btn-prev').click(function() {
enrera();
$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);
});
}

// Carousel Project Opened
function worksCarousel(){
var totalWorks = $(".wrapper-project ul li").length;
var ampleWork = $(".project-content").width();
var ampleTotalWorks = totalWorks*ampleWork;
$('.wrapper-project ul').css('width',ampleTotalWorks)
$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1);

var fragment = document.createDocumentFragment(),
li = document.createElement('li');
while (totalWorks--) {
fragment.appendChild(li.cloneNode(true));
}

$('.controller-3 ul').append(fragment);


var index3 = 0;
var pos3 = 10;
$('.controller-3 ul li:first-child').addClass('selected');


$(".controller-3 ul li").click(function(){
index3 = $(this).index();
$(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
$('.controller-3 ul li').removeClass('selected');
$(this).addClass('selected');
//alert(ampleitem);
});
$(".w-next").click(function(){
if( index3 != $(".controller-3 ul li").size()-1){
 index3++;
 $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
 pos3++;
 $('.controller-3 ul li.selected').removeClass('selected').next().addClass('selected');
}
  });
$(".w-prev").click(function(){
 if( index3!=0 ){
 index3--;
 $(".wrapper-project").animate({scrollLeft:ampleWork*index3},'slow');
 pos3--;
 $('.controller-3 ul li.selected').removeClass('selected').prev().addClass('selected');
 }
});
}
})(jQuery);

[Ted k' 126]

O seu problema é quando clica na galeria e ai abre a imagem, o certo seria apontar para uma âncora assim que clicar, e essa âncora subir um pouco mais o resultado da galeria, confere?

[Lu Oliveira 0]

Exatamente. Pois a imagem fica no meio da tela.

[Ted k' 126]

Eu não conseguir identificar o controle que faz a ação da chamada das galerias, consegue colocar o console apos cada click para identificar qual é?

[Lu Oliveira 0]

Eu não compreendi o que você precisa, o que eu sei é que a função do clique, que é a div, é o .wrapper-project

[Anderson Danilo 43]

Observe esta linha:

 

$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1);

Você podia tentar diminuir a posição top, tipo assim

 

$("html, body").animate({ scrollTop: $('#project-show').offset().top - 100 }, 1);

Se você localizar "scrollTop" você vai achar os outros lugares em que esse código se repete

[Lu Oliveira 0]

100% com sucesso.

 

Muito obrigada pela ajuda. Este forum é fantástico.

[Lu Oliveira 0]

Desculpa, eu havia marcado como resolvido, realmente resolveu, porém, quando eu clico no X para fechar a sessão de fotos, o portfolio some da página http://studioplanoverde.com.br/site/%C2'> aí eu tenho que atualizar a página para aparecer novamente. O que precisa fazer é quando clicar em X, aparecer as sessões de fotos.

 

Me ajudem por favor.

[Anderson Danilo 43]

Olá,

 

Eu não vi "X", você retirou?

[Lu Oliveira 0]

Tirei, vou ver se o cliente aceita, caso contrário, eu aviso você.

 

Obrigada.