Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript safari bug with photo revealer

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35217
    rrswans
    Member

    I’m having a strange problem with the photo revealer script. I’ve downloaded and it is working perfectly in firefox, but in safari it sometimes can’t determine the width of the image. This happens randomly. Instead of the containing div enlarging to show the entire picture it shrinks instead. I’m totally stumped, the fact that it works sometimes totally baffles me. I’ve tweaked the code slightly and integrated it with my wordpress archive, but when this problem happened I went back and tried it with Chris’s original code outside of wordpress and got the same result.

    Here is a link to the page that I am referring to. I am using the most recent versions of both safari and firefox.

    and here is all my code if that helps:

    $(document).ready(function(){

    $('.photo_slider').each(function(){

    var $this = $(this).addClass('photo-area');
    var $img = $this.find('img');
    var $info = $this.find('.info_area');

    var opts = {};

    $img.ready(function(){
    opts.imgw = $img.width();
    opts.imgh = $img.height();
    });

    opts.orgw = $this.width();
    opts.orgh = $this.height();

    $img.css ({
    marginLeft: "-150px",
    marginTop: "-150px"
    });

    var $wrap = $('').append($img).prependTo($this);


    var $close = $('Close').appendTo($info);

    opts.wrapw = $wrap.width();
    opts.wraph = $wrap.height();

    $this.click(function(){
    $this.animate({
    width: opts.imgw,
    height: (opts.imgh+95),

    }, 600 );


    $wrap.animate({
    width: opts.imgw,
    height: opts.imgh
    }, 600 );

    $(".info_area",$this).fadeIn();

    $img.animate({
    marginTop: "0px",
    marginLeft: "0px"
    }, 600 );

    return false;
    });

    $close.click(function(){
    $this.animate({
    width: opts.orgw,
    height: opts.orgh,
    }, 600 );


    $wrap.animate({
    width: opts.wrapw,
    height: opts.wraph
    }, 600 );

    $img.animate({
    marginTop: "-150px",
    marginLeft: "-150px"
    }, 600 );

    $(".info_area",$this).fadeOut();
    return false;
    });

    });

    });
    #90971
    Mottie
    Member

    Hi rrswans!

    Chrome and Safari fire off the document ready event before the images have even started loading, so the way to prevent problems with your script would be to add dimensions to all of your images

    or, instead of using the document ready function, change it to the window load event which fires once all of the images have completed loading:

    $(window).load(function(){
    // code here
    });
    #90974
    rrswans
    Member

    Hi Mottie! thanks so much for this! I ended up going with the (window).load since wordpress isn’t printing the image sizes in the html. It worked perfectly. and your explanation makes total sense. Still learning Jquery, this was very helpful. Can’t thank you enough!

    #93221
    aladdin
    Participant

    I tried hard to read the code and understand it.
    this line I couldn’t understand at all
    var $this = $(this).addClass(‘photo-area’);
    what is ‘photo-area’ ????

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.