7 Replies Latest reply on Jan 21, 2014 3:26 AM by erolst

    Photo Carousel


      I'm trying to build a photo album.


      At the top I'm aiming for a thick banner to display an album-like photo carousel navigation system, where the selected record/album would be enlarged at the center. At the bottom would be related repeatingfields of all the various photos.



      Anyone have preferred strategies of how to achieve this carousel effect?


      I'm also curious if there is a way to achieve an enlarge feature for a field for a hover state.

        • 1. Re: Photo Carousel



          I created a horizontal scrolling by using two global repeating fields, one a container with 10 reps and the other numeric with 10 reps to track the record IDs of the photos in the container global.  Then by using global variables I track the record position.  On open I initialize everything to the first ten records/images, setting up the ID and record tracking.  I also put the usual First, Prev, Next, Last style arrows on the ends for moving to the first ten, prev ten, next ten, last ten.  This could use some more refinement but grossly works fine.  Then I grab the repetition clicked on and transfer that image to a larger viewing image.  I also navigate independent of the horizontal "gallery".  By clicking on the viewing image I switch to another layout with just the viewing field set to enlarge in all direction and I hide toolbars etc and max the window in order to get as large an image as possible.  Clicking on the enlarged image reverts to the functional layout.


          I'm going to also test a left or right sided vertical "gallery" with the same function.  At first glance this seems easier to implement, faster in operation, etc., because you can simply use a portal.  The horizontal scrolling display has significant overhead to implement.  Make sure to Manage Container's so thumbnails are permanently stored for faster access to your gallery.  When transferring on a gallery click I use the ID global repetition field to grab the record ID so I can transfer the full image.


          Not sure if there is a native method for identifying a hover state; that would be handy but instead of moving to another layout you can popup another window with the image which can be resized to the user's discretion.  Make it modal to force it closed before doing anything else (if that's desired behavior).


          This is a basic foundation for an album from which you can embellish all you want.



          • 2. Re: Photo Carousel

            I tried to make a sample file.

            • 3. Re: Photo Carousel

              We saw a quick demo at our user group meeting from the FM rep using slide panels. He didn't dive into it much, but it achieved that carousel look using 3 containers on a slide panel, the side 2 being smaller and using Get Next and Get Previous records.

              The slide animation looked OK, but if you really paid attention, the whole panel is sliding and the next panel has the one that was on the right in the middle (larger) position, etc. So it's not quite as elegant as an actual carousel, where each step only rotates 1/2 a step. This is more of an illusion of that effect, but everything is sliding completely from one panel to another.

              To me, it falls into that "uncanny valley" situation where it's close to what the user is expecting, but something is just a little off. That's just my 2¢.




              • 4. Re: Photo Carousel

                Then there is using a Web Viewer with HTML & JQuery (and true “OnHover”).


                EDIT: Shawn, this was supposed to be a reply to the OP. Quick fingers sink ships and all that …

                • 5. Re: Photo Carousel

                  Thanks guys!


                  user14047, that file is really awesome, thanks for the share!  The animation seems to produce a really accurate illusion for what it is.  This is 99% of what I'm looking for and it's very helpful. 

                  I edited the script a little bit, just so that when you get to the end of the records, it doesn't attempt to slide again without actually switching. 


                  There's a noticeable lag with when the bottom thumbnails switch out.  I'm a bit lost on how I might achieve a better sync between the panels and the bottom thumbnails.


                  flybynight, yeah I haven't tried that strategy but I imagined that strategy would be decent but a bit off.  Thanks for sharing!

                  • 6. Re: Photo Carousel

                    Hey erolst!


                    I'm pretty illiterate when it comes to web anything.


                    All I understand about a web viewer is that I can pull a website up and plug in some fields to make the web viewer dynamic for google map searches and the like. 


                    So, I'm having trouble constructing an image of what you mean other than having a photo library on the web and simply using the webviewer to access it and the website's UX design for it.

                    • 7. Re: Photo Carousel

                      justtivi wrote:

                      All I understand about a web viewer is that I can pull a website up and plug in some fields to make the web viewer dynamic for google map searches and the like.


                      You can do that, but you can also calculate the complete HTML/CSS/JS code yourself, using boilerplate HTML code and values from your database, which lets you do stuff you can't do (easily or at all) with native FileMaker tools.


                      But if you're 99% satisfied with a purely FileMaker-based solution, it's probably not worth the trouble to get that missing 1%.