Prettyphoto - how to pass unique parameter to the

Question

Is there anyway in prettyphoto for me to pass a parameter to the callback function

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({
    callback: function()
    {           
    $.post('/course/close-video', {topic_id: '13'});
    }
    });
  });
</script>


<a 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/" width="170" height="103" alt="topic_name;?>"/>
</a>

Note: I've hardcoded the topic value as 13 in the callback - but thats something that should come based on which link is clicked.

There are multiple of those a href tags in the page and each one has a unique topic_id

So how can I pass that unique topic_id to the callback function

Thanks much

Answer 1

I have checked the source code and its not supported by Prettyphoto. However you can modify the source of prettyphoto.

In version 1.3.4 (uncompressed) you have to change the callback function so its support to pass in the clicked element as an argument.

Edit: Acullty I woudln't change the source code, next time you have to upgrade Prettyphoto you have to do the changes again. It will be boooring to maintenance.

One solution could be to track whatever a link is clicked and save it:

$(document).ready(function(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid"); // lastClicked is your lastclicked link. So you can use whatever jQuery method on it..
                alert("topic: " + topicid); // The topic_id
                $.post('/course/close-video', {topic_id: '13'});
                lastClicked = null; // Set the last clicked to null 
        }
    }
    }).click(function (){
        lastClicked = $(this);
});

});​

I created a jsfiddle for you so you can test: http://jsfiddle.net/26L8w/

This will not handle the built in "move to next" feature, couse it will not track it. But you can attath jQuery on if you want to keep track of it.