Gallery pagination with javascript-Collection of common programming errors

Ok I would like to create unusual pagination of a gallery: Assuming that i have like 100 photos, i dont want to hardcode 100 appropriate links to html, i want to do it smart way.

My idea is simple: i want to place photos in folders that will have names: 1, 2, 3 (so that i could reference to correct images by appending/modifying the path with respect to current page selected through pagination). But im stuck since i get popup message by javascript: “Image cannot be loaded. Make sure the path is correct and image exist”. Or maybe my idea is bad and such approach is impossible?

My code snippet, js:

    
        var locationFolder;
        function setLocation(var1, var2)
        {
            locationFolder = var1+"\/"+var2;
            alert(locationFolder); //for verification of path since i was stuck
        }
        function getLocationWithPhotoNumber(var1)
        {
            var locationWithPhoto = "images\/"+locationFolder+"\/"+var1+".jpg";
            alert(locationWithPhoto);
            return locationWithPhoto
        }
    

HTML:

        
            
                
                    //hardcoded so i can actually click something since i simplified my modification to popup showing image in full size since it didnt work at all
                
            
        

        
            
  • 1
  • 2
  • Testing button!
        

Generally i wanted to "reload" images on changing the index in pagination. However my "clever" solution does not work, is it possible to do such thing?

Just to clarify: I have folder Cars with 100 pictures. I dont want to manually hard code all images to particular pagination pages. Instead i want to place Cars in specific folders so that they can be easily accessed:

Folder: cars

cars -1 (subfolder of cars) --pic1.jpg --pic1small.jpg --pic2.jpg --pic2small.jpg -- .. up to 10 of them -2 (subfolder of cars) --pic1.jpg --pic1small.jpg --pic2.jpg --pic2small.jpg

-- .. up to 10 of them

And now just by modification of path of i wanted to access correct photos by linking/mapping/connecting proper folder with proper pagination. Is it doable? Where is my mistake? Functions setLocation and getLocationWithPhotoNumber work, since when i use navigation numbers "1" or "2" proper popup with alert shows correct path "cars/1" (as expected) and getLocationWithPhotoNumber (by using "Testing button!" link) shows: "images/cars/1/pic1.jpg" (as expected).

I hope that someone will be able to give me some hints regarding this "idea" and my problems with realization.

@EDIT:

i also get: "uncaught exception: ReferenceError: getLocationWithPhotoNumber is not defined" (used firebug to check that) when i click my mini-image (pic1small.jpg), however when i use Testing button there are no errors/exceptions

Originally posted 2013-11-15 09:08:12.