load new page and set img src with .click

load new page and set img src with .click

I'm very new to jQuery and have run into a problem. I've successfully put together a script that will load images in a different div with fadeIn and fadeOut. Thumbnails are clicked on, and then the full size image will load. This content is all contained on a Gallery page.

The problem is that I have a separate page section, appearing on all pages of the site, that holds thumbnails of recent gallery uploads. When these are clicked, I want to load the Gallery page, and set the source of the full scale image. I've so far only been able to load the Gallery page with the default image source, of just get the full scale image to load.

The first section of code below works fine, it's the part for the Gallery page. The other section is for the recent entries. I've removed the fadeIn and fadeOut since they won't be necessary. Any help would be much appreciated.

  1. $(document).ready(function(){
  2.     $(".galleryholder a").click(function(){
  3.         var imageSource = $(this).attr("href");
  4.         $("#frame img").fadeOut("slow", function() {
  5.             $(this).load(function() {
  6.                 $(this).fadeIn("slow");
  7.             });
  8.             $("#frame img").attr({ src: imageSource })
  9.         });
  10.         return false;
  11.     });
  12. });
  13. $(document).ready(function(){
  14.     $(".recentholder a").click(function(){
  15.         var imageSource = $(this).attr("href");
  16.         $("#frame img").attr({ src: imageSource })
  17.         document.location.href = '../gallery'
  18.         return false;
  19.     });
  20. });