14 Replies Latest reply on Oct 29, 2016 9:20 AM by huskyl63341171

    Change image gallery. I have several buttons

    huskyl63341171

      hello .. I'm still working on my project

      I have several buttons, each button displays data from a city

      > Click button "barcelona" shows rectangle-info ..
      > Rectangle-info shows: name, town, location, etc ... and 3 pictures .... the problem does not change the images (different) by pressing the button "Madrid"

      3 images are a symbol "gallery", this symbol is within the "rectangle-info"

       

      sym.$("rectangle-info").show();

      //name

      sym.$("name-city").html("Madrid");

       

      var gallery = sym.getSymbol();

       

           var element = sym.$("modelo1");

           element.attr("src","madrid-1.jpg");

       

           var element = sym.$("modelo2");

           element.attr("src","madrid-2.jpg");

       

           var element = sym.$("modelo3");

           element.attr("src","http://www.mywebsite/gallery/madrid-3.jpg");

       

      This code does not work.

       

      model1, Model2 and modelo3 .. is the original name of the photos in the gallery symbol.
      Modelo3, I would change it to an external image, you can?

       

      Concern: to show many cities, with many images .. the project becomes slow? ... The initial charge? .. Help load external images, from a gallery folder?

        • 1. Re: Change image gallery. I have several buttons
          joel_pau Level 5

          Hi,

           

          1) Loading a picture: you have to use the correct path.

          var element = sym.$("modelo1");

              element.attr("src","madrid-1.jpg");

           

          can be replaced: sym.$("modelo1").attr("src", "gallery/madrid-1.jpg");

           

          2) Changing a picture with a symbol.

          sym.getSymbol("gallery").$("modelo1").attr("src", "gallery/madrid-1.jpg");

          1 person found this helpful
          • 2. Re: Change image gallery. I have several buttons
            resdesign Adobe Community Professional & MVP

            Not sure how things are set up for you but I would put the images in an array and then have only one symbol in which I would dynamically change the image using css background image if the images have different sizes or attr if the images are all the same size.

            then on your click event you can change the image.

            var cities = [

            {"image1": "Madrid1", "image2": "Madrid2", "image3": "Madrid3"},

            {"image1": "Barcelona1", "image2": "Barcelona2", "image3": "Barcelona3"},

            {"image1": "Girona1", "image2": "Girona2", "image3": "Girona3"},

            {"image1": "TossadeMar1", "image2": "TossadeMar2", "image3": "TossadeMar3"}

            ];

            changing an image with CSS:

            • use this code on the event  - Instead of i you can use the array element number since you have several buttons
            sym.getSymbol('info').$("placeholder1").css({           "background-image" : cities[i].image1,           "background-repeat" : "no-repeat" });
            sym.getSymbol('info').$("placeholder2").css({
            "background-image" : cities[i].image2,
            "background-repeat" : "no-repeat"
            });
            sym.getSymbol('info').$("placeholder3").css({
            "background-image" : cities[i].image3,
            "background-repeat" : "no-repeat"
            });

            change an image using ATT  - all the images are the same size
            • select your images and change them from div to img in the property panel

            img.png

            • Add this code :
            sym.getSymbol('info').$("placeholder1").attr('src',"images/" + cities[i].image1 + ".png");
            sym.getSymbol('info').$("placeholder2").attr('src',"images/" + cities[i].image2 + ".png");
            sym.getSymbol('info').$("placeholder4").attr('src',"images/" + cities[i].image3 + ".png");

             

             

            If you can use jquery if is very easy to code the buttons with this code:

            • Group all the buttons is a div called it buttons
            • add code

            var buttons = sym.$("buttons").children();    

             

             

            $.each(buttons,function(i){

              $(this).on("click", function(){

              sym.getSymbol('info').$("placeholder1").attr('src',"images/" + cities[i].image1 + ".png");

              sym.getSymbol('info').$("placeholder2").attr('src',"images/" + cities[i].image2 + ".png");

              sym.getSymbol('info').$("placeholder4").attr('src',"images/" + cities[i].image3 + ".png");

             

            })

            1 person found this helpful
            • 3. Re: Change image gallery. I have several buttons
              joel_pau Level 5

              Concern: to show many cities, with many images .. the project becomes slow? ... The initial charge? .. Help load external images, from a gallery folder?

              You could preload pictures using yepnope(). You will solve your loading issue.

              And, you can use an object to manage your datas:

              var cities = {

                 "Barcelona": {"text": "yourText", "image1": "madrid1.jpg", "image2": "madrid2.jpg" },

                 "Madrid": {"text": "yourText", "image1": "barcelona1.jpg", "image2": "barcelona2.jpg" }

              };

               

              Marie's code requires a jQuery file.

              Without jQuery, you have to replace $.each() by forEach().

              1 person found this helpful
              • 4. Re: Change image gallery. I have several buttons
                huskyl63341171 Level 1

                Thank you very much for answering

                 

                the images are all the same size .. I will review the options, and I'll get to work ... we'll see if I succeed ... then tell them

                • 5. Re: Change image gallery. I have several buttons
                  resdesign Adobe Community Professional & MVP

                  I did mention that in the post before the code, Joel!

                  Here is code that does not require jquery:

                   

                   

                  sym.$(elementname).bind("click",function() {

                    sym.$('imagename').attr('src','images/'+element+'.png').css({"opacity":1.00});

                    });

                  }

                   

                   

                  // add button names here

                  ['', '','' ,'',''].forEach(useButtons);

                  1 person found this helpful
                  • 6. Re: Change image gallery. I have several buttons
                    huskyl63341171 Level 1

                    I'm testing the different options ... a little hard for me ... I did not work for now, I'm trying ... I can not understand how to change the images that are within symbol, which is inside a rectangle ..

                     

                    my concern: when many images used ... my initial project, tested on a test site (no user traffic), is very slow to enter for the first time, the second time is faster

                     

                    I have 19 districts and I want to show 3 images by districts ... Total: 57 images ... would be very slow preload ... you should use external load or use yepnope (compositionready)? ... Which would help more in my project?

                    • 7. Re: Change image gallery. I have several buttons
                      resdesign Adobe Community Professional & MVP

                      it is a mistake to try and load images into edge animate. If you are loading the image into a symbol and into a rectangle all you need to do is load 1 image then call the rest with code as I show in the previous post. Unless your images are really big and would take time to load then it is the way to go. Same with the text that can be loaded from an array into EA or a json file. All your info can be put in the json file and it will update with the click event.

                      Did you look at the file I posted for you to look at?

                       

                      Check out this sample I did for our school history course:

                      Dropbox - Json.zip

                      • 8. Re: Change image gallery. I have several buttons
                        huskyl63341171 Level 1

                        resdesign... previous download file could not use it because it was not my style to project .. Json example, when trying to visualize in mozilla or chrome does not show the animation

                         

                        I note that the json code this on stage .. I add the code directly on the buttons? (Click event) have 19 buttons, corresponding to 19 districts ... each button has Click, Mouseover and mouseout ... I add json example Click event?

                         

                        and most important to me .. what is the right path .. because I have rectangle as a parent, and symbols as children

                         

                        you and joel_pau,  are helping me ... I am very grateful for it .. greetings

                        • 9. Re: Change image gallery. I have several buttons
                          resdesign Adobe Community Professional & MVP

                          Not having your project does not help. But I am not going to interfere with Joel since he is helping you. I do things differently and it has worked for me on about 400 projects.

                          Good luck.

                          • 10. Re: Change image gallery. I have several buttons
                            resdesign Adobe Community Professional & MVP

                            when the upgraded folder is made, the json file is not copied. You need to place the json file from the old folder in the same place in the upgrade folder and the file will work fine.

                            • 11. Re: Change image gallery. I have several buttons
                              resdesign Adobe Community Professional & MVP

                              There was an error here and also if you use json you need to add jquery therefore you can use $.each().

                               

                              If you do not want to use jquery, then you can put your data into an array inside EA.

                               

                              Anyway, the code for the buttons without jquery is in the following file:

                              Microsoft OneDrive - Access files anywhere. Create docs with free Office Online.

                              In the example, I put the following on the stage:

                              • 3 images,
                              • 1 text info for each image,
                              • 1 title for each ser.

                               

                              Each button loads its corresponding images, text info and title.

                               

                              I hope this helps.

                              • 12. Re: Change image gallery. I have several buttons
                                joel_pau Level 5

                                Here is how to have a light file using sym.createChildSymbol() ==> Menos codigo y simbolos.zip - Box

                                1 person found this helpful
                                • 13. Re: Change image gallery. I have several buttons
                                  joel_pau Level 5

                                  La última versión: galeria ultima.zip - Box

                                  1 person found this helpful
                                  • 14. Re: Change image gallery. I have several buttons
                                    huskyl63341171 Level 1

                                    joel_pau many thanks .. your contribution has been very useful to me, very helpful to complete my project .. joel_pau without your help would have been impossible to finish .. Thanks also for their contributions to resdesign .. you give a great help to the community edge Animate ... thank you very much