0

I'm trying to create a gallery, I'm trying to load an image into a div, and when it's finished loading have it fade it, though it isn't quite working. If I remove the display:none the image does load into the div, it's the fadeIn function that's not working correctly. Any help I can get on this would be great, thanks.

This is the js:

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$('.enlarge').click(function() {
    var jthis = this; // save the reference to the $('.enlarge') that was clicked
    var id = $(this).find(".enlarged_txt").attr('id');
    $('#full_image').animate({
        height: "100%"
    }, 300, function() {

    if ( $(jthis).hasClass("v") ) {   
        $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');


     fadeIn('#' + id);
     }
});
});

This is the container with the button:

<div class="enlarge bv">
    <img class="enlarged_unselected" src="http://www.klossal.com/klossviolins/elements/fullscreen_unselected.png"/>
    <img class="enlarged_selected" src="http://www.klossal.com/klossviolins/elements/fullscreen_selected.png"/>
     <div id="ESaitory_408" class="enlarged_txt">Enlarge Image</div>
</div>

This is the container I'm loading into:

<div id="full_image">
    <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
</div>
loriensleafs
  • 2,205
  • 9
  • 37
  • 71
  • You should add a few lines explaining what doesn't work, and what it does instead. Otherwise anyone who wants to answer will have to either flawlessly read all the code you wrote, or copy-paste it and actually try it. This adds unneeded friction. – Mikhail Feb 22 '13 at 03:31
  • most probably image is already cached, you should check `.complete` property of `img` element just after change `src` – zb' Feb 22 '13 at 03:33
  • That definitely makes sense but I'm having a hard time figuring out what isn't working. Right now I'm clicking on .enlarge and nothing is happening and I'm not sure why. – loriensleafs Feb 22 '13 at 03:33
  • First you hide the image using CSS, then you show after loading is complete using the load function. – Arun Killu Feb 22 '13 at 03:39
  • So I'm trying to do exactly that. Display:none is in the inline, and the fadein function is suppose to fade it in. I have a feeling the error is with this function. – loriensleafs Feb 22 '13 at 03:42
  • http://jsfiddle.net/oceog/4wjY9/ as i told you *check complete* – zb' Feb 22 '13 at 03:55

1 Answers1

0

You need to check complete img attribute, as onload will be not fired if image already loaded. I made own approach as not feel good with your code:

HTML

<button id="enlarge" data-target="big" data-src="http://placehold.it/400x250">Click to enlarge</button>
<button id="shrink" data-src="http://placehold.it/350x150" data-target="small">Click, to shrink down</button>
<div id='show'>
    <div id="big" class="images"><img/></div>
    <div id="small" class="images"><img src="http://placehold.it/350x150"/></div>
</div>

JS

$('button').click(function () {
    var $this = $(this);
    var target = $this.data('target');
    var src = $this.data('src');

    var image = $('#' + target + '.images img');
    image.one('load', show_parent_hide_siblings);
    image.attr('src', src);
    if (image.get(0).complete) {  //TAKE A LOOK HERE!
        image.trigger('load');
    }
});

function show_parent_hide_siblings(image) {
    var $this = $(this);
    $this.parent().fadeIn(1000);
    $this.parent().siblings().fadeOut(1000);
}

DEMO

zb'
  • 8,071
  • 4
  • 41
  • 68
  • hmmm, so my entire script is a bit longer then what I posted cause I didn't want to make the question overly complicated, I don't know if you can take this into chat and help me out with it? – loriensleafs Feb 22 '13 at 04:07