{"id":1388,"date":"2022-08-30T15:16:07","date_gmt":"2022-08-30T15:16:07","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/gallery-pagination-with-javascript-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:07","modified_gmt":"2022-08-30T15:16:07","slug":"gallery-pagination-with-javascript-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/gallery-pagination-with-javascript-collection-of-common-programming-errors\/","title":{"rendered":"Gallery pagination with javascript-Collection of common programming errors"},"content":{"rendered":"

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.<\/p>\n

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?<\/p>\n

My code snippet, js:<\/p>\n

    \n        var locationFolder;\n        function setLocation(var1, var2)\n        {\n            locationFolder = var1+\"\\\/\"+var2;\n            alert(locationFolder); \/\/for verification of path since i was stuck\n        }\n        function getLocationWithPhotoNumber(var1)\n        {\n            var locationWithPhoto = \"images\\\/\"+locationFolder+\"\\\/\"+var1+\".jpg\";\n            alert(locationWithPhoto);\n            return locationWithPhoto\n        }\n    \n<\/code><\/pre>\n
HTML:<\/p>\n
        \n            \n                \n                    \"\"\/\/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\n                \n            \n        \n\n        \n            <\/code><\/pre>\n
    \n
  • 1<\/code><\/li>\n
  • 2<\/code><\/li>\n
  • Testing button!<\/code><\/li>\n<\/ul>\n
    \n        \n<\/pre>\n
    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?<\/code><\/p>\n
    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:<\/code><\/p>\n
    Folder: cars<\/code><\/p>\n
    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<\/code><\/p>\n
    -- .. up to 10 of them<\/code><\/p>\n
    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).<\/code><\/p>\n
    I hope that someone will be able to give me some hints regarding this \"idea\" and my problems with realization.<\/code><\/p>\n
    @EDIT:<\/code><\/p>\n
    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<\/code><\/p>\n
    Originally posted 2013-11-15 09:08:12. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1388","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1388"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}