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.