[Gary LParticipant]

http://abetterspot.com/trinityshine/

You’ll notice that as my one page site loads, there is a Verse of the Day (VOD) from BibleGateway.com using your Raw JS.

Is there a way to “spice” things up with the VOD opening in your Lightbox & upon closing the Lightbox; the page goes directly to the first menu item “Welcome”?

[RadModerator]

Hi Gary,

Thank you for dropping by!

I can’t find the lightbox, or you mean setting up lightbox for the verse’s link?

Then modify your link to this :

<a class="verse-lightbox" href="https://www.biblegateway.com/passage/?version=MSG&search=Psalm 119:93">Psalm 119:93</a>
<a class="verse-lightbox" href="https://www.biblegateway.com/versions/index.php?action=getVersionInfo&vid=65&lang=2">Copyright © 1993, 1994, 1995, 1996, 2000, 2001, 2002 by Tyndale</a>
[lightbox selector=".verse-lightbox" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]

Then add this code at your customizer’s custom javascript.

jQuery(function($){

$('.ilightbox-close').click(function(e){

e.preventDefault();

if($('.ilightbox-container iframe[src*="biblegateway.com"]').length > 0 ) $('#menu-item-7409 a').click();

});

});

So it will trigger “Welcome” menu when closing lightbox that contains verses from biblegateway.com

Cheers!

[Gary LParticipant]

I do not understand.

Currently, I am using your Backend Editor/Raw Javascript with the following script:

<script type=”text/javascript” language=”JavaScript” src=”http://new.biblegateway.com/votd/votd.write.callback.js”>
</script>
<script type=”text/javascript” language=”JavaScript” src=”http://new.biblegateway.com/votd/get?format=json&version=MSG&callback=BG.votdWriteCallback”>
</script>
<!– alternative for no javascript –>
<noscript>
<iframe framespacing=”0″ frameborder=”no” src=”http://new.biblegateway.com/votd/get?format=html&version=NIV”>View Verse of the Day</iframe>
</noscript>

This displays a different Bible verse each day (VOD) at the top of my site. The above code was obtained directly from:
https://www.biblegateway.com/usage/votd/custom_votd/

It would appear that your code would always bring up the same bible verse every day. No?

How can I get the above script outcome (VOD) to open in a lightbox upon my site page load?

Exactly where would I place your code?

I understand your instruction for “add this code at your customizer’s custom javascript”

[RadModerator]

Hi Gary,

Oh I see, you need a lightbox/popup upon page load and when closed it will just scroll to welcome section. Unfortunately that can’t be done by simple css and script. You will have to do some template customization, you may consult a developer OR use a 3rd party plugin that offer lightbox live binding.

Thank you.

[Gary LParticipant]

OK, thanks.

Can I at least have Bible Verse of the Day (script within your raw JavaScript) open in your lightbox upon page load?

Thanks!

[RadModerator]

Hi Gary,

Sure!

1. First create a page with Blank – No Container | No header, No Footer template and name it “Daily Verse” with slug of “daily-verse”.

2. Then add your verse code at that new page.

<script type="text/javascript" language="JavaScript" src="http://new.biblegateway.com/votd/votd.write.callback.js">
</script>
<script type="text/javascript" language="JavaScript" src="http://new.biblegateway.com/votd/get?format=json&version=MSG&callback=BG.votdWriteCallback">
</script>
<!– alternative for no javascript –>
<noscript>
<iframe framespacing="0″ frameborder="no" src="http://new.biblegateway.com/votd/get?format=html&version=NIV">View Verse of the Day</iframe>
</noscript>

3. Add this code at your child theme’s functions.php

add_action('wp_footer', function(){
echo do_shortcode('[button shape="square" size="mini" float="none" info="none" info_place="top" info_trigger="hover" class="verse_button" href="http://abetterspot.com/trinityshine/daily-verse/" ]Verse PopUp[/button]
[lightbox selector=".verse-lightbox" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]');
?>
<style>.verse_button { display:hidden; }</style>
<script>
jQuery(function($){

$(document).ready(function(){

$('.verse-lightbox').click();

$('.ilightbox-close').click(function(e){

e.preventDefault();

if($('.ilightbox-container iframe[src*="/daily-verse/"]').length > 0 ) $('#menu-item-7409 a').click();

});

});

});
</script>
<?php
});

3. Save and upload, and be sure change the url when moving live.

Cheers!

[Gary LParticipant]

Created page…no problems.
Added your code to child theme’s functions.php.
==
Using a different browser (CHROME) opened one page site at: http://abetterspot.com/trinityshine/
and the site was badly broken. No menu navigation, no content.
==
Removed your code from the above functions.php and all good again.
==
I am looking for the Verse of the Day (VOD) to open from your “Raw JS” & open automatically within a LIGHTBOX upon page load of our site at: http://abetterspot.com/trinityshine/

Your help is appreciated!

[Paula SMember]

No worries, Gary. Glad to be of help.

Have a great weekend!

[Gary LParticipant]

Have a great weekend also!

We are not communicating. The problem still exists. Please help.

The new page was created…no worries. However, your “Add this code at your child theme’s functions.php” broke my site & I had to revert the child’s functions.php back to the original.

Can you please review this problem. All I want is for the Daily Verse to automatically open in your Lightbox on Home page load ONCE per visit to site AND if possible code to prevent the lightbox from reopening for that visitor for 1 hour.

Note: I am playing around with some other premium lightboxes, but would much prefer to avoid conflicts with X-Theme’s built-in iLightbox.

[RadModerator]

Hi Gary,

Thank you for writing in!

The code for child theme’s functions.php is working on my end and not causing any error, but yes lightbox won’t work and won’t bind with hidden button.

For this, you might need to use other lightbox plugins.

Thank you.

[Author]

Posts