WordPress.org

Ready to get started?Download WordPress

Forums

Pop-up welcome intro image, fade out? (10 posts)

  1. aliceralph
    Member
    Posted 4 years ago #

    I have a client who wanted (shock, horror!) a FLASH INTRO...ewww.. I have talked him out of Flash because of SEO issues, but agreed as a compromise that I would try to include some sort of snazzy welcome that shouldn't interfere with the SEO.

    What I would like to do is this:

    When a new visitor first visits index.php there is a full-screen pop up image which fades jquery stylee into a second image, and then fades away completely to reveal the main index page. Ideally if this could only happen the first time that they visit index.php, and not when they click back onto that page from another via the menu.

    Could anybody help point me to anything that might help me achieve this? I've used jquery before but nothing quite like this and can't seem to find anything existing.

    Thanks!

  2. gholem
    Member
    Posted 4 years ago #

    I'm looking for the same thing. I know Wp doesn't allow java script, but I really need to implement welcome image pop=up on frontpage.

    Is there any way I con do this?

  3. montymetzger
    Member
    Posted 4 years ago #

    Hello Gholem and aliceralph,

    this is excatly what I am looking for aswell. Is you website already online. can I see your solution?
    Do you work with cookies?
    How did you realize it?

    Thanks. M

  4. smigdig
    Member
    Posted 4 years ago #

    Any luck on this?

    I'm also looking for a one time image to load on startup... and the user could click and X to close it - displaying it once only.

    Thanks!
    Adam

  5. jacoblowe2.0
    Member
    Posted 4 years ago #

    its pretty simple to get one a single image or a string of text.
    A easy way is to make a div that will overlay the page when visible. Here is the HTML that i use

    <div id="introContainer">
    <div id="introContent">
    //some content
    </div>
    </div>

    Put this below all the content so that it will layer on top of everything. You can get fancy and make it in a separate document and include it the bottom of the footer before the body tags
    The CSS for the overlay I used is

    #introContainer{
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: #ffffff;
     display: none;
    }
    
    #introContent{
     position: absolute;
     width: 100%;
     top: 30%;
     text-align: center;
    }

    this will cover up existing content. If youd like to see this div take out display:none. There is still some problems with scrolling, but that problem can be fixed by making the div scroll with the page.

    Of course attach jquery. Then the javascript i use to make the intro effect is

    jQuery(document).ready(function(){
    
     $('div#introContainer').show();
     window.setTimeout(function() {
         $('div#introContainer').fadeOut('slow');
       }, 5000);
    
    });

    This has a timer on it. You can also take out the timer and use a simple .click event to fade out the page. I also made jQuery make div visible so that if a users browser doesnt have javascript they just dont see the intro page at all.

  6. paulhastings0
    Member
    Posted 4 years ago #

    I've been looking for something like this as well. I think this plugin may fulfill the idea:

    http://wordpress.org/extend/plugins/welcome-announcement/

  7. paulhastings0
    Member
    Posted 4 years ago #

    Oh, and for anyone following the guide above, make sure to replace the line jQuery(document).ready(function(){

    with

    jQuery(document).ready(function($){

    Notice the "$" symbol. That's to keep the usual jQuery "$" shortcut from conflicting with other parts of WordPress code.

  8. jacoblowe2.0
    Member
    Posted 4 years ago #

    actually you can use just

    $(function(){
    or
    jQuery(function(){

    Thanks for the tips

    I actually just finished a project like this for one of my clients. I set it up for a multiple page refresh in case you page is not loading from ajax. The key is in the cookies. I'm putting some of the coding together in a jquery plugin. Ill post it up here after its done.

  9. jacoblowe2.0
    Member
    Posted 4 years ago #

    If anyone is still interested in this i wrote a blog on it

    http://redeyeops.com/content/flashy-intro-pt-2-handling-multi-page-loads/

  10. ywamer
    Member
    Posted 4 years ago #

    Anybody have an update on this with either WP 2.9.2 or WP3?

    The Welcome Announcement plugin doesn't work on 2.9.2 - and I've tried finding the jQuery(document).ready(function(){ that paulhastings0 mentioned, with no luck.

    Ant ideas on a simple plugin solution?

Topic Closed

This topic has been closed to new replies.

About this Topic