Need a welcome popup script with image for website

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
Hi
i am looking for Welcome popup script for one of my friends website is there any one can help me with it
i need to put welcome pop up there
the site is based on HTML CSS and Javascript its not wordpress website
plus i am noob at scripting knows just bit of html only

i need welcome popup something like that when you open this website
Christopher S. Penn Blog - Awaken Your Superhero
 

Gameover

Well-known member
Nov 12, 2007
1,749
2
43
Lahore
That is fairly simply, use fancybox script and trigger it automatically after 5 or 10 seconds.
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
That is fairly simply, use fancybox script and trigger it automatically after 5 or 10 seconds.
Hi i have put the script on html file using this tutorial
https://www.youtube.com/watch?v=Suxu_nG7R1M

but this tutorial only tells about the method of using fancybox on click the images like a gallery where as i want it to open automatically when the website loads
can you link me to some tutorial or script for that
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
Great i just pulled it off
(2t)

<div id="example2" style="display:none;">
<img src="http://www.web.com/image.jpg" />
</div>

<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#example2");
});
</script>
 

AbdullahShafiq

Talented
May 24, 2013
52
0
11
Yeah but now i am stuck with animating it i want the poup to animate a bit like sliding from top or left or scaling in
how to do that now ?
fancy box only have three animation effect elastic, fade or none, You can use this,

$(document).ready(function() {
$("#example2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic'
})
}
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
fancy box only have three animation effect elastic, fade or none, You can use this,

Code:
$(document).ready(function() {
    $("#example2").fancybox({
	   openEffect  : 'elastic',
       closeEffect	: 'elastic'
       })
}[/QUOTE]

i have added this code now Fancy box disappeared

<div id="EventBanner" style="display:none;">
        <img src="images/event.jpg" /></a>
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#EventBanner");
$("#EventBanner").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic'
})
}
        });
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
or u can use slideDown() or slideUp() in JS to do the same


Sent from Tapatalk for Windows 10
How and where to put

This the code i am using right now at the top of HTML file BEFORE the BODY tags
Code:
<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>

<!-- Add jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="javascript/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="javascript/fancybox/source/jquery.fancybox.pack.js"></script>


<a href="https://www.google.com" target="_blank">
<div id="EventBanner" style="display:none;">
        <img src="http://www.pakgamers.com/forums/images/event.jpg" /></a>
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#EventBanner");
        });

    </script>
 
Last edited:

MonoQ

Happy Lantern
Apr 1, 2013
643
1
23
Australia
take a look at this....using it on one of my sidebars....so copying it exact (IT IS JUST FOR THE SLIDING ANIMATION)....im not aware of the fancybox thingie though..

Code:
<li>
            <div class="custom-button">
                <a href="#" class = "custom-panel-collapsed" onclick="return false" id="accountClick" data-toggle="false" data-placement="right" title="" data-original-title="Settings">
                    <i class="fa fa-info-circle fa-fw"></i>  <span class="title">Settings</span>
                </a>


                <div class="custom-panel-body" style="display:none;">
                    <ul style="list-style-type:none;">
                        <li>
                            <a class="small-font" href="admin-calendar.php" data-toggle="tooltip" data-placement="right" title="" data-original-title="Calendar">
                                <i class="fa fa-calendar fa-fw"></i><span class="title"> Calendar</span>
                            </a>
                        </li>
                        <li>
                    </ul>
                </div>
            </div>
        </li>

<script type="text/javascript">
    jQuery(function ($) {
        $('.custom-button #accountClick').on("click", function (e) {
            if ($(this).hasClass('custom-panel-collapsed')) {
                // expand the panel
                $('.custom-button #accountClick').parents('.custom-button').find('.custom-panel-body').slideUp();
                $('.custom-button #accountClick').addClass('custom-panel-collapsed');
                $(this).parents('.custom-button').find('.custom-panel-body').slideDown();
                $(this).removeClass('custom-panel-collapsed');
            }
            else {
                // collapse the panel
                $(this).parents('.custom-button').find('.custom-panel-body').slideUp();
                $(this).addClass('custom-panel-collapsed');
            }
        });
    });
    $</script>
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
take a look at this....using it on one of my sidebars....so copying it exact (IT IS JUST FOR THE SLIDING ANIMATION)....im not aware of the fancybox thingie though..

