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
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts

    jquery onload trigger

    I have this jquery script which makes a lightbox effect occur:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    $.fancybox.center();
    //    $("#popup").trigger('click');
    // });
     $("#popup").fancybox({
    
    	 'width'		: 835,
    	 'height'		: 510,
    	 'autoScale'		: true,
    	 'autoDimensions'	: true,
    	 'transitionIn'		: 'elastic',
    	 'transitionOut'	: 'fade',
    	 'overlayColor'		: '#FC0',
    	 'type'			: 'iframe'
     });
     });
    </script>
    It works fine when I click the image that has the id "popup" (which references a small html page).

    But how do I make the lightbox effect occur onload?

    That is, automate the image click in jquery when the page loads?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Does point 6 not apply here?

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I guess. That's where I got the trigger bit from.

    But I can't get it to work. Using the manual method looks horribly dodgy to me:

    Code:
    jQuery(document).ready(function() {
    	$.fancybox(
    		'<table cellpadding="0" cellspacing="0" width="834px" height="500px" style="border-width:2px; border-style:solid; color:#000; background-image: url('images/popup2.png')">
    			<tr>
    				<td rowspan="3" width="59%">
    				&nbsp;</td>
    				<td width="29%" height="166" align="center" style="vertical-align: bottom" rowspan="2">
    				<img border="0" src="images/capped.gif" style="float: right; border-width: 0" width="156" height="41"></td>
    				<td width="12%" height="46" align="center" style="vertical-align: top">
    				&nbsp;</td>
    			</tr>
    			<tr>
    				<td width="12%" height="120" align="center" style="vertical-align: top">
    				</td>
    			</tr>
    			<tr>
    				<td width="40%" colspan="2">&nbsp;</td>
    			</tr>
    		</table>',
    		{
    	 'width'		: 835,
    	 'height'		: 510,
    	 'autoScale'		: true,
    	 'autoDimensions'	: true,
    	 'transitionIn'		: 'elastic',
    	 'transitionOut'	: 'fade',
    	 'overlayColor'		: '#FC0',
    	 'type'		        : 'iframe'
    		}
    	);
    });
    ...the trigger idea looks best - with the content of the lightbox in a separate html page.
    Last edited by tpeck; 07-18-2013 at 01:42 PM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    815
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I've figured it out - the answer in my case is to add

    .click();

    to the end of the fancybox function, thus:

    Code:
    $(document).ready(function() {
    $.fancybox.center();
     $("#popup").fancybox({
    
    	 'width'		: 835,
    	 'height'	        : 510,
    	 'autoScale'		: true,
    	 'autoDimensions'	: true,
    	 'transitionIn'		: 'elastic',
    	 'transitionOut'	: 'fade',
    	 'overlayColor'		: '#FC0',
    	 'type'			: 'iframe'
     }).click();
     });
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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