Prettyphoto - how to pass unique parameter to the callback function

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

Could you just don't use this and get whatever-value, if it depends on the link? — Simon Edström
– Simon Edström, Commented Mar 15, 2012 at 14:33
Hi Simon, not quite sure what you meant - but when I add an id attribute to the anchor tag and try to access it in the callback like alert($(this).attr('id')); I get undefined — Gublooo
– Gublooo, Commented Mar 15, 2012 at 14:40

Simon Edström · Accepted Answer · 2012-03-15 16:40:20Z

4

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.

edited Mar 15, 2012 at 16:40

answered Mar 15, 2012 at 15:17

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gublooo Over a year ago

Thanks Simon, how would I go about doing that.

Gublooo Over a year ago

wow thats a pretty neat solution and works like a charm. Thanks a lot for your time. Appreciate it

Collectives™ on Stack Overflow

Prettyphoto - how to pass unique parameter to the callback function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related