Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    "Loading" Icon Not Working

    Simply put, I can't get the "loading" icon to appear while the gallery images are being loaded:

    http://www.thomashanser.com/product.html

    I re-purposed a lot of code and scripts from this site I liked:

    http://www.leoacker.com/portfolioi.php

    (His pages are .php, mine are .html. I can't see that this is the problem - the scripts aren't writing anything to a database.)

    The body tag is calling the class "loading:"

    <body id="wrapper" class="loading">

    Both wrapper and "loading" are referenced in js/e2sDesk.js

    The loader.gif is located in /images and the path is correct in my sylesheet.css:

    .loading {
    background: transparent url(images/loader.gif) 50% 50% no-repeat;
    }


    Adding the class loading to the div id=gallery only results in the loader.gif being displayed during image transitions, as if it's positioned BEHIND the gallery div all the time. So that's not it! I need it to appear only while each and every image has loaded.

    This "loading" icon feature is critical and the main reason I wanted to use this gallery. I'll keep tinkering with it but I could use some help - maybe someone else has coded this before?

    Thank you!

  • #2
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by thanser View Post
    maybe someone else has coded this before?

    Thank you!
    A basic demo:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #content{
                    display: none;
                }
            </style>
            <script type="text/javascript">
                window.onload=function(){
                    document.body.removeChild(document.getElementById('divLoading'));
                    document.getElementById('content').style.display = 'block';
                }
            </script>
        </head>
        <body>
            <div id="divLoading"><img src="loading.gif" alt="" /></div>
            <div id="content">
                <h1>Put all you page content in this div</h1>
            </div>
        </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Close...but the addition of my gallery scripts causes this to break:

    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/e2sDesk.js" defer></script>

    Remove these scripts and your code DOES work.

    How do I get around this?

  • #4
    Banned
    Join Date
    Oct 2012
    Posts
    81
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by thanser View Post
    Remove these scripts and your code DOES work.

    How do I get around this?
    The example I posted doesn't need jquery.

    I don't know how to get around your jquery problem without spending a lot of time going through your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •