21 Replies Latest reply on Oct 11, 2013 2:54 PM by ladobeugm

    Slide show with text changes

    Handycam Level 1

      I am trying to do something similar to this: http://discoverdigitalgroup.com/services

       

      Click a box to bring up a carousel-like box on the "slide" with the title you clicked on. (Note: I don't really care about the sliding animation between slides)

       

      So far, I have set up the buttons that will launch the slide box.  I created the slide box as a hidden symbol "details", and figured each "slide" would be a label in this symbol's timeline.

       

      The buttons have a click script of    

       

      sym.$("details").show().stop("slide1"); 
      

       

      Makes sense to me so far. But, what's the most efficient way to create the other "slides"?  I see you can't set keyframes for tet content, so I assume I have to have duplicate text objects for each of the 9 slides, which seems cluttered in the UI. I am also unsure how to have the txt objects for each slide only exist in the timeline for its labeled area so they don't overlap.

       

      Advice please!

        • 1. Re: Slide show with text changes
          resdesign Adobe Community Professional & MVP

          You need quotation marks for your symbols or elements.

           

          sym.$("details").show().stop("slide1");

           

          I usually create an array and update each page(slide) with a function.

          • 2. Re: Slide show with text changes
            Handycam Level 1

            The forum stripped them. It works fine as I said, just trying to figure

            best way to create the other slides.

            • 3. Re: Slide show with text changes
              Handycam Level 1

              Can you please elaborate how you'd use an array for this?

              • 4. Re: Slide show with text changes
                Handycam Level 1

                OK, each of my "slides" consists of an image and 3 text objects (see screenshot). There are 9 of these. The "view more" text object goes to a different url for each slide.

                 

                I'm hoping to avoid having to create 27 text objects and 9 images and manage them appearing in the timeline and disappearing.

                 

                What's the cleanest approach to something like this?

                 

                Screen Shot 2012-09-30 at 5.28.12 PM.png

                • 5. Re: Slide show with text changes
                  resdesign Adobe Community Professional & MVP

                  You can create an array to load your different text.

                  For example the array here will fill in the info in two text boxes called title and info. You need to select img for the picture no div so the images can be called and swaped.

                   

                  var mySlide= [];

                  mySlide[0] = {

                  title: "your text here for title 1",

                  info: 'your text here for the text in the middle  // no comma here

                  };

                  mySlide[1] = {

                  title: "your text here for title 2",

                  info: "you text here for text in the middle

                  };

                   

                  etc...

                   

                  function updateInfo(index) {

                       // load text

                        sym.$("title").html(mySlide[index].title);

                         sym.$("info").html(mySlide[index].info);

                       // load new image

                       sym.$("image").attr("src", "images/image" + index+ ".jpg");

                  }

                   

                  // make the function visible anywhere

                  updateMyInfo = updateInfo;

                   

                  index =0;

                  in the button calling the slide call the function

                  updateMyInfo (0);   // this will call your data from the array plus the image  (you need to name your images accordingly like image0.jpg, image1.jpg etc...

                   

                  This should work.

                   

                  I can post an example for you if you want.

                  • 6. Re: Slide show with text changes
                    Handycam Level 1

                    Thanks.  The part I find confusing is where to put these script and how to make sure the right symbols/text objects are targeted.

                     

                    For example, since this text slide show is in a block box that's hidden, I put that inside a symbol "details".

                     

                    So, how would I use this script so that it correctly applies to the timeline inside "details"?  Back in Flash I knew how to do it, but this app is taking some getting used to…

                    • 7. Re: Slide show with text changes
                      resdesign Adobe Community Professional & MVP

                      I put the code in composition  ready. The function can be called from a button or something else.

                      It is hard to know since I do not see the structure of your composition.

                      I will pm your a sample so you can see how I do it.

                      This might not be the best way but it works for me.

                       

                      • 8. Re: Slide show with text changes
                        Handycam Level 1

                        thank you.

                        • 10. Re: Slide show with text changes
                          Handycam Level 1

                          Thanks, this is a huge help.

                          • 11. Re: Slide show with text changes
                            Handycam Level 1

                            Only part of the code I'd like to understand better:

                             

                            // make the function visible anywhere

                            updateMyInfo = updateInfo;

                             

                            How does this make it visible anywhere?

                            • 12. Re: Slide show with text changes
                              Handycam Level 1

                              Also, although your code works, when I attempt to transport it into my document, I am having issues targeting my "next" button.

                               

                              My fields are inside a symbol "details", along the my "next" and "previous" buttons. So, for the button handler I tried this to no avail:

                               

                               

                              var next = sym.getSymbol('details').getSymbol('next');
                              
                              index = 0;
                              updateMyInfo(0);
                              
                              next.click(function(){
                                index++;
                                if (index>2){
                                index = 0;
                                }
                                updateMyInfo(index);
                              });
                              
                              
                              • 13. Re: Slide show with text changes
                                joel_pau Level 5

                                Hi,

                                I don't see your symbol, so i'm not sure but i will try : var next = sym.getSymbol('details').getSymbolElement('next');

                                • 14. Re: Slide show with text changes
                                  resdesign Adobe Community Professional & MVP

                                  I have to say that getting to elements in symbol is a pain. Sometimes I get there with no problem, sometimes not.

                                  So whatever is your button name, just get it the same way you got the texts and the image in the sample.

                                  • 15. Re: Slide show with text changes
                                    Handycam Level 1

                                    OK, I am having an issue I don't understand with my "next" button (I also need a previous button, but one thing at a time).   I have this code in there:

                                     

                                    // make the function visible anywhere
                                    updateMyInfo = updateInfo;
                                    
                                    var next = sym.getSymbol('details').getSymbolElement('next');
                                    var previous = sym.getSymbol('details').getSymbolElement('previous');
                                    
                                    
                                    function updateInfo(index) {
                                         // load text
                                         //alert('slide '+index+' of '+mySlide.length);
                                          slide.$('title').html(mySlide[index].title);
                                          slide.$('info').html(mySlide[index].info);
                                         // load new image
                                          slide.$('img').attr('src', 'images/' + mySlide[index].img);
                                    }
                                    
                                    
                                    index = 0;
                                    updateMyInfo(0); //load first slide data
                                    
                                    
                                    next.click(function(){
                                              alert('index is '+index); 
                                              updateMyInfo(index);
                                              index++;
                                    });
                                    
                                    

                                     

                                    This works for the first and second slide (I have 3 so far, index 0,1,2). The alert in the next.click alerts 1, as expected, but then 0 and the first slide displays again.  I am confused.  I would think the way I currently have it, without any checks in place, index would keep incrementing. 

                                    • 16. Re: Slide show with text changes
                                      Handycam Level 1

                                      Might have fixed it:

                                      var index = 0;
                                      
                                      function updateInfo(index) {
                                                slide.$("title").html(mySlide[index].title);
                                                slide.$("info").html(mySlide[index].info);
                                                slide.$("img").attr("src", "images/" + mySlide[index].img);
                                      }
                                      
                                      updateInfo(index);
                                      next.click(function(){
                                         if (index < (mySlide.length-1)){
                                            index++;
                                         } else {
                                           index = 0;
                                         }  
                                                updateInfo(index); 
                                      });
                                      
                                      

                                       

                                      Note var index = 0 and then call the function with index as the argument.  Seems to have fixed it.

                                      • 17. Re: Slide show with text changes
                                        Handycam Level 1

                                        OK, this is driving me insane. I got next to work, but the tried adding this:

                                         

                                        var prev = sym.getSymbol('details').getSymbolElement('previous');

                                         

                                        and a handler:

                                         

                                        prev.click(function(){

                                        alert('go back');

                                        });

                                         

                                        Now, the next button advances the slide AND fires the alert in the previous handler!  Makes no sense to me at all.

                                        • 18. Re: Slide show with text changes
                                          resdesign Adobe Community Professional & MVP

                                          You could use this instead or something similar.

                                           

                                          maxNum = 5;

                                           

                                          nextBtn.click(function(){

                                                    index++;

                                                    if (index >maxNum){

                                                    index = 0;

                                                    }

                                                    updateInfo(index);

                                          });

                                           

                                          prevBtn.click(function(){

                                                    index--;

                                                    if (i ndex<0){

                                                    index = 0;

                                                    }

                                                    updateTxt(index);

                                          });

                                           


                                          1 person found this helpful
                                          • 19. Re: Slide show with text changes
                                            Handycam Level 1

                                            Thanks.

                                             

                                            Any idea why the click event for the "next" button is also firing the click handler for the "prev" button.  That one makes no sense to me at all.

                                            • 20. Re: Slide show with text changes
                                              resdesign Adobe Community Professional & MVP

                                              typo in the code for the prev button. In if statement it says i ndex instead of index  (delete space).

                                              prevBtn.click(function(){

                                                        index--;

                                                        if (index <0){

                                                        index = 0;

                                                        }

                                                        updateTxt(index);

                                              });

                                              • 21. Re: Slide show with text changes
                                                ladobeugm Level 1

                                                Does anyone have the demo file for this? The Dropbox link is no longer valid and I would love to learn how to do a slideshow like this with JQuery.