Link to a page and execute jquery there. Need help with jquery hash and more.

Question

Hi everyone

I would be glad if some of you experts could help me with some jquery code.

Thanks in advanvce for your time.

I have created a page "photography.html" with a bunch of thumbnails. You can see the slideshow here: http://test.tester24.com/photography

When a thumbnail is clicked, two things happen: A window with a slideshow slides in and a bigger version of the clicked image is displayed in the slideshow.

Now I would like to link from another page to certain pictures in the slidehow.

Something like this:

<a href="photography.html#pic5">Link</a>

In my slideshow.js I tried to add the following:

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

But this doesnt work properly.

1. Error: The slideshow panel slides in, but always only the first picture is shown. Probably because my code above .eq( slideNumber) is wrong, because the thumbs.click(function() is written in a different way.

2. Error: The script is also executed when I open the main photography page. So probably I have to use something else than $(document).ready(function() so that it isn`t automatically executed?

Here is my original code without the above mentioned changes:

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);
}
});

}

window.onload=slideshow;