Galleria 1-2-8、Classic テーマを使用。
私は持っている..
$('#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.ready の下部にある nav-right 矢印 div のクリックと nav-left 矢印 div のクリックをシミュレートしました。これは上記のコードでは示していません。
$('.galleria-image-nav-right').click();
$('.galleria-image-nav-left').click();
これを選択した理由は、ユーザーである私がメイン画像の次の矢印をクリックしたときに、サムネイルのスクロールの問題が修正されたことに気付いたからです。したがって、Galleria がロードされたら、次の画像を強制的にクリックしてから、クリックして戻します (ユーザーが気付かないように、ロード中の画像を全体に表示します)。
とにかく..画像で .scale() を呼び出すと、コードの最初のブロックに書いたすべてのオプションが上書きされます。あたかもそこになかったかのように、それらを完全にキャンセルします。コード内のアラートをテストして、設定した変数がまだ存在するかどうかを確認しましたが、そうではありません。
私はさまざまな方法を試しました..scale()、.refreshImage()、._scaleImage()などですが、それらはすべて相互に参照しており、extend: function(options)のものをキャンセルするという同じ問題があります。
助けてください！
この情報が十分でない場合、または私のコードを完全に見る必要がある場合は、ここにあります..
<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 が原因です。サムネイル ブラウザに表示される画像には 5 つの異なる向きがあり、それらはすべて同時に表示できます。その関数は、サムネイル コンテナー div の高さに合わせてサイズを調整します。
また、別のサムネイルを使用しているわけではありませんが、実際にはガレリアが存在しない「うんち」というフォルダーでサムネイルを検索するように偽装しており、「おっと、見つかりません」と表示され、各サムネイルのメイン画像を縮小して使用します。これは、Galleria の読み込み時間に対処するために行ったもので、一度に 200 個のかなり大きな画像を読み込む間にグレー表示されて 8 分間動作しなくなるのではなく、すぐにアクティブになってクリックできるようになります。「まあ、そんなことしちゃいけないよ！」なんて言わないでください。私を信じてください、私は知っています。しかし、私の雇用主はそうではなく、絶対にそのようにしたいと思っています。
この時点で本を書くこともできます.. :)
ありがとう！
編集: 言及するのを忘れていました -- this.scale() コードは、読み込みが完了したときにスケーラビリティを修正しますが、次の画像をクリックすると、まったくスケーリングしません。そして、 this.scale() をまったく呼び出さず (メイン画像が再スケーリングされないという以前の問題に戻ります)、次の画像をクリックすると、適切に再スケーリングされます。そのため、ユーザーのクリックとクリックのシミュレートの間には、ある種の不一致があるようです..