Using Galleria 1-2-8, Classic theme.
I have..
$('#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
});
}
});
Then beneath I have
Galleria.ready(function(options) {
this.bind('image', function(e) {
this.lazyLoadChunks( 3, 200 );
this.scale();
});
});
The line "this.scale();" is a new addition. The code was working fine before, but I had to force a rescale on the main image. The reason being, I have tweaked galleria massively, and I've encountered an issue where the thumbnail scrolling behaves very erratically. To fix the strange thumbnail behavior, I have simulated a click on the nav-right arrow div and a click on the nav-left arrow div at the bottom of Galleria.ready -- which I have not shown you in the above code.
$('.galleria-image-nav-right').click();
$('.galleria-image-nav-left').click();
The reason I chose to do this is because I noticed that when I, the user, clicked the next arrow for the main image, it fixed the thumbnail scrolling issue. So I force a click on the next image once Galleria has loaded, and then click back (while displaying a loading image over it all so the user does not notice).
ANYWAY.. when I call .scale() on the image, it overrides all the options I wrote in the first block of code up there. It cancels them out completely, as if they were never there. I've tested with alerts inside the code to see if the variables I set were still there, and they are not.
I've tried different methods.. .scale(), .refreshImage(), ._scaleImage(), etc, but they all reference eachother and all have the same problem of canceling out the extend: function(options) stuff.
Please help!
If this information is not enough, or you need to see my code in full, here it is..
<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',{
});
Oh, and if you're wondering, how does a problem with thumbnail scrolling even come up? The function above, thumbResizer, is the culprit -- we have five different orientations of images that go in the thumbnail browser and they are all viewable at the same time. That function scales them to fit the height of the thumbnails container div.
Also, I am not using separate thumbnails, but in fact I am actually faking it to make galleria look for thumbnails in a folder called "poop" which doesn't exist, and it says "oops, can't find it" and just uses the main image for each thumbnail, scaled down. We did this to combat the load time of Galleria, so it becomes active and clickable immediately rather than grayed out and unworkable for 8 minutes while it loads 200 rather large images at a time. Please don't say "well, you shouldn't be doing that!" Trust me, I know. My employer, however, doesn't, and absolutely wants it done that way.
Might as well write a book at this point.. :)
Thanks!
edit: forgot to mention -- while the this.scale() code does fix the scalability when it's finished loading, if you click to the next image over, it doesn't scale at all. AND, if we don't call this.scale() at all (reverting back to the previous problem of the main image not rescaling), and we click the next image over, it rescales properly. So there seems to be some kind of discrepancy between a user click and simulating a click..
If you want the thumbnails always to be 100% the height of their container, then ...
#container img { height: 100%; }
... will manage that aspect and providing no width is set, either in the stylesheet or in javascript, then each image's width will be decided automatically to maintain its aspect ratio.
Nice and simple, and several lines of troublesome javascript can be deleted.