JQuery полный фон галереи

Question

Я не уверен, как я могу описать то, что я хочу, но в качестве резюме я могу сказать, что мне нужно сделать что-то вроде , что с JQuery.Когда я нажму на картинку, я покажу ее большую версию.Является ли это возможным?Любой плагин или образец совета?

Я нашел плагин с именем smoothdivscroll , но он прокручивается только по вертикали.Так что в данный момент это бесполезно для меня.

Спасибо за вашу помощь

Answer 1

Нечто подобное может помочь в качестве отправной точки.

Вам просто нужно добавить абсолютный слой и клонировать в изображение, на которое нажали.

mouseMove галерея jsFiddle

JQuery:

$(window).load(function(){
// roXon mmGallery
var mmGalSpeed = 10; // set gallery damping
var xSlider = $("#slider"); 
var posX = 0;
var sumW = 0;

$('#slider img').each(function(){
  sumW += $(this).outerWidth(true); 
  xSlider.width(sumW+3);
}); 

wDiff1 = $('#gallery_container').outerWidth(true);
wDiff2 = xSlider.width(); 
wDiff = ((wDiff2/wDiff1)-1).toFixed(2); 

mouseX = 0;
$("#gallery_container").mousemove(function(e) {
  mouseX = (e.pageX - $(this).offset().left);
});


setInterval(function(){ // zeno's paradox equation // "catching delay"
  posX += (mouseX - posX) / mmGalSpeed; 
  xSlider.css({left: '-'+Math.round(posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
}, 10); 

});