The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

loading effect on spoiler images

View previous topic View next topic Go down

loading effect on spoiler images

Post by isnanz on Sat Aug 14, 2010 6:27 am

how to create a loading effect on the spoiler that contains images?

loading images that I use:
avatar
isnanz
Forumember

Male Posts : 206
Reputation : 0
Language : Indonesian
Location : Indonesia

http://help.forumotion.com

Back to top Go down

Re: loading effect on spoiler images

Post by ankillien on Sat Aug 14, 2010 7:22 am

Hello,

Here is a script that can help you...
http://jqueryfordesigners.com/image-loading/

It will require template editing.
avatar
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: loading effect on spoiler images

Post by isnanz on Sat Aug 14, 2010 7:39 am

@ankillien wrote:Hello,

Here is a script that can help you...
http://jqueryfordesigners.com/image-loading/

It will require template editing.

I will try..
avatar
isnanz
Forumember

Male Posts : 206
Reputation : 0
Language : Indonesian
Location : Indonesia

http://help.forumotion.com

Back to top Go down

Re: loading effect on spoiler images

Post by mallowag3124 on Thu Aug 26, 2010 7:44 am

can u make it simple....?
im a newbie
cant understand.... bwi

mallowag3124
Forumember

Posts : 79
Reputation : 0
Language : english

http://desucult.omgforum.net/

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Thu Aug 26, 2010 8:31 am

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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Image Loading</title>
    <style type="text/css" media="screen">
    <!--
        BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
        H1 { margin-bottom: 2px; }

        DIV#loader {
            border: 1px solid #ccc;
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

        DIV#loader.loading {
            background: url(/images/spinner.gif) no-repeat center center;
        }
    -->
    </style>

    <script src="/js/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    <!--
    $(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
    });
   
    //-->
    </script>
</head>
<body id="page">
    <h1>Image Loading</h1>
    <p>This demonstration shows how to pre-load an image in the background while showing a loading screen.  It also supports loading the image, then running additional code, such as Ajax requests before finally showing the image.</p>
    <p><a href="http://jqueryfordesigners.com/image-loading/">Read the article this demonstration relates to</a></p>
    <div id="loader" class="loading">

    </div>
    <p><a href="http://www.flickr.com/photos/remysharp/">More photos...</a></p>

    <!-- this is just a way to simulate a delay (the script will sleep for 2 seconds then response) -->
    <script src="image-load-demo.php?action=delay" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Here is the source code for it.. what part do I use?

Edit while I am at it.. how about images in general and not just spoiler images.
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by mallowag3124 on Fri Aug 27, 2010 7:31 am

where should i place this?

mallowag3124
Forumember

Posts : 79
Reputation : 0
Language : english

http://desucult.omgforum.net/

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Fri Aug 27, 2010 7:31 am

Not sure wait for a reply.
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by mallowag3124 on Fri Aug 27, 2010 7:33 am

ok...
ill w8 for it

mallowag3124
Forumember

Posts : 79
Reputation : 0
Language : english

http://desucult.omgforum.net/

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Fri Aug 27, 2010 9:35 am

I also noticed this code has the personal information and URL to the picture and such. Hmm scratch
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by mallowag3124 on Sat Aug 28, 2010 3:04 am

uhmm...
i hope someone answer this?

mallowag3124
Forumember

Posts : 79
Reputation : 0
Language : english

http://desucult.omgforum.net/

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Sat Aug 28, 2010 4:07 am

Not sure.. it will come around eventually just takes a while.
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Mon Aug 30, 2010 6:23 am

bump
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by zachoftheglen2 on Mon Aug 30, 2010 10:07 pm

Bump for you Smile
avatar
zachoftheglen2
Forumember

Posts : 119
Reputation : 0
Language : English

Back to top Go down

Re: loading effect on spoiler images

Post by mallowag3124 on Tue Aug 31, 2010 6:28 am

men....
i hope something happens!

mallowag3124
Forumember

Posts : 79
Reputation : 0
Language : english

http://desucult.omgforum.net/

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Tue Aug 31, 2010 9:07 pm

bump
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Re: loading effect on spoiler images

Post by blindbat1457 on Fri Sep 03, 2010 5:52 pm

bump
avatar
blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum