Question

I want a button which opens the fancybox rel-group with a certain picture. I’m not quite sure if this works but I’ll give it a try. My problem is that I want to execute jQuery if the user clicks on a link. This is the code I have

var js = "jQuery.fancybox.pos("+currentImage+");";
// create a new function from the "js" string
var newclick = new Function(js);

jQuery("a.enlarge").click(newclick);

The code is based on this answer. I hope that
jQuery.fancybox.pos(2) works. But currently I’m not getting the click function to work. What I’m doing wrong?

Edit:

My current setup:

<script type="text/javascript">
  var currentImage = 0;

  function getCurrImage(carousel, state){
     currentImage = carousel.first-1;

     jQuery("a.enlarge").click(function() {
       alert(currentImage);   
       jQuery.fancybox.pos(currentImage);
     });
   }

   jQuery.noConflict();

   jQuery(document).ready(function() {
       jQuery('#mycarousel').jcarousel({
           scroll:1,
           'itemLoadCallback': getCurrImage 
       }); 
       jQuery('a[rel=example_group]').fancybox({
           'transitionIn': 'none',
           'transitionOut': 'none'
       });
   });
</script>

jQuery.fancybox.pos(currentImage); doesn’t work. currentImage seems to be correct, but the alert pops up 4 times if the button was clicked 4 times. That means:

click 1: currentImage=0
click 2: currentImage=1, currentImage=1
click 3: currentImage=2, currentImage=2, currentImage=2
click 4: currentImage=3, currentImage=3, currentImage=3, currentImage=3

Update:

New try:

<script type="text/javascript">
  var currentImage = 0;

function openfancy(){
   jQuery.fancybox.pos(currentImage);
}

  function getCurrImage(carousel, state){
     currentImage = carousel.first-1;

     jQuery("a.enlarge").unbind("click", openfancy);
     jQuery("a.enlarge").bind("click", openfancy);
   }

   jQuery.noConflict();

   jQuery(document).ready(function() {
       jQuery('#mycarousel').jcarousel({
           scroll:1,
           'itemLoadCallback': getCurrImage 
       }); 
       jQuery('a[rel=example_group]').fancybox({
           'transitionIn': 'none',
           'transitionOut': 'none'
       });
   });
</script>

jQuery.fancybox.pos(currentImage); still doesn’t work. Is there any chance? Perhaps its because I have multiple fancyboxes on that page? I also tried it with jQuery('.fancybox').fancybox.pos(currentImage); but I get the error message that it is not a function.

Answer 1

The pos function never worked. So I took the idea of a deleted answer to use the click-function. If a user clicks on my link it should simulate the click on the picture in the gallery.

<script type="text/javascript">
    var currentImage = 0;

    function getCurrImage(carousel, state){
        currentImage = carousel.first-1;
    }

    /*jQuery.noConflict();*/

    jQuery(document).ready(function() {
        jQuery('#fancycarousel').jcarousel({
            scroll:1,
            'itemLoadCallback': getCurrImage 
        }); 
        jQuery('a[rel=example_group]').fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
        jQuery('#enlarge').click(function(){
            jQuery(".jcarousel-item").eq(currentImage).children("a").click();
        }); 
    });
</script>

I needed hours to figure this out!