Solved

Open fancybox automatically on page load

Posted on 2013-01-18
2
1,043 Views
Last Modified: 2013-01-21
I have code below to open Fancybox For Wordpress on page load and it's loading but the div cannot display content - just says "The requested content cannot be loaded.
Please try again later." My code (which I'm putting all in the page template) is:
<div id="newsregwrapper">
<div id="newsreg">
...content...
</div>
</div>
<script type="text/javascript">
       var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("#newsreg").fancybox().trigger("click");
}); </script>

I know the quirk of FB for WP is you have to surround the targeted div in a wrapper (in this case newsregwrapper) but not sure you need it for this method (only from a link?).

So do I need the wrapper and what is the correct code please...thanks.
0
Comment
Question by:alexmaestro100
2 Comments
 
LVL 9

Accepted Solution

by:
WebDevEM earned 500 total points
ID: 38794179
Hi... I'm don't use WordPress, but I have an example of opening FancyBox on page load at http://jsfiddle.net/webdevem/5EV8r/.  What it does is I have a hidden link which is set up to call the FB, then simulate a click at page load time.  I think to merge this with your code would be something along these lines:
<a class="fancyTrigger" href="#newsreg">
<div id="newsregwrapper">
<div id="newsreg">
...content...
</div>
</div>
<script type="text/javascript">
       var $j = jQuery.noConflict();
$j(document).ready(function() {
    j(".fancyTrigger").fancybox();
    j(".fancyTrigger").trigger('click');
}); </script>

Open in new window

I hope this at least gets you on the right track, since I don't know the WordPress part of it.
0
 

Author Closing Comment

by:alexmaestro100
ID: 38800433
Perfect thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now