11 Replies Latest reply on Mar 6, 2013 6:14 AM by joel_pau

    JSON external file

    GusDoeMatik™ Level 1

      I'm having trouble with this script. can anyone help me? I thought JSON was built into edge. but after writing these lines of code it doesn't appear so....

       

      var imageArray = new Array();

      var currentImage = 0;

      var mySlidingImages = sym.getSymbol("ImageSlider");

      sym.$("PlaceHolderText").html("");

       

       

      $.getJSON("data/photos.json", function(data){

                     for(var i=0; i<data.length; i++){

                                    imageArray.push({"image":data[i].image,"title":data[i].title});

                }

                     sym.$("PlaceHolderText").html(imageArray[currentImage].title);

      });

       

      so when that didn't work I tried this:

       

      yepnope({

      nope:[

      'edge_includes/json2_min.js'

      ],

      complete: init

      });

      //when yepnope has loaded everything execute init();

      function init (){

      //initialise your variables and Edge comp here

      var imageArray = new Array();

      var currentImage = 0;

      var mySlidingImages = sym.getSymbol("ImageSlider");

      sym.$("PlaceHolderText").html("");

       

       

      $.getJSON("data/photos.json", function(data){

                for(var i=0; i<data.length; i++){

                          imageArray.push({"image":data[i].image,"title":data[i].title});

                }

                sym.$("PlaceHolderText").html(imageArray[currentImage].title);

      });

      }

       

       

      Basically what I'm trying to do is create a slider that will auto populate, with image and text, according to an external file "photos.json".  But I'm a noob at coding so I don't know what my mistake is... if anyone could help me understand what I'm doing wrong i would appreciate it.. ty..

        • 1. Re: JSON external file
          joel_pau Level 5

          Hi,

           

          Can you post (upload) your json file: photos.json?

          • 2. Re: JSON external file
            GusDoeMatik™ Level 1

            better yet i can upload the whole project file so you can take a look at what I'm doing...

             

            http://dl.dropbox.com/u/26703461/SliderProject.zip

            1 person found this helpful
            • 3. Re: JSON external file
              joel_pau Level 5

              Your json file has a comma issue: last record.

              json.jpg

              After deleting the last comma, your animation will run.

              • 4. Re: JSON external file
                GusDoeMatik™ Level 1

                Thank you so much! That fixed it... Now i just need to learn to code it so that it keeps playing no matter how many images I use... for example in this code:

                sym.grabNewImage = function() {

                             currentImage++;

                             if(currentImage>16){

                                       currentImage = 0;

                             }

                             mySlidingImages.$("ImageHolder2").css({"background-image":"url('"+imageArray[currentImage ].image+"')"});

                   }

                I have to change the number 16 to match 1 less then the number of images I have... I currently am using 17 images.  So I must type in 16. But lets say I want to change the number of images I have in the future.  Is there a way I can write the code so I don't have to change that number? I wrote it that way so it'll loop... but I'm new to coding (I just starting learning it a few day ago)so I haven't learned another way to write it. the only files I ever want to update is the photos.json file. That's the reason for writing the code in this manner, and even though changing that number isn't much of a big deal, I know it can be written better and be more functional.

                • 5. Re: JSON external file
                  joel_pau Level 5

                  I have 2 questions before modifying your code.

                  • It seems that you want to perform 2 tasks:

                  1) loading images,

                  2) then animating images.

                  Am i in the right direction?

                   

                  • About 16? Is it: how many images have been loaded?
                  1 person found this helpful
                  • 6. Re: JSON external file
                    GusDoeMatik™ Level 1

                    First note that I have updated the zip file above. so the original one that u downloaded can be trashed and the new one redownloaded..

                     

                    The images load... that's not an issue... You helped with that issue already. The problem is the first image doesn't load right away... and when it loads it just zips by real fast.  Then the sequence of images load perfectly and do as expected. Also because it doesn't load right away there is a blank spot that sits there for like 3-4 seconds. That's so ugly....

                     

                    yeah the 16 referes to how many images are loaded... Since I'm loading 17 images and javascript starts counting at 0 I put 16 in that spot... Telling javascript that if currentImage is greater than 16 load currentImage to 0. basically I'm telling it to repopulate the slider with the images (loop).

                    • 7. Re: JSON external file
                      joel_pau Level 5

                      What is it 16? It's data.length - 1.

                      data.length comes from the loading json file.

                      Therefore, you can create a new variable: maxImages. With maxImages = data.length - 1

                      Your code:

                       

                      var imageArray = new Array();

                      var currentImage = 0, maxImages;

                      var mySlidingImages = sym.getSymbol("ImageSlider");

                      sym.$("PlaceHolderText").html("");

                       

                       

                      $.getJSON("data/photos.json", function(data){

                               maxImages = data.length-1;

                                for(var i=0; i<data.length; i++){ imageArray.push({"image":data[i].image,"title":data[i].title}); }

                                sym.$("PlaceHolderText").html(imageArray[currentImage].title);

                                mySlidingImages.$("ImageHolder1").css({"background-image":"url('"+imageArray[currentImage ].image+"')"});

                                mySlidingImages.play("Rest");

                      });

                       

                       

                      sym.grabNewImage = function() {

                                currentImage++;

                                if (currentImage > maxImages){ currentImage = 0; }

                                mySlidingImages.$("ImageHolder2").css({"background-image":"url('"+imageArray[currentImage ].image+"')"});

                      }

                      ...

                      1 person found this helpful
                      • 8. Re: JSON external file
                        GusDoeMatik™ Level 1

                        Ok that was helpful... Very much so!!! I changed all the red areas like you did. and it's beautiful.  Now without sounding like an idiot, cause I'm new to coding, let get this straight as to what you actually did.

                         

                        First we created a new var inside getJSON that basically says maxImages is the length -1 of the data inside my photos.json file.  Then we told currentImage to set the first image to zero and to grab the number of images from that file. so that when grabNewImage uses that info to create the loop.

                         

                        Is that what it's doing?  I'm trying to learn and understand the code so i can speak the language without the need of kickass coders like yourself.

                         

                        I thank you whole heartedly with your answers...

                         

                        One last thing did you find out why the first image takes so long to appear? It's freaken annoying...

                        • 9. Re: JSON external file
                          joel_pau Level 5

                          About the first image: you've got a wrong line inside $.getJSON:

                          $.getJSON("data/photos.json", function(data){

                                   maxImages = data.length-1;

                                    for(var i=0; i<data.length; i++){ imageArray.push({"image":data[i].image,"title":data[i].title}); }

                                    sym.$("PlaceHolderText").html(imageArray[currentImage].title);

                                    mySlidingImages.$("ImageHolder1").css({"background-image":"url('"+imageArray[currentImage ].image+"')"});

                                    mySlidingImages.play("Rest"); // the wrong line

                                    mySlidingImages.play(); // a better slideIn effect.

                           

                          });

                          1 person found this helpful
                          • 10. Re: JSON external file
                            GusDoeMatik™ Level 1

                            Sorry I fiured out the problem before I saw this post.  I just simply deleted The first animation... Apparently I didn't need it... but now after looking at your code I'm going to test that therory too.. lol

                             

                            BTW thank you for all your help it was great advice...

                            • 11. Re: JSON external file
                              joel_pau Level 5

                              To see what happening, i added a timer.

                              ==> attached files: https://www.box.com/s/myhuncp1uyjh8zrmfwge