20 Replies Latest reply on Sep 14, 2013 5:26 AM by Zaxist

    Slideshow with clickable thumbnail

    Kirchgässner

      Hi everybody

       

      I want to to a slideshow with thumnail that you can click and that will show a large version of the picture.

       

      Is the a smart way to do this like 'dynamic text', so that I dont have to assign 'show and hide element' to all the images?

       

      Hope for your help.

       

      Br

       

      Martinimagegallery.jpg

        • 1. Re: Slideshow with clickable thumbnail
          resdesign Adobe Community Professional & MVP

          Here is how I would do it:

          create an array with the elements you need. Then call them on click.

          format:

          var myInfo = [

          {

               'thumbnail': 'images/thumnailName.jpg',

               'largeImage':'images/LargeImageName.jpg',

               'infoTxt':'your text goes here'

          },

          {

               'thumbnail': 'images/thumnailName.jpg',

               'largeImage':'images/LargeImageName.jpg',

               'infoTxt':'your text goes here'

          }

          ];

           

          on click event call your info on thumbnail 0  (this is first thumbnail with index 0)

          format is:

          sym.$(myInfo[0].thumbnail).click(function(){

               sym.$('text').html(myInfo[0].infoTxt);

               sym.$('image').css({"background-image": "url('"+myInfo[0].largeImage+"')", 'background-repeat':'no-repeat'});

          });

          1 person found this helpful
          • 2. Re: Slideshow with clickable thumbnail
            AMULI Level 4

            Hi Martin,

             

            First you need to adopt an image file naming convention : for example all your thumbnails are mini01.jpg, mini02.jpg, mini03.jpg, etc. And all your photos photoLego01.jpg, photoLego02.jpg, photoLego03.jpg, etc.

             

            Thus, starting from the name of a thumbnail, the substring beginning at index 4 (0-based counting) and of length 2 gives you the number (for example "05") and you swap the big photo with photoLego05.jpg.

             

            For each of the thumbnails, define a mouseover event handler :

             

            var thumbName =  $(e.target).attr("src");

            console.log( "Fully qualified name of the hovered over thumbnail: ", thumbName)

             

            // extract the two character string corresponding to the thumbnail number

            // from its name via String.split(), String.substr(), etc.

            var thumbNumber = 0; // do the correct string computation

             

            // call the global function

            sym.getComposition().getStage().swapImage( thumbNumber);

             

            In the Stage : document.compositionReady event handler :

             

            sym.swapImage = function( imageNumber)

            {

              var newPhoto = new Image();

              newPhoto.src = 'images/photoLego'+ imageNumber +'.jpg';

             

              var theBigPhoto = sym.$('bigPhoto');

              theBigPhoto.attr( 'src', photo.src);

             

              // if photos have different dimensions

              theBigPhoto.width( newPhoto.width);

              theBigPhoto.height( newPhoto.height);

              // may be adjust theBigPhoto.offset() or theBigPhoto.position()

            }

             

            More on those methods here : http://api.jquery.com/category/offset/

             

            The String JavaScript methods : http://www.w3schools.com/jsref/jsref_obj_string.asp

             

            Gil

            1 person found this helpful
            • 3. Re: Slideshow with clickable thumbnail
              AMULI Level 4

              Marie's solution is quite valuable.

               

              To avoid repeating the click( function{ statements for each and every thumbnail, you could define a global function as showed before. Then you just call that function passing it the thumbail number as a parameter, may be in a for loop.

               

              Gil

              • 4. Re: Slideshow with clickable thumbnail
                AMULI Level 4

                And to refine Marie's solution, instead of hard-coding the slideshow data, you could externalize it in a JSON file slideshow.json, then load it

                 

                $.getJSON( 'slideshow.json', function(data)

                {

                  $.each( data, function( index, imageEntry)

                  {

                    // data processing for each image

                  }

                }

                 

                Gil

                • 5. Re: Slideshow with clickable thumbnail
                  resdesign Adobe Community Professional & MVP

                  Definitely the json file is a great idea and the structure is the same for the data.

                  • 6. Re: Slideshow with clickable thumbnail
                    AMULI Level 4

                    Marie, I am wondering : your solution supposes that each photo has the same dimensions, right ?

                     

                    In the Edge stage, you position the first (big) photo and make it element $('image'). Thus its width and height values are hard-coded in the timeline.

                     

                    Let's now suppose that each photo has its own width and height. How do you get them ? Are you obliged to use an Image object, as I did, or is there another way ?

                     

                    Gil

                    • 7. Re: Slideshow with clickable thumbnail
                      resdesign Adobe Community Professional & MVP

                      Good question, Gil. I have been thinking about that actually. It is not the same if you use this:

                       

                      sym.$('image').attr('src', myInfo[i].largeImage[i]);

                       

                      Above you have to set the image to img instead of div. The image will be it's own size so in some way it is better if you have different sizes.

                       

                      For url then you would have to deal with the dimensions.

                      • 8. Re: Slideshow with clickable thumbnail
                        Zaxist Level 4

                        Dear Kirchgässner

                         

                        i made this before, you can use mine

                         

                        you just need  to change data in json file, and also you can open json file with notepad to edit

                         

                        http://www.mediafire.com/?ptp9xn3rus2y6em

                         

                        Zaxist

                         

                        Link Updated

                        • 9. Re: Slideshow with clickable thumbnail
                          Zaxist Level 4

                          and i forgot to say that the dimention of image is not important in my project, you can use multiple image dimentions and they would be always in the frame with right accept ratio

                           

                          Zaxist

                          • 10. Re: Slideshow with clickable thumbnail
                            Kirchgässner Level 1

                            Hi Zaxist

                             

                            I cant open it, i'm working in an older version of Edge. Could it be saved in an older version?

                             

                            -Martin

                            • 11. Re: Slideshow with clickable thumbnail
                              Kirchgässner Level 1

                              My version is Adobe Edge Animate

                               

                              Version 1.5.0.217.23270

                              • 12. Re: Slideshow with clickable thumbnail
                                Zaxist Level 4

                                Open index_edge.js in dreamweaver and change line 15 - 16 - 17 with this :

                                 

                                 

                                   version: "2.0.1",

                                   minimumCompatibleVersion: "2.0.0",

                                   build: "2.0.1.268",

                                 

                                to

                                 

                                   version: "1.5.0",

                                   minimumCompatibleVersion: "1.5.0",

                                   build: "1.5.0.217",

                                 

                                 

                                see if its working

                                 

                                Zaxist

                                • 13. Re: Slideshow with clickable thumbnail
                                  Kirchgässner Level 1

                                  Hi Zaxist

                                   

                                  I upgraded to Adobe Animate CC, so no problem.

                                   

                                  Now for the project:

                                   

                                  When i save your project as a template i cant load the images. What could be the problem?

                                  • 14. Re: Slideshow with clickable thumbnail
                                    Zaxist Level 4

                                    it's simple

                                     

                                    all images will just load from this file : slides.json

                                     

                                    so you just need to be make sure that this file is in the directory that you created your template then it will work again, cause this file is your database

                                     

                                    Zaxist

                                    • 15. Re: Slideshow with clickable thumbnail
                                      Kirchgässner Level 1

                                      Of corse. I will try and see if it works.

                                      • 16. Re: Slideshow with clickable thumbnail
                                        Kirchgässner Level 1

                                        Hi Zaxist

                                         

                                        I seem to have a problem with the 1st image in the slide. Its not click-active. The json-file looks like this:

                                         

                                        [

                                            {     "image" : "images/toy-B.jpg",

                                                   "title"    : "1st Image",

                                                   "Names":"toy-B"

                                            },

                                            {     "image" : "images/toy-D.jpg",

                                                   "title"    : "2nd Image",

                                                   "Names":"toy-D"

                                            },

                                            {     "image" : "images/toy-E.jpg",

                                                   "title"    : "3rd Image",

                                                   "Names":"toy-E"

                                            },

                                            {     "image" : "images/toy-F.jpg",

                                                   "title"    : "4th Image",

                                                   "Names":"toy-F"

                                            },

                                            {     "image" : "images/toy-J.jpg",

                                                   "title"    : "5th Image",

                                                   "Names":"toy-J"

                                            },

                                                    {     "image" : "images/toy-B.jpg",

                                                   "title"    : "1st Image",

                                                   "Names":"toy-B"

                                            },

                                            {     "image" : "images/toy-D.jpg",

                                                   "title"    : "2nd Image",

                                                   "Names":"toy-D"

                                            },

                                            {     "image" : "images/toy-E.jpg",

                                                   "title"    : "3rd Image",

                                                   "Names":"toy-E"

                                            },

                                            {     "image" : "images/toy-F.jpg",

                                                   "title"    : "4th Image",

                                                   "Names":"toy-F"

                                            },

                                            {     "image" : "images/toy-J.jpg",

                                                   "title"    : "5th Image",

                                                   "Names":"toy-J"

                                            },

                                                {     "image" : "images/toy-B.jpg",

                                                   "title"    : "1st Image",

                                                   "Names":"toy-B"

                                            },

                                            {     "image" : "images/toy-D.jpg",

                                                   "title"    : "2nd Image",

                                                   "Names":"toy-D"

                                            },

                                            {     "image" : "images/toy-E.jpg",

                                                   "title"    : "3rd Image",

                                                   "Names":"toy-E"

                                            },

                                            {     "image" : "images/toy-F.jpg",

                                                   "title"    : "4th Image",

                                                   "Names":"toy-F"

                                            },

                                            {     "image" : "images/toy-J.jpg",

                                                   "title"    : "5th Image",

                                                   "Names":"toy-J"

                                            },

                                                    {     "image" : "images/toy-B.jpg",

                                                   "title"    : "1st Image",

                                                   "Names":"toy-B"

                                            },

                                            {     "image" : "images/toy-D.jpg",

                                                   "title"    : "2nd Image",

                                                   "Names":"toy-D"

                                            },

                                            {     "image" : "images/toy-E.jpg",

                                                   "title"    : "3rd Image",

                                                   "Names":"toy-E"

                                            },

                                            {     "image" : "images/toy-F.jpg",

                                                   "title"    : "4th Image",

                                                   "Names":"toy-F"

                                            },

                                            {     "image" : "images/toy-J.jpg",

                                                   "title"    : "5th Image",

                                                   "Names":"toy-J"

                                            }

                                        ]

                                        • 17. Re: Slideshow with clickable thumbnail
                                          AMULI Level 4

                                          Dear Marie, dear Zaxist,

                                           

                                          Thank you for helping me filling my gaps in CSS3 : background-image is indeed a good track.

                                           

                                          Regarding the dimensions problem :

                                           

                                          "background-size":"contain" resizes the image so that it just fits inside the containing element, even if there is some blank space left over

                                           

                                          "background-size":"cover" resizes the image so that the entire element is covered, even if some of the background image hangs over the edges and out of view.

                                           

                                          To handle images with varying dimensions : "background-size":"auto"

                                           

                                          Thus, adapting Zaxist's example :

                                           

                                          • thumbnails : a slider symbol with a nested container symbol, itself receiving dynamically created instances of a placeHolder symbol (containing an empty div divThumbnail) ;

                                           

                                          • picture : an empty bigPicture symbol

                                           

                                          A slide-show of pictures with different dimensions, diplayed without resizing :

                                           

                                          $.getJSON('slides.json', function(data)

                                          {

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

                                            {

                                              var s = sym.getSymbol("slider").createChildSymbol("placeHolder", "container");

                                           

                                              //  element underlying symbol "placeHolder" instance (70 x 70)

                                              s.getSymbolElement().css(

                                              {

                                                "position":"absolute",

                                                "left": i*(70)+"px"

                                              });

                                              // div "divThumbnail" 70 x 70

                                              s.$("divThumbnail")

                                                .css(

                                                {

                                                  "background-image":"url(images/"+data[i].image+"T.jpg)",

                                                  "background-size":"auto",

                                                  "background-repeat":"no-repeat",

                                                  "background-position":"center"

                                                })

                                                .data('radical', data[i].image)

                                                .click("click", function(e)

                                                {

                                                  sym.$("bigPicture").css(

                                                  {

                                                    "background-image":"url(images/"+$(this).data('radical')+".jpg)",

                                                    "background-size":"auto",

                                                    "background-repeat":"no-repeat",

                                                    "background-position":"center"

                                                  })

                                                });

                                            }

                                          }

                                           

                                          The JSON file stores the radicals. And for each there is a <radical>.jpg file and a <radical>T.jpg file (thumbnail).

                                           

                                          Gil

                                          1 person found this helpful
                                          • 18. Re: Slideshow with clickable thumbnail
                                            resdesign Adobe Community Professional & MVP

                                            As usual Zaxist made a great little sample to demonstrate his excellent mastery of js and Edge!

                                            Great job!

                                             

                                            Gil,

                                            Good insights! You guys make a good team!

                                            • 19. Re: Slideshow with clickable thumbnail
                                              Zaxist Level 4

                                              i'm Sorry Dear Kirchgässne

                                               

                                              i made that fix for you, just download this new link :

                                               

                                              http://www.mediafire.com/?3iromqhtqu3kcfh

                                               

                                              Zaxist

                                              • 20. Re: Slideshow with clickable thumbnail
                                                Zaxist Level 4

                                                you're welcome dear Gil

                                                 

                                                and i'm happy that i could help you to make your project perfect

                                                 

                                                 

                                                and thank you so much dear Marie, and i'm so happy that you liked my sample

                                                 

                                                i hope that i can be useful always

                                                 

                                                Zaxist