32px loading GIF only while image is loading
I have this loading.gif image that is 750px, when it should be 32px. The reason it's huge now is because my original solution was displaying two images: one 750px version of the loading.gif image and one 32px version (in the center of the 750px) of the same image. Now I'm at least down to one image, even if it's the wrong version.
Click any of the thumbnail images here, and then again on the thumbnail at the top of that popup product gallery to see what I mean:
http://www.onebagoneearth.com/
Products/ OBOEsac .
I need that huge loading.gif to be 32px like it should be, and then expand to 750px once the image is loaded. I've tried a bunch of solutions, but nothing has solved the problem.
This is the code I have at the moment, although I'm working on the issue now so it may change.
-
$('#inline .thumbGrid img').click(function(){
var strLargeImg = document.getElementById('OBOEsac');
$('.galleryPopup').attr('src','/site/scripts/colorbox/images/loading.gif');
//document.getElementById('OBOEsac').className+=(' loading');
var strThumbSwap= this.src.replace(/60px/g,'750px');
$('.galleryPopup').attr('src',strThumbSwap);
//document.getElementById('OBOEsac').className = document.getElementById('OBOEsac').className.replace(/loading/g,'');
//var strThumbSwap= this.src.replace(/60px/g,'750px');
//document.getElementById('OBOEsac').className+=(' loading');/*errored*/
// $('.galleryPopup').attr('src',strThumbSwap);
// $('.galleryPopup').className.replace(/loading/g,'');
[/code]