9 Replies Latest reply on Nov 18, 2013 5:21 AM by Zaxist

    JSON content - can't display image after click

    Zoze Level 2

      Hi to all,

       

      I am trying to to load a JSON file and load images with text information.

       

      I have a problem when i click the thumbnail, the large image can't displayed, i am receiving the following error:

       

      Failed to load resource: the server responded with a status of 404 (Not Found)

       

      my code in compositionReady:

       

      $.getJSON("content.json",

                function(data){

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

                          var s = sym.createChildSymbol("template","content");

                          s.$("title").html(data[i].title);

       

       

                          s.$("description").html(data[i].description);

                          s.$("seira").html(data[i].seira);

                          s.$("imageholder").css({"background-image":"url('"+data[i].image+"')"});

                          s.$("imageholder").click("click", function(e){

                                                                  sym.getComposition().getStage().$("finte").css({"background -image":"url("+$(this).data('largeimage')+")"});

                                                                  });

                          }

      });

       

      And the JSON File:

      [

                {

                          "title": "Titlos 1",

                          "description":"Descrpt 1",

                          "seira": "Number 1",

                          "image": "images/wheel.png",

                          "largeimage": "images/1.png"

                },

                {

                          "title": "Titlos 2",

                          "description":"Inter description 2",

                          "seira": "test",

                          "image": "images/wheel_cool.png",

                          "largeimage": "images/wheel_cool.png"

                }

      ]

       

       

      I tried also with this code:

       

      $.getJSON("content.json")

         .success(

                function(data){

                          console.log("incoming data: ", data);

       

       

       

       

      $.each(data, function(index, item){

                var s = sym.createChildSymbol("template","content");

                s.$("title").html(item.title);

                s.$("description").html(item.description);

                s.$("seira").html(item.seira);

                s.$("imageholder").attr("src",(item.image));

                          s.play();

                s.setVariable( "largeimage", item.largeimage)

                });

      }

      );

       

      and at the element that hold's the thumbnail image, I added on the click event :

       

      sym.$("finte").css({"background-image":"url("+$(this).data('largeimage')+")"});

       

       

       

       

       

       

      I believe that somewhere on +$(this).data('largeimage')+") is the mistake. But I can't find it.

       

      Your help is needed.

       

      Moreover, how, the thumbnails, can be displayed as a table of 4x5?

       

       

       

      Thanks in advanced.

        • 1. Re: JSON content - can't display image after click
          Zaxist Level 4

          Hi Zoze

           

          you missed some lines, try this, i think this should work for you

           

          $.getJSON("content.json",

                    function(data){

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

                              var s = sym.createChildSymbol("template","content");

                              s.$("title").html(data[i].title);

           

           

                              s.$("description").html(data[i].description);

                              s.$("seira").html(data[i].seira);

                              s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')"});

                              s.$("imageholder").data('Large', data[i].largeimage);

                              s.$("imageholder").click("click", function(e){

                                                                      sym.getComposition().getStage().$("fint e").css({"background-image":"url("+$(this).data('Large')+")"});

                                                                      });

                              }

          });

           

          if you had problem again, let me know

           

          Zaxist

          • 2. Re: JSON content - can't display image after click
            Zoze Level 2

            Zaxist you are perfect,

             

            It worked.

             

            This line is needed in order to load the data and later can display it?

             

            Now, all the data from the json files are displayed correct and I can click on them, but at the end of the loaded data of JSON's file, appears the template that holds the data. How is possible not to display them?

             

            With the second that I posted earlier the template doesn't apper, why is that?

            • 3. Re: JSON content - can't display image after click
              Zaxist Level 4

              yes, you need to use .data() function to keep your data for each symbol, and after when you call them you pick the address from your Symbol's data part, you can save any data you want for later usage in your project

               

              and i didnt had any template on my projects  before, where do you see this template ?

               

              on the Stage or in the Consol log ?

               

              Zaxist

              • 4. Re: JSON content - can't display image after click
                Zoze Level 2

                Yes you didn't have any template on your project.

                 

                I first done it with console log and later with your way (just the code).

                • 5. Re: JSON content - can't display image after click
                  Zaxist Level 4

                  you said :

                  appears the template that holds the data. How is possible not to display them?

                   

                  i want to know where you see this template ? on the Stage or in the Consol log ?

                   

                  Zaxist

                  • 6. Re: JSON content - can't display image after click
                    Zoze Level 2

                    On the stage I created a symbol named "template" (after I deleted it, and now it is on the library only), inside in this symbol are the fields for the data of JSON file (for example the imageholder).

                     

                    this symbol template appear the data on the element content which is in the stage.

                     

                    Now, in the content appears all the data from JSON file and at the end shows the elements of template symbol.

                     

                     

                    ------Updated----

                     

                    It doesn't load the first data from JSON File and loads the nexts. Is this the problem perhaps?

                    Also I get this error

                    Uncaught TypeError: Cannot read property 'title' of undefined

                    • 7. Re: JSON content - can't display image after click
                      Zaxist Level 4

                      Ok Dear Zoze

                      i got it

                       

                      your problem is this Line

                       

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

                       

                      Should be

                       

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

                       

                      Zaxist

                      1 person found this helpful
                      • 8. Re: JSON content - can't display image after click
                        Zoze Level 2

                        Yes that was great.

                        Is working nicely. Thank you!

                         

                        It doesn't load the first data from the JSON, but this isn't so much a problem .

                         

                         

                        Thank you very much again Zaxist!

                        • 9. Re: JSON content - can't display image after click
                          Zaxist Level 4

                          you're welcome Dear Zoze...

                           

                          i'm glad that i could help you

                           

                          Zaxist