CODEWITHSUNDEEP
javascriptjqueryprettyphoto
Gublooo
Gublooo

Reputation: 2618

PrettyPhoto - how to track when user closes the modal box

I am using pretty photo to display videos - It pretty much works as the demo on the prettyphoto website

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

If you look at the first demo - on my website - a similar window opens up but instead of an image a video is played.

Now on this window, there is this small "x" on the bottom right corner. So when a user clicks on close - I want to track it. Basically when a user clicks on close - a jquery function should be triggered using which I can call a server side script.

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(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>


<a href="/course/play-video/topic_id/topic_id;?>?iframe=true&width=470&height=340" rel="prettyPhoto" title="topic_name;?>">
<img src="/images/videos/" width="170" height="103" alt="topic_name;?>"/>
</a>

But how do I track when the user clicks on close and is there anyway to pass the topic id to that function Thanks much

Upvotes: 1

Views: 4055

Answers (1)

scott
scott

Reputation: 1070

In the documentation is a line you can add for customizing:

callback: function(){}, /* Called when prettyPhoto is closed */

and within that you can put what you want like:

callback: function() { alert('Prettyphoto closed'); }

You can see the example they use here, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Upvotes: 5

Related Questions