jQuery: Call two functions from a link

Hello, I would be very happy if some jQuery expert could help me with my problem.

I have a page photography.html with a slideshow. This slideshow has two functions, a sliding-in panel and an enlarged image of the klicked thumbnail.

Now I want to create a link with, lets say, the name "Picture 5" on another page. When the link is clicked, I want to open the page photography.html and open my slideshow and display picture 5, as if the thumb number 5 would have been clicked manually on the photography page.

The existing click a thumbnail image function is like this:

thumbs.click(function() {
current = ($(this).index())
if (current > minPic) {
img.eq(minPic).animate({"left": "-"+picWidth+"px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic = current;
img.eq(minPic).css("left", picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 0, "show");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
}
if (current < minPic) {
img.eq(minPic).animate({"left": picWidth+"px"}, 0, "show");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic = current;
img.eq(minPic).css("left","-"+picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 0, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
}
});
}

My link on the other page is like this:

<a href="photography.html#slide5">Picture 5</a>

I added this code, which opens my panel:

$(document).ready(function() {
if ( window.location.hash &&  window.location.hash.match('#slide')){
var slideNumber= window.location.hash.replace('#slide','');
$('a.panel-open').eq( slideNumber).trigger('click')
}

But right now the panel opens with the first picture instead of the 5th. I tried to change my call in all kind of ways, for instance like this:

$(document).ready(function() {
if ( window.location.hash &&  window.location.hash.match('#slide')){
var slideNumber= window.location.hash.replace('#slide','');
$('a.panel-open').trigger('click');
$('a.pic_').eq(slideNumber).trigger('click');
}

But that is wrong and I have not so much idea how to write it properly as I am too new with javascript and jQuery.

Here is the complete slideshow.js for you to see.

var panPos = 0;
$(document).ready(function() {
    $(".panel-open").click(function(e) {
        e.preventDefault();                         
        $(".panel").animate({ bottom: panPos }, 300, 'linear', function() {
            if(panPos == 0) { panPos = -1600; }
            else { panPos = -1600; }
        });
    });
    $(".panel-close").click(function() {
        $(".panel").animate({ bottom: panPos }, 300, 'linear', function() {
            if(panPos == 0) { panPos = 0; }
            else { panPos = 0; }
        });
    });

});


function slideshow() {
/* set up defaults */
minPic = 0;
maxPic = $("#images img").length;

var thumbs = $("#thumbHolder a"); 
var img = $("#images .image-cont");

picWidth = img.eq(0).width();
img.eq(minPic).animate({"left": "0px"}, 400, "swing");

thumbs.animate({opacity: 1});
thumbs.eq(0).animate({opacity: 1});
thumbs.eq(0);
$("#opacity").css("opacity", "0.7");

$("#next").click(function(){
img.eq(minPic).animate({"left": "-"+picWidth+"px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic++
if (minPic == maxPic) {minPic = 0;}

img.eq(minPic).css("left", picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
});

$("#previous").click(function(){
img.eq(minPic).animate({"left": picWidth+"px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic--
if (minPic == -1) {minPic = maxPic-1;}
img.eq(minPic).css("left","-"+picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
});


/* click a thumbnail image function */
thumbs.click(function() {
current = ($(this).index())
if (current > minPic) {
img.eq(minPic).animate({"left": "-"+picWidth+"px"}, 400, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic = current;
img.eq(minPic).css("left", picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 0, "show");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
}
if (current < minPic) {
img.eq(minPic).animate({"left": picWidth+"px"}, 0, "show");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
minPic = current;
img.eq(minPic).css("left","-"+picWidth+"px");
img.eq(minPic).animate({"left": "0px"}, 0, "swing");
thumbs.eq(minPic).animate({opacity: 1});
thumbs.eq(minPic);
}
});
}

$(document).ready(function() {
if ( window.location.hash &&  window.location.hash.match('#slide')){
  var slideNumber= window.location.hash.replace('#slide','');
        $('a.panel-open').eq( slideNumber).trigger('click')     
}
});


window.onload=slideshow;

ansaurus

tags:

views:

answers:

jQuery: Call two functions from a link

related questions