使用 Galleria 1-2-8，经典主题。
我有..
$('#galleria').galleria({
imageCrop: "false",
thumbnails: 'lazy',
carouselSteps: 1,
transition: 'flash',
transitionSpeed: 800,
extend: function(options) {
var gallery = this;
this.bind(Galleria.IMAGE, function(e) {
TONS OF CODE
});
}
});
然后在我下面
Galleria.ready(function(options) {
this.bind('image', function(e) {
this.lazyLoadChunks( 3, 200 );
this.scale();
});
});
行“this.scale();” 是一个新的补充。该代码之前运行良好，但我不得不对主图像强制重新缩放。原因是，我对 Galleria 进行了大量调整，并且遇到了缩略图滚动行为非常不稳定的问题。为了修复奇怪的缩略图行为，我模拟了单击 nav-right 箭头 div 和单击 Galleria.ready 底部的 nav-left 箭头 div —— 我没有在上面的代码中向您展示。
$('.galleria-image-nav-right').click();
$('.galleria-image-nav-left').click();
我之所以选择这样做是因为我注意到，当我作为用户单击主图像的下一个箭头时，它修复了缩略图滚动问题。因此，我在 Galleria 加载后强制单击下一个图像，然后单击返回（同时在所有图像上显示加载图像，因此用户不会注意到）。
无论如何..当我在图像上调用 .scale() 时，它会覆盖我在上面的第一个代码块中编写的所有选项。它完全消除了它们，就好像它们从未存在过一样。我已经在代码中使用警报进行了测试，以查看我设置的变量是否仍然存在，而它们不存在。
我尝试了不同的方法..scale()、.refreshImage()、._scaleImage() 等，但是它们都相互引用并且都存在取消扩展的相同问题：函数（选项）的东西。
请帮忙！
如果这些信息还不够，或者您需要完整查看我的代码，这里是..
<script type="text/javascript">
Galleria.loadTheme('/js/galleria.classic.js');
$('#galleria').galleria({
imageCrop: "false",
thumbnails: 'lazy',
carouselSteps: 1,
transition: 'flash',
transitionSpeed: 800,
extend: function(options) {
var gallery = this;
this.bind(Galleria.IMAGE, function(e) {
// $(window).resize(function() {
// this.scale();
// });//yep, tried it here.. no luck
var current = gallery.getData(gallery.getIndex());
var currImg = current.original;
var altText = $(currImg).attr('alt');
var src = $(currImg).attr('src');
var thehref = $(currImg).parent().attr('href');
var actualCurrent = $(currImg).parent();
getFFData(altText);
function getSource(val) {
var source = val;
while(source) {
if( n=source.indexOf("Vertical/") ) {
if(n!==-1) {
$(".galleria-images img").removeClass();
$(".galleria-images img").addClass("vertIMG");
$("#galleria-bigImage-popup").addClass("vertDIV");
$(".galleria-info-title").css("right", "34.2%");
$(".galleria-info-title").css("top", "45%");
$(".galleria-info").css("top", "94%");
$(".galleria-info").css("display", "block");
$(".galleria-info-title").css("display", "block");
$(".galleria-info-text").css("visibility", "visible");
$(".galleria-info-text").fadeIn(800);
}
}
if( n=source.indexOf("Horizontal/") ) {
if(n!==-1) {
$(".galleria-images img").removeClass();
$(".galleria-images img").addClass("horizIMG");
$("#galleria-bigImage-popup").addClass("horizDIV");
$(".galleria-info-title").css("right", "25.8%");
$(".galleria-info-title").css("top", "45%");
$(".galleria-info").css("top", "94%");
$(".galleria-info").css("display", "block");
$(".galleria-info-title").css("display", "block");
$(".galleria-info-text").css("visibility", "visible");
$(".galleria-info-text").fadeIn(800);
}
}
if( n=source.indexOf("Pano/") ) {
if(n!==-1) {
$(".galleria-images img").removeClass();
$(".galleria-images img").addClass("panoIMG");
$("#galleria-bigImage-popup").addClass("panoDIV");
$(".galleria-info-title").css("right", "25.8%");
$(".galleria-info-title").css("top", "inherit");
$(".galleria-info").css("top", "73%");
$(".galleria-info").css("display", "block");
$(".galleria-info-title").css("display", "block");
$(".galleria-info-text").css("visibility", "visible");
$(".galleria-info-text").fadeIn(800);
}
}
if( n=source.indexOf("Pano-Tall/") ) {
if(n!==-1) {
$(".galleria-images img").removeClass();
$(".galleria-images img").addClass("panoTallIMG");
$("#galleria-bigImage-popup").addClass("panoTallDIV");
$(".galleria-info-title").css("right", "25.8%");
$(".galleria-info-title").css("top", "inherit");
$(".galleria-info").css("top", "84%");
$(".galleria-info").css("display", "block");
$(".galleria-info-title").css("display", "block");
$(".galleria-info-text").css("visibility", "visible");
$(".galleria-info-text").fadeIn(800);
}
}
if( n=source.indexOf("Pano-Vert/") ) {
if(n!==-1) {
$(".galleria-images img").removeClass();
$(".galleria-images img").addClass("panoVertIMG");
$("#galleria-bigImage-popup").addClass("panoVertDIV");
$(".galleria-info-title").css("right", "42.1%");
$(".galleria-info-title").css("top", "45%");
$(".galleria-info").css("top", "94%");
$(".galleria-info").css("display", "block");
$(".galleria-info-title").css("display", "block");
$(".galleria-info-text").css("visibility", "visible");
$(".galleria-info-text").fadeIn(800);
}
}
return;
}//end while
}// end function getSource
getSource(thehref);
var newSrc = thehref.replace("sized","large"); //change contents of src variable to point to the large images dir.
getBigImage(newSrc); //this function is located in the utils.js file
function bigImageResizer(val) {
var theA = val;//this works
var theImage = $(theA).find('img');//this works
var theSource = $(theImage).attr('src');//this works. same as var thehref
//how do I get the height of the IMAGE?
var winWidth = $(window).width();
var imgWidth = $(theImage).width();
// var widthToUse = winWidth - imgWidth;
// var widthToUse = winWidth * 0.09;
//static css
$('#bigPopWrap').css('max-width', winWidth);
$('#bigPopWrap img').css('max-width', winWidth);
while(theSource) {
if( n=theSource.indexOf("Vertical/") ) {
if(n!==-1) {
//dynamic css
$('#bigPopWrap img').css('margin-left', winWidth*0.25);
$('#bigPopWrap').css('margin', 'auto');
//set some vars..
var OMG = $('#bigPopWrap img').width();
var tipPoint = winWidth*0.68;
//when window is too small to contain full size image
while ( OMG > tipPoint ) {
$('#bigPopWrap img').animate({
marginLeft: '0'
}, 500 );
$('#bigPopWrap img').css('margin-left', '0');
$('#bigPopWrap').animate({
margin: '0'
}, 500 );
$('#bigPopWrap').css('margin', '0');
return;
}
while ( OMG < tipPoint ) {
$('#bigPopWrap img').stop(true);
$('#bigPopWrap img').css('margin-left', winWidth*0.25);
$('#bigPopWrap').stop(true);
$('#bigPopWrap').css('margin', 'auto');
return;
}
}
}// end vertical
if( n=theSource.indexOf("Horizontal/") ) {
if(n!==-1) {
//dynamic css
$('#bigPopWrap img').css('margin-left', winWidth*0.1);
$('#bigPopWrap').css('margin', 'auto');
//set some vars..
var OMG = $('#bigPopWrap img').width();
var tipPoint = winWidth*0.83;
//when window is too small to contain full size image
while ( OMG > tipPoint ) {
$('#bigPopWrap img').animate({
marginLeft: '0'
}, 500 );
$('#bigPopWrap img').css('margin-left', '0');
$('#bigPopWrap').animate({
margin: '0'
}, 500 );
$('#bigPopWrap').css('margin', '0');
// $('#bigPopWrap img').stop(true,true);
// $('#bigPopWrap').stop(true,true);
// $('#bigPopWrap img').css('margin-left', '0');
// $('#bigPopWrap').css('margin', '0');
return;
}
while ( OMG < tipPoint ) {
$('#bigPopWrap img').stop(true);
$('#bigPopWrap img').css('margin-left', winWidth*0.1);
$('#bigPopWrap').stop(true);
$('#bigPopWrap').css('margin', 'auto');
return;
}
}
}// end horizontal
if( n=theSource.indexOf("Pano/") ) {
if(n!==-1) {
//dynamic css
$('#bigPopWrap img').css('margin-left', winWidth*0.065);
$('#bigPopWrap').css('margin', 'auto');
//set some vars..
var OMG = $('#bigPopWrap img').width();
var tipPoint = winWidth*0.868;
//when window is too small to contain full size image
while ( OMG > tipPoint ) {
$('#bigPopWrap img').animate({
marginLeft: '0'
}, 500 );
$('#bigPopWrap img').css('margin-left', '0');
$('#bigPopWrap').animate({
margin: '0'
}, 500 );
$('#bigPopWrap').css('margin', '0');
return;
}
while ( OMG < tipPoint ) {
$('#bigPopWrap img').stop(true);
$('#bigPopWrap img').css('margin-left', winWidth*0.065);
$('#bigPopWrap').stop(true);
$('#bigPopWrap').css('margin', 'auto');
return;
}
}
}// end pano
if( n=theSource.indexOf("Pano-Tall/") ) {
if(n!==-1) {
//dynamic css
$('#bigPopWrap img').css('margin-left', winWidth*0.07);
$('#bigPopWrap').css('margin', 'auto');
//set some vars..
var OMG = $('#bigPopWrap img').width();
var tipPoint = winWidth*0.864;
//when window is too small to contain full size image
while ( OMG > tipPoint ) {
$('#bigPopWrap img').animate({
marginLeft: '0'
}, 500 );
$('#bigPopWrap img').css('margin-left', '0');
$('#bigPopWrap').animate({
margin: '0'
}, 500 );
$('#bigPopWrap').css('margin', '0');
return;
}
while ( OMG < tipPoint ) {
$('#bigPopWrap img').stop(true);
$('#bigPopWrap img').css('margin-left', winWidth*0.07);
$('#bigPopWrap').stop(true);
$('#bigPopWrap').css('margin', 'auto');
return;
}
}
}// end panotall
if( n=theSource.indexOf("Pano-Vert/") ) {
if(n!==-1) {
//dynamic css
$('#bigPopWrap img').css('margin-left', winWidth*0.38);
$('#bigPopWrap').css('margin', 'auto');
//set some vars..
var OMG = $('#bigPopWrap img').width();
var tipPoint = winWidth*0.5;
//when window is too small to contain full size image
while ( OMG > tipPoint ) {
$('#bigPopWrap img').animate({
marginLeft: '0'
}, 500 );
$('#bigPopWrap img').css('margin-left', '0');
$('#bigPopWrap').animate({
margin: '0'
}, 500 );
$('#bigPopWrap').css('margin', '0');
return;
}
while ( OMG < tipPoint ) {
$('#bigPopWrap img').stop(true);
$('#bigPopWrap img').css('margin-left', winWidth*0.38);
$('#bigPopWrap').stop(true);
$('#bigPopWrap').css('margin', 'auto');
return;
}
}
}//end panovert
return;
}//end while
}// end function bigImageResizer
bigImageResizer(actualCurrent);
$(window).resize(function() {
bigImageResizer(actualCurrent);
});
$('.galleria-images').click(function () {
bigImageResizer(actualCurrent);
});
});// end bind Galleria.IMAGE
}// end extend function(options)
});
Galleria.ready(function(options) {
// this.bind('loadfinish', function(e) {
// $('.galleria-image').scale();
// });
this.bind('image', function(e) {
this.lazyLoadChunks( 3, 200 );
// this.scale();
// $('#galleria').scale();
// this.joshScale();
// refreshImage(this);
});
this.bind('thumbnail', function(e) {
function thumbResizer() {
//container height
var containerHeight = $('.galleria-thumbnails').height();
$(window).resize(function() {
containerHeight = $('.galleria-thumbnails').height();
});
//the array
var thumbIMGS = $('.galleria-thumbnails').find('img');
//iterate through it
$.each(
thumbIMGS,
function( intIndex, objValue ){
//thumbnail source
var theThumbSource = $(objValue).attr('src').replace('thumbs','sized');
// alert(theThumbSource);
// var theThumbSource = $(objValue).attr('src');
//modify width based on thumbnail source
if( n=theThumbSource.indexOf("Pano-Vert/") ) {
if(n!==-1) {
// alert('pano-vert');
$(objValue).parent().css('width', '0.175%');
}
}
if( n=theThumbSource.indexOf("Vertical/") ) {
if(n!==-1) {
// alert('vert');
$(objValue).parent().css('width', '0.39%');
}
}
if( n=theThumbSource.indexOf("Horizontal/") ) {
if(n!==-1) {
// alert('horiz');
$(objValue).parent().css('width', '0.6%');
}
}
if( n=theThumbSource.indexOf("Pano-Tall/") ) {
if(n!==-1) {
// alert('pano-tall');
$(objValue).parent().css('width', '0.8%');
}
}
if( n=theThumbSource.indexOf("Pano/") ) {
if(n!==-1) {
// alert('pano');
$(objValue).parent().css('width', '1.27%');
}
}
}//end function
);//end each
}// end function thumbResizer
thumbResizer();
});// end bind 'thumbnail'
//one solution. breaks scalability
// this.next();
// this.prev();
//another solution. breaks scalability
// this.show(1);
// this.show(0);
//another solution. breaks scalability. what if I force rescale?
$('.galleria-image-nav-right').click();
$('.galleria-image-nav-left').click();
//force rescale
// this.bind('image', function(d) {
// // this.lazyLoadChunks( 3, 200 );
// $(window).resize(function() {
// this.scale();
// });
// });
// $('.galleria-image-nav-right').attr('id', 'galleria-image-nav-right');
// $('.galleria-image-nav-left').attr('id', 'galleria-image-nav-left');
});// end galleria.ready
Galleria.run('#galleria',{
});
哦，如果您想知道，缩略图滚动问题是如何出现的？上面的函数 thumbResizer 是罪魁祸首——我们在缩略图浏览器中有五个不同方向的图像，它们都可以同时查看。该函数缩放它们以适应缩略图容器 div 的高度。
另外，我没有使用单独的缩略图，但实际上我是在伪造它，以使 Galleria 在一个名为“poop”的文件夹中查找缩略图，该文件夹不存在，它说“哎呀，找不到它”，只是使用每个缩略图的主图像，按比例缩小。我们这样做是为了减少 Galleria 的加载时间，因此它会立即变得活跃和可点击，而不是在一次加载 200 张相当大的图像时灰显和无法使用 8 分钟。请不要说“好吧，你不应该那样做！” 相信我，我知道。但是，我的雇主不这样做，并且绝对希望这样做。
在这一点上还不如写一本书.. :)
谢谢！
编辑：忘了提——虽然 this.scale() 代码在完成加载时确实修复了可伸缩性，但如果你点击下一张图像，它根本不会伸缩。并且，如果我们根本不调用 this.scale() （回到上一个主图像不重新缩放的问题），然后我们单击下一张图像，它会正确重新缩放。因此，用户点击和模拟点击之间似乎存在某种差异。