We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 7508
    • 22 Posts
    ah brilliant... I should have checked it without being logged in!

    I noticed in Firefox (version 3.03) the whole div seems to disappear whilst it is loading the image and then reappear once loaded (so clicking the thumbnails one by one makes it flash), once it has loaded them all in they work as expected.

    The same happens in IE 7 but once they are loaded if you click on the thumbs again the main image does not appear.

    sooo close!

    Can you help with the final tweaks, I appreciate it!
      • 7923
      • 4,213 Posts
      Set height to the div so it won’t collapse.

      The reason why it didn’t work when you were logged in is because QuickEdit is used then and it uses MooTools js library. You need to make the jQuery work in no conflict mode if you want that the gallery works when logged in too.


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 7508
        • 22 Posts
        Almost there...

        Everything seems to work now except the issue with IE7, if you view an image more than once the image is not displayed. It seems like the whole div container seems to vanish.

        can you help on this... so close smiley
          • 7923
          • 4,213 Posts
          It seems that IE7 doesn’t fire up the jQuery’s load() event if the image is coming from it’s cache.. I guess that’s obvious, but stupid still as other browsers are firing up the load() event even though they are loading the image from cache..

          So then we have to make IE7 think that it’s loading a different image every time by adding an url parameter with random content each time, so try this:

          (note, I added ’?rand=’+Math.random() to the url when it’s loading the target image)

          <script type="text/javascript">
          //<![CDATA[
          function showPic(url,title,descr,width,height) {
            $("#maxImage").fadeOut("fast", function(){
                var image = new Image();
                $(image).hide();
                $(image).attr({src: url+'?rand='+Math.random(), width: width, height: height, id: 'maxImage'}).load(function() {
                  $("#maxImage").attr({
                    src: url,
                    width: width,
                    height: height
                  });
                  $("#maxImage").fadeIn("fast");
                  $("#maxTitle").html(title);
                  $("#maxDescr").html(descr);
                });
            });
          }
          //]]> 
          </script>
          


          I’m not sure, but I think that this makes the browser to load that image every time, so it will never come from cache.. will add overhead to bandwidth usage.. unfortunately I don’t have any other fix now, maybe googling would help to find a better fix.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 7508
            • 22 Posts
            It seemed to work at first but I noticed when they are not cached it stretches the images on transition, afterwards they behave as I would like.

            Thanks for all your help on this, I will post back here if I find the solution to this issue.
              • 7508
              • 22 Posts
              Got it working with some help!

              <script type="text/javascript">
              //<![CDATA[
              function showPic(url,title,descr,width,height) {
                $("#maxImage").fadeOut("fast", function(){
                    var image = new Image();
                    $(image).load(function() {
                      $(image).hide();
                      $("#maxImage").attr({
                        src: url,
                        width: width,
                        height: height
                      });
                      $("#maxImage").fadeIn("fast");
                      $("#maxTitle").html(title);
                      $("#maxDescr").html(descr);
                    });
                    $(image).attr({src: url, width: width, height: height});
                });
              }
              //]]>
              </script>


              You can see my post on another forum here for details http://www.jqueryhelp.com/viewtopic.php?p=2853#2853