Need a welcome popup script with image for website

Sidebar Sidebar
Pleasant

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

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

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
Gameover said:
That is fairly simply, use fancybox script and trigger it automatically after 5 or 10 seconds.
Click to expand...
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

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>
Click to expand...
 
AbdullahShafiq

AbdullahShafiq

Talented
May 24, 2013
52
0
11
Pleasant said:
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 ?
Click to expand...
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

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
AbdullahShafiq said:
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'
})
}
        });
Click to expand...
 
Pleasant

Pleasant

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


Sent from Tapatalk for Windows 10
Click to expand...
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

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

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
MonoQ said:
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>
Click to expand...
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

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

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
AbdullahShafiq said:
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>
Click to expand...
but where is the elastic command ?
 
AbdullahShafiq

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

Pleasant

Expert
Jul 19, 2008
15,304
13
44
Dubai, UAE
AbdullahShafiq said:
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.
Click to expand...
No no it was working as a Poup without click trigger i am only having difficulty animating it
 
You must log in or register to reply here.

New posts

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
  • NaNoW NaNoW:
    skyrim
    Link
  • NaNoW NaNoW:
    is one game, 10 releases
    Link
  • NaNoW NaNoW:
    GTA 5
    Link
  • faraany3k faraany3k:
    Which Franchise has 5 releases but only two games. Last of Us
    Link
  • faraany3k faraany3k:
    Shadowdragoo said:
    no idea how that is a steal by wasting 3500 rupees per month and for games that are removed before you can finish them off.xbox gamepass is garbage with no local prices
    Click to expand...
    why you are paying american rates in Pakistan. Search cheaper region like Turkey. 13k for 13 months. Ms does not care
    Link
  • NaNoW NaNoW:
    :D
    Link
  • S Shadowdragoo:
    no idea how that is a steal by wasting 3500 rupees per month and for games that are removed before you can finish them off.xbox gamepass is garbage with no local prices
    Link
  • faraany3k faraany3k:
    Just finished Diablo 4 season in hurry to play Fallout 4 but gamepass released another banger in the form of Star Wars on April 25th. Gamepass is a steal man.
    Link
  • Necrokiller Necrokiller:
    EternalBlizzard said:
    Is it just me or people lately seem to defend every bad game design decision made by the devs and try to give bullshit reasons for that? Or perhaps it's because I'm on reddit and discord :ROFLMAO:
    Click to expand...
    There are no such thing as "bad design" bro, its all "artistic vision" now :ROFLMAO:
    • Haha
    Reactions: EternalBlizzard
    Link
  • EternalBlizzard EternalBlizzard:
    Is it just me or people lately seem to defend every bad game design decision made by the devs and try to give bullshit reasons for that? Or perhaps it's because I'm on reddit and discord :ROFLMAO:
    • Haha
    Reactions: Necrokiller
    Link
  • B Baghi:
    vos
    Link
  • C cattoboee:
    yo
    Link
  • G gorillageneral:
    It's me cattoboee
    Link
  • G gorillageneral:
    It's me tattooed
    Link
  • G gorillageneral:
    Yo
    Link
  • C cattoboee:
    testing
    Link
  • NaNoW NaNoW:
    true
    Link
  • faraany3k faraany3k:
    Add 20 years into your age. Congrats you are in Playstation 8 era. Probably a VR streaming headset in a form of glasses.
    Link
  • S Shehryar89:
    Hi any repair shop for Nintendo Switch in Isb/ Rwp? The console is not charging. Anybody? Who can help in this regard.
    Link
  • iampasha iampasha:
    Ewww brother ewww, what's that brother? Whats that?
    Link
  • Necrokiller Necrokiller:
    Senua Saga 30fps both on Series S and X. Gotta feel bad for the Series X owners.
    Link
  • Necrokiller Necrokiller:
    Imagine buying a Pro console and still getting 30fps in GTA 6 😬
    Link
  • faraany3k faraany3k:
    So this console gen was like putting a SSD in an old laptop
    Link
  • LordIT LordIT:
    does anyone know a reliable vendor in lahore for laptop batteries?
    Link
  • XPremiuM XPremiuM:
    I remember when PG used to be such an active site. Now it's barely alive.
    Link
    NaNoW NaNoW: skyrim
    Top Bottom