• 0

JSON gallery issue with 2-digits id's


Question

Yuliya

Is any JSON gurus around? I use JSON library for my website gallery pages and everything up to thumbnails #9 works great. The problem starts when I click on thumbnail #10 (4-th row the first image from the left). When I click on it, it supposed to open the block with bigger image and additional text but it does not show anything, same for the thumbnail #20. If user clicks on thumbnail #11, it will show big image and text that correspond to thumbnails #1. My guess is  - JavaScript doesn't read 2 digits and reads only the one from right only: "10 "reads like  "0"; "11", "21" reads like "1".

Anyone can point me how to fix it in my code? I would appreciate any advice or help.

For each page I have group of files  - php (http://iskpublishing.com/fine-art/gallery-still-life.php), which works as an html and 2 files with javaScript coding (http://iskpublishing.com/fine-art/js/still-life-function.js  http://iskpublishing.com/fine-art/json/still-life.json )

 

Thank you.

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
+virtorio
22 minutes ago, Yuliya said:

Is any JSON gurus around? I use JSON library for my website gallery pages and everything up to thumbnails #9 works great. The problem starts when I click on thumbnail #10 (4-th row the first image from the left). When I click on it, it supposed to open the block with bigger image and additional text but it does not show anything, same for the thumbnail #20. If user clicks on thumbnail #11, it will show big image and text that correspond to thumbnails #1. My guess is  - JavaScript doesn't read 2 digits and reads only the one from right only: "10 "reads like  "0"; "11", "21" reads like "1".

Anyone can point me how to fix it in my code? I would appreciate any advice or help.

For each page I have group of files  - php (http://iskpublishing.com/fine-art/gallery-still-life.php), which works as an html and 2 files with javaScript coding (http://iskpublishing.com/fine-art/js/still-life-function.js  http://iskpublishing.com/fine-art/json/still-life.json )

 

Thank you.

Line 26 of your script:

 

targetNumber = nextParent.id.slice(-1);

 

You're only getting the last digit of the id, so "box10".slice(-1) is returning 0.

 

A quick fix would be to call it like this:

 

 

	nextParent.id.slice(3)
	

That will return everything after "box".

  • Like 1
Link to post
Share on other sites
  • 0
Yuliya

Virtorio, thank you so much, it's working exactly how I wanted. I knew that it was something minor but could not figure it out.

Edited by Yuliya
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Get this Complete JavaScript & jQuery Programming Bundle for only $26
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time, you can save 98% off the Complete JavaScript & jQuery Programming Bundle. Build responsive sites faster with 7 courses spanning JavaScript, jQuery, JSON, AJAX and more.



      What's the deal?
      This deal consists of the following courses:

      Learn JavaScript In 1 Hour
      Start Programming with JavaScript in Just 1 Hour Learn jQuery In 1 Hour
      Learn How to Code More Efficiently with Just 1 Hour of jQuery Training Quick Front-End Website Creation: HTML, CSS, JavaScript & jQuery
      Fast Track Your Web Development Career with a Crash Course in 4 Programming Staples Dynamic JavaScript Master Class: AJAX & JSON
      Learn How to Build Responsive Sites Using AJAX & JSON Introduction To React & Redux: Code Web Apps In JavaScript
      Create Professional Web Apps Using React & Redux Bootstrap 4 Rapid Web Development
      Streamline Your Web Development with Bootstrap 4's Intuitive Features Learn JavaScript AJAX In 1 Hour
      Use the Power of AJAX to Create Seamless & Responsive Webpages Good to know
      Length of time users can access this course: lifetime Certificate of completion included Redemption deadline: redeem your code within 30 days of purchase For full details, terms, and instructor info for the above courses, click here.

      What's the benefit?
      This Complete JavaScript & jQuery Programming Bundle normally costs $1,393, but you can pick this up for just $26 for a limited time, that's a saving of $1,367 off the normal price!

      >> Learn more or Purchase now <<
      See all discounted Online Courses on offer. This is a time-limited deal.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerces privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerces own determination of retail pricing.

    • By David Ormes
      I have a web based application built on PHP and Jquery. 
       
      Need your expert advise what technology I can apply to "mark on PDF and adding comments etc"? Something similar to below video
      https://www.youtube.com/watch?v=Wmr37Q3DorA
       
      Know there is html canvas but I believe is not the best option to go for. Your advise and suggestion will be highly appreciated
       
    • By Timi Cantisano
      Gallery: Microsoft dresses up E3 booth in black, showcases One S, Sea of Thieves and more
      by Timi Cantisano



      Over the past couple of years, Neowin has provided virtual booth tours by publishing galleries of Microsoft's Xbox booth at E3. This year, the booth offers a more matured look, as the company has strayed from emblazoning the setup in "Xbox Green", and has instead, opted to go with a simple black motif.



      Although some of the first signage you'll see entering the Xbox booth is for Sea of Thieves and Forza Horizon 3, make no mistake, the Xbox One S is the first main attraction booth visitors will be greeted by, and it is fantastic. Although you cannot lay hands on the newly announced console, it's still a sight to behold and looks mesmerizing from every angle.



      Pushing deeper into the booth, kiosks to play the aforementioned Sea of Thieves and Forza Horizon 3 become available, along with other titles announced at the Xbox E3 Briefing. Ghost Recon Wildlands, Cuphead, The Turing Test are just some of the titles available to play when roaming around the show floor.



      Perhaps one of the more interesting parts of the Xbox experience at E3 is the Xbox Design Lab nook that allowed attendees to get their hands on sample customized controllers, and even take time to create their own custom controller on the Design Lab website.

      Although Xbox owners have a lot to look forward to in 2016, many will already be thinking much further down the road at 2017, when Microsoft's next console, Project Scorpio will be released. But until then, enjoy our booth gallery.

    • By Vlad Dudau
      Even more images of Nokia's 'Moonraker' smartwatch show up
      by Vlad Dudau



      The competition in the smartwatch market may just be heating up, but one device that will never get to compete is Nokia’s canceled “Moonraker” watch.

      We first heard of the device last summer, when some leaked render shots showed what could have been if Microsoft had ever let this device come to market. But since then, images of the prototype smartwatch have continued to show up, including an entire gallery which we published a couple of days ago.

      But if that didn’t satisfy your needs, we’ve got even more images of the “Moonraker” watch today, seemingly following on from the previous showcase. As you can see in the images, which come from China, the device is shown in full detail, including some of its internals.

      There’s even a side by side comparison of the watch’s power port next to a power port of a supposed Lumia tablet. The device in question does seem to follow the Nokia/Lumia design aesthetic we’re used to, but whether this is the old 8-inch mini tablet from back in 2013 or the newer Mercury tablet from last year is hard to say.

      In either case, that’s pretty much a moot point at this time as Microsoft is focusing all of its wearable efforts on the Band 2, while today’s Nokia seems to have very little interest in consumer devices.

      Source: Nokiabar (Baidu) via: WMPU

    • By Chasethebase
      Welcome to the Neowin photo gallery! Here you can post your pictures and discuss your photography techniques.

      Please be mindful of our members on dial-up and try to keep the dimensions of the pics and the size of the files to a respectable size for 1024 x 768 viewers. Please refrain from quoting images in your replies.

      I will also ask that you link to images on your own space, as much as possible.

      Try to put more details from your camera settings (EXIF) and also talk about what you have done with Photoshop (or similar).
      There are a lot of photographers here that like your editing skills and would like to learn more.

      The previous thread can be found here.

      Posting your photos is made easier thanks to a member contribution! Argote created a Flickr to IPB webapp, thanks! [direct link to app] 
       
      You can find the Neowin Flickr group here.