Code for a lightbox popup=iframe of a link in widget-Karma Theme WordPress
- SOLVED
Hi i need to get the light-box i fame function that's built into [[LINK href="http://themes.truethemes.net/Karma/"]]Karma Theme.[[/LINK]] Into one of my widgets for a daily Bible reading plan currently it links to [[LINK href="http://www.biblegateway.com/"]]biblegateway.com[[/LINK]], The plug in takes the reader through the bible in a year.
see http://wordpress.org/extend/plugins/bible-reading-plan/.
However i want people to simply be able to click the link read the days verse from bible gateway in an i frame light-box ... then carry on. The current section of code that deals with the links in the widget looks like this.
function ft_brp_get_todays_scripture(){
global $wpdb;
$today = date('z');
(int) $today;
$today++;
$sql = "SELECT scripture FROM `".$wpdb->prefix."ft_brp` WHERE day = $today";
if ( $verse = $wpdb->get_row($sql) ){
echo "<p class='ft_brp_scripture'>";
if ( get_option('ft_brp_widget_linked',true) == 1 ){
echo "<a href='http://www.biblegateway.com/passage/?search=".$verse->scripture."&version=".get_option('ft_brp_widget_version')."'>";
}
echo $verse->scripture;
if ( get_option('ft_brp_widget_linked',true) == 1 ){
echo "</a>";
}
echo "</p>";
echo "<p class='ft_brp_provided'><small><a href='http://betweenthetimes.com/bible-reading-plan/'>View the complete years scriptures here</a></small></p>";
}
[[LINK href="http://betweenthetimes.com/bible-reading-plan/"]]You can see the widget working in the side bar here. And by the looks of it is the original site the plugin was built for
[[/LINK]]
Was sent here for assistance by Miguel G from true themes as my question is outside the scope of there standard help desk.
Answers (2)
Francisco Javier Carazo Gil answers:
Hi,
I think <strong>Lightbox</strong> can't be used for this purpose. The documentatation (http://www.huddletogether.com/projects/lightbox2/#how) only explain to use Lightbox with images.
I advise you to use <strong>jQuery Dialog</strong> (http://jqueryui.it/demos/dialog). It's highly customizable.
To use into WordPress yo'll have to do this:
<strong>PHP</strong>:
wp_enqueue_script('jquery-ui-dialog');
wp_enqueue_style("wp-jquery-ui-dialog");
<strong>JS</strong>:
var dlg = $("<div id='myFancyDialog' /&mt;")
.text('iframe here')
.appendTo("body");
dlg.dialog({
'dialogClass' : 'wp-dialog',
'modal' : true,
'autoOpen' : false,
'closeOnEscape' : true,
'buttons' : [
{
'text' : 'Close',
'class' : 'button-primary',
'click' : function() {
$(this).dialog('close');
}
}
]
}).dialog('open');
To use iframe in WP you will need this one also: http://wordpress.org/extend/plugins/embed-iframe/
Charisma comments:
Hi
[[LINK href="http://themes.truethemes.net/Karma/portfolio/4-column"]]You can see here[[/LINK]] on the theme demo they have a picture sitting in a frame and when clicked it shows the theme forest page in an iframe.
I have seen some code in the theme knowledge base that explains how to make the iframe larger.
So my thinking was everything needed is already there just needs some code to get the iframe to pop up from the link in the widget instead of a picture.
Here is a copy of the iframe dimensions post
<blockquote>Access the jquery.prettyPhoto.js file in your server found in wp-content/themes/Karma/truethemes_framework/js/ (must be done via FTP)
Open the file and look in line 14 for the following properties in the code:
default_width:500,default_height:344
And increase the width and height as per your needs.</blockquote>
Here is some info that could be relevant.
<blockquote>By default you can use Vimeo or YouTube videos to the Lightbox popup, either in Gallery or using the Shortcodes.
There may be times you need to add certain content to the Lightbox popup such as self-hosted video or other elements such as a form or a notification message.
Bellow are your instructions:
Download the template file by clicking the “Download File” button bellow
Unzip the file and you will have a plainpage.php file template
Upload plainpage.php to your server, into the /themes/Karma/ folder
Create a new Page, choose “Plain Page” from the Page Templates option
Add your video embed code or any other content into the Editor and Publish
Create a Gallery Post, assign it to your gallery Category and add the Portfolio Full Size URL to call the newly created page i.e.:
http://YourSite.com/plainpage?iframe=true&width=656&height=390
Please note – You may need to change the width and height in the URL as well as in the plainpage.php file to better fit your needs. Modify http://YourSite.com/plainpage to properly call the page you have created.
The same can be used for the Lightbox Frame Shortcodes. You would simply enter the URL to the page in the popup=”" tag. Please see example bellow:
[lightbox style="modern" image_path="http://localhost:8888/wp-content/uploads/karma-demo1.jpg" popup="http://localhost:8888/lighbox?iframe=true&width=656&height=390" link_to_page="" target="" description="" size="two_col_large"]
</blockquote>
Francisco Javier Carazo Gil comments:
Hi,
Ok I have seen the documentation of PrettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/), the lightbox clone you are using, and here is the solution:
1. Create a link ()
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”)
3. Change the href of your link so it points to the webpage you want to open.
4. Then add “?iframe=true” as a parameters in your HREF so prettyPhoto knows to open the content in an iframe
5. Then add the width and height as parameters in your HREF (&width=100&height=100)
6. Please note that the dimensions can be percent based
Hope this helps!
Jim Dugan answers:
You're using a theme called "Karma" for a Bible site?
Um, irony much?
Other than that, I got nothin'