Code:
<li>
            <div class="custom-button">
                <a href="#" class = "custom-panel-collapsed" onclick="return false" id="accountClick" data-toggle="false" data-placement="right" title="" data-original-title="Settings">
                    <i class="fa fa-info-circle fa-fw"></i>**<span class="title">Settings</span>
                </a>


                <div class="custom-panel-body" style="display:none;">
                    <ul style="list-style-type:none;">
                        <li>
                            <a class="small-font" href="admin-calendar.php" data-toggle="tooltip" data-placement="right" title="" data-original-title="Calendar">
                                <i class="fa fa-calendar fa-fw"></i><span class="title"> Calendar</span>
                            </a>
                        </li>
                        <li>
                    </ul>
                </div>
            </div>
        </li>

<script type="text/javascript">
    jQuery(function ($) {
        $('.custom-button #accountClick').on("click", function (e) {
            if ($(this).hasClass('custom-panel-collapsed')) {
                // expand the panel
                $('.custom-button #accountClick').parents('.custom-button').find('.custom-panel-body').slideUp();
                $('.custom-button #accountClick').addClass('custom-panel-collapsed');
                $(this).parents('.custom-button').find('.custom-panel-body').slideDown();
                $(this).removeClass('custom-panel-collapsed');
            }
            else {
                // collapse the panel
                $(this).parents('.custom-button').find('.custom-panel-body').slideUp();
                $(this).addClass('custom-panel-collapsed');
            }
        });
    });
    $</script>
well i am noob i dont know about programming looking at it and figuring it out wont help me
if you can add the line on my script i posted above would help me
Thanks
 

AbdullahShafiq

Talented
May 24, 2013
52
0
11
Here is exact working code, Just replace it with your image or text.

Code:
<!DOCTYPE html><!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>


<link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen"/>


<!-- Add jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
        $(".fancybox").fancybox().trigger('click');
	});
</script>


</head>


<body>
<a class="fancybox" rel="group" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg"></a>
</body>


</html>
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
Here is exact working code, Just replace it with your image or text.

Code:
<!DOCTYPE html><!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>


<link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen"/>


<!-- Add jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>


<script type="text/javascript">
	$(document).ready(function() {
        $(".fancybox").fancybox().trigger('click');
	});
</script>


</head>


<body>
<a class="fancybox" rel="group" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg"></a>
</body>


</html>
but where is the elastic command ?
 

AbdullahShafiq

Talented
May 24, 2013
52
0
11
That Elastic option is not working in this plugin, Don't know the reason but its not working may be its hard coded. BTW you picked wrong plugin for popup, This won't allow popup at page start, Instead it trigger on click, I made the "Jugarh" here. You should use Bootstrap Modal box for this type of work (JavaScript · Bootstrap). But it will need some skills to properly use it.
 

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
That Elastic option is not working in this plugin, Don't know the reason but its not working may be its hard coded. BTW you picked wrong plugin for popup, This won't allow popup at page start, Instead it trigger on click, I made the "Jugarh" here. You should use Bootstrap Modal box for this type of work (JavaScript · Bootstrap). But it will need some skills to properly use it.
No no it was working as a Poup without click trigger i am only having difficulty animating it
 
General chit-chat
Help Users
We have disabled traderscore and are working on a fix. There was a bug with the plugin | Click for Discord
  • No one is chatting at the moment.
  • EternalBlizzard EternalBlizzard:
    Why is everybody so hyped up about this overrated piece of trash called unicorn overlord
    Link
  • faraany3k faraany3k:
    I dont think games have looked any better since 2019 onwards and they are performing worse and worse. Game developers have really dropped the ball.
    Link
  • Necrokiller Necrokiller:
    Consoles can't even catch a break in titles developed exclusively for them 😢
    Link
  • Necrokiller Necrokiller:
    "All of this lends the game distinctly last-gen look at times, which is compounded by image quality and frame-rate issues."
    Link
  • Necrokiller Necrokiller:
    Link
  • Chandoo Chandoo:
    no jokes.
    Link
  • Chandoo Chandoo:
    faraany3k said:
    So while Playing Control, I found a journal which said that a bathroom is missing in Islamabad Beurue of Control. With Alan Wake and Control seems to be connected worlds. Even our city is in the universe as well. No wonder those Trail 5 and Trail 6 are haunted.
    did you know you can see @NaNoW credited in the game too ? :p
    Link
  • faraany3k faraany3k:
    So while Playing Control, I found a journal which said that a bathroom is missing in Islamabad Beurue of Control. With Alan Wake and Control seems to be connected worlds. Even our city is in the universe as well. No wonder those Trail 5 and Trail 6 are haunted.
    Link
  • EternalBlizzard EternalBlizzard:
    faraany3k said:
    What is peoples obsession with Battle Royale genre. 6 minutes to find a match, 3 minutes to setup a match, 2 minutes to land, 10 minutes for scavanging maybe 2 3 gunfigts and its over. Multiplayer landscape is looking absolute dogshit.
    I tried playing Apex Legends once. Couldn't find a gun for 5 minutes straight. If I found a gun, I couldn't find the right ammo for it. Got killed fighting with my fists. Uninstalled it the next day.
    Link
  • faraany3k faraany3k:
    What is peoples obsession with Battle Royale genre. 6 minutes to find a match, 3 minutes to setup a match, 2 minutes to land, 10 minutes for scavanging maybe 2 3 gunfigts and its over. Multiplayer landscape is looking absolute dogshit.
    • Like
    • Haha
    Reactions: iampasha and EternalBlizzard
    Link
  • M muneebjahangir:
    skip the villain arc
    Link
  • EternalBlizzard EternalBlizzard:
    iampasha said:
    I usually stay away from animes. Vinland saga changed the way i look at my life, and my experiences within. I recommend every breathing human being to watch this animated masterpiece at least once fromstart to finish.
    After I watched it, I never felt like i watched a show. It was a friggin journey. I got way too attached to Thorfinn and seeing him grow up and find himself and get rid of all the negativity inside of him was just pure bliss.
    Link
  • iampasha iampasha:
    EternalBlizzard said:
    Vinland Saga > Berserk
    I usually stay away from animes. Vinland saga changed the way i look at my life, and my experiences within. I recommend every breathing human being to watch this animated masterpiece at least once fromstart to finish.
    • Like
    Reactions: EternalBlizzard
    Link
  • Necrokiller Necrokiller:
    Crapcom's RE Engine expose hogaya saaeen. This shit ain't worth experiencing on any platform. 🤷‍♂️
    Link
  • Chandoo Chandoo:
    When a $399 console provides the same experience as a 4090. Yikes indeed saeen :sneaky:
    Link
  • Necrokiller Necrokiller:
    that's a yikes saaaen
    Link
  • Necrokiller Necrokiller:
    " Both PS5 and Series X have an unlocked frame-rate here, with performance that generally lies between 30fps and 45fps. That makes for a stuttering and inconsistent output in general play, no matter what you are doing at any given time."
    • Haha
    Reactions: EternalBlizzard
    Link
  • Link
  • EternalBlizzard EternalBlizzard:
    Vinland Saga > Berserk
    • Like
    Reactions: iampasha
    Link
  • faraany3k faraany3k:
    I absolutely hate parry and Sekiro made me love it, i hate sci fi and Mass Effect made me love it. This is the definition of genre defining experiences.
    Link
  • Necrokiller Necrokiller:
    Forbidden West Complete Edition now available on your fav websites. And Nixxes showed Crapcom how it's done 👍
    Link
  • Necrokiller Necrokiller:
    RE Engine is just utter shit for anything other than corridor design remakes
    Link
  • Necrokiller Necrokiller:
    This is a console first developer. LMAO
    Link
  • Link
  • faraany3k faraany3k:
    With how great cod warzone has translated onto mobile. Mainstream Consoles have lost its value even further. Maybe console gaming was associated with TVs and how TV is not the primary source of media consumption anymore, consoles will lose its 200 million core audiences even further.
    Link
    EternalBlizzard EternalBlizzard: Why is everybody so hyped up about this overrated piece of trash called unicorn overlord