Loading and position image, when the another images are loaded
<p>I have a small problem with loading and position one of my images. The smallest one. I'm using spacegallery script (http://www.eyecon.ro/spacegallery/).</p>

<p>It's loading good, but i want it to position it in the corner of bigger image, and when i load my page for the first time, it's not positioned, when i reload it - it's all fine, but the first loading is wrong. </p>

<p>Here are the screens:
It's the first load without refreshing the site:</p>

<p><img src="http://derivativeofln.com/withoutload.png" alt="first load"></p>

<p>Second and next loads:</p>

<p><img src="http://derivativeofln.com/withload.png" alt="second load"></p>

<p>My HTML:</p>

<pre><code>    &lt;div id="myGallery" class="spacegallery"&gt;   

    &lt;img class="imaz" src=http://derivativeofln.com/magnifier.jpg /&gt;
    &lt;img class="aaa" src=images/bw1.jpg alt="" atr1="bw1" /&gt;
    &lt;img class="aaa" src=images/bw2.jpg alt="" atr1="bw2" /&gt;
    &lt;img class="aaa" src=images/bw3.jpg alt="" atr1="bw3" /&gt;

            &lt;/div&gt;      
</code></pre>

<p>MY CSS:</p>

<pre><code>#myGallery0 {
width: 100%;
height: 300px;
 }

#myGallery0 img {
border: 2px solid #52697E;
 }

a.loading {
background: #fff url(../images/ajax_small.gif) no-repeat center;
}

.imaz {
 z-index: 10000; 
}


.imaz img{
position: absolute;
left:10px;
top:10px;
z-index: 10000;
width: 35px;
height: 35px;   
}
</code></pre>

<p>My Jquery main script file: (the first positioning instructions are on the bottom, so feel free to scroll down : ))</p>

<pre><code>(function($){
   EYE.extend({

    spacegallery: {



        animated: false,

        //position images 
        positionImages: function(el) {

            var top = 0;

            EYE.spacegallery.animated = false;
            $(el)
                .find('a')
                    .removeClass(el.spacegalleryCfg.loadingClass)
                    .end()
                    .find('img.aaa')
                    .removeAttr('height')
                    .each(function(nr){
                        var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];

                        $(this)
                            .css({
                                top: el.spacegalleryCfg.tops[nr] + 'px',
                                marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
                                opacity: 1 - el.spacegalleryCfg.asins[nr]
                            }) 
                            .attr('width', parseInt(newWidth));
                        this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
                        this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
                        this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
                        this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
                        this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
                        this.spacegallery.current = el.spacegalleryCfg.asins[nr];
                        this.spacegallery.width = newWidth;
                    })

        },


        //constructor
        init: function(opt) {
            opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
            return this.each(function(){
                var el = this;
                if ($(el).is('.spacegallery')) {
                    $('&lt;a href="#"&gt;&lt;/a&gt;')
                        .appendTo(this)
                        .addClass(opt.loadingClass)
                        .bind('click', EYE.spacegallery.next);

                    el.spacegalleryCfg = opt;
                    var listunia, images2 = [], index;
                    listunia = el.getElementsByTagName("img");

                    for (index = 1; index &lt; listunia.length; ++index) {
                        images2.push(listunia[index]);
                    } 


                    el.spacegalleryCfg.images = images2.length;             
                    el.spacegalleryCfg.loaded = 0;
                    el.spacegalleryCfg.asin = Math.asin(1);
                    el.spacegalleryCfg.asins = {};
                    el.spacegalleryCfg.tops = {};
                    el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
                    var top = 0;

                    $('img.aaa', el)
                        .each(function(nr){
                            var imgEl = new Image();
                            var elImg = this;

                            el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
                            top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
                            el.spacegalleryCfg.tops[nr] = top;
                            elImg.spacegallery = {};
                            imgEl.src = this.src;
                            if (imgEl.complete) {

                                el.spacegalleryCfg.loaded ++;
                                elImg.spacegallery.origWidth = imgEl.width;
                                elImg.spacegallery.origHeight = imgEl.height
                            } else {
                                imgEl.onload = function() {
                                    el.spacegalleryCfg.loaded ++;
                                    elImg.spacegallery.origWidth = imgEl.width;
                                    elImg.spacegallery.origHeight = imgEl.height
                                    if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {

                                        EYE.spacegallery.positionImages(el);

                                    }
                                };
                            }
                        });




                    el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
                    el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
                    if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {


                            if(el.spacegalleryCfg.images == 3){
                            $('img.imaz', this).css('top', '27px'); // HERE IS POSITIONING OF MY IMAGES, WHEN SCRIPT LOADS FOR THE FIRST TIME!
                            $('img.imaz', this).css('left', (($(el).find('img.aaa:last').width())/2 + 77) + 'px' );
                            }
                            else if(el.spacegalleryCfg.images==2){
                                $('img.imaz', this).css('top', '33px');     
                                $('img.imaz', this).css('left', (($(el).find('img.aaa:last').width())/2 + 77) + 'px' ); // HERE IT ENDS:)
                            }

                        EYE.spacegallery.positionImages(el);
                    }
                }
            });
        }
    }
});
})(jQuery);
</code></pre>
