PrettyPhoto - passing unique parameter from iframe to parent page
I recently started using prettyphoto to display videos.
This is my current setup
<link rel = "stylesheet" href = "/ css / prettyPhoto.css" type = "text / css" media = "screen" charset = "utf-8" />
<script src = "/ js / jquery.prettyPhoto2.js" type = "text / javascript" charset = "utf-8">
<script type = "text / javascript" charset = "utf-8">
$ (document) .ready (function () {
var lastClicked = null;
$ ("a [rel ^ = 'prettyPhoto']"). prettyPhoto ({
callback: function ()
{
if (lastClicked! = null) {
var topicid = lastClicked.data ("topicid");
$ .post ('/ course / close-video', {topic_id: topicid});
lastClicked = null;
}
}
}). click (function () {
lastClicked = $ (this);
});
</script>
<a data-topicid="<?php echo $topic-> topic_id;?> "href =" / course / play-video / topic_id / <? php echo $ topic-> topic_id;?>? iframe = true & width = 470 & height = 340 "rel =" prettyPhoto "title =" <? Php echo $ topic-> topic_name;?> ">
<img src = "/ images / videos / <? php echo $ image_name;?>" width = "170" height = "103" alt = "<? php echo $ topic-> topic_name;?>" />
</a>
This is what happens
1) When user clicks on link - php action is called to play the video, which fetches the url of the video from the database and passes it so that it can be played in the popup. This works great.
2) Now playing the video also generates a unique ID which is passed to the page (iframe) where the video is playing. Right now I am just showing this value on the page. I can use this unique id as a hidden field or as a div value.
3) Now when the user closes this window - how can I access this unique id in the callback function of the pretty nice photo that is on the homepage.
Thank you very much Appreciate your time
source to share
Create a variable on the main page.
var UniqueId; //Unique ID that will arrive from the iframe
Now the function to write the value
function setUniqeId(val) {
UniqueId = val;
}
Now inside the iframe where the id has already been obtained, pass it to the parent, like
parent.setUniqueId(TheIdThatIHaveReceived);
Update:
Make sure the script is readable - after the DOM has loaded. One of the early ways to ensure this is to place the script after the Elements
<input id="topic_user_id" type="text" />
<script>
var unique_id = document.getElementById("topic_user_id").value;
parent.setUniqueId(unique_id);
</script>
One modern technique would be to create an event handler like
window.onload = function() {
var unique_id = document.getElementById("topic_user_id").value;
parent.setUniqueId(unique_id);
};
source to share
Try this script:
<script type="text/javascript">
$("a[rel^='prettyPhoto']").prettyPhoto({
callback: function() {
active_link = $("a[rel^='prettyPhoto'].active");
topic_id = $(active_link).data('topicid');
$(active_link).removeClass('active');
alert(topic_id);
$.post('/course/close-video', {topic_id: topic_id});
}
}).click(function(){
$(this).addClass('active');
});
</script>
This adds a class named "active" to the clicked link so you can easily customize it in the callback. It also removes the class inside the callback to prevent the last click from being re-selected.
source to share
Just get the value from the hidden field when the callback function fires.
myvideo
is the id of the iframe. If there will be only one iframe in the DOM, use it iframe
as a selector (no hash). hidden
is the id of the hidden field inside the iframe.
var value = $("#myvideo").contents().find('#hidden').val();
alert(value);
I created a JS script for you so you can see how to get the value from the iframe. http://jsfiddle.net/vtDRW/
Its pretty straight forward I think. So just open the iframe where you put the hidden value and get it when the callback is fired.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var lastClicked = null;
$("a[rel^='prettyPhoto']").prettyPhoto({
callback: function()
{
if(lastClicked != null) {
var topicid = lastClicked.data("topicid");
var iframeValue = $("#IFRAME_ID").contents().find('#HIDDEN_ID').val();
$.post('/course/close-video', {topic_id: topicid });
lastClicked = null;
}
}
}).click(function (){
lastClicked = $(this);
});
</script>
source to share