2J Image Viewer Demo Case4 , Case5, Case6
Case 4: Here you can see doubled border; first one it's white border around image another "blue" one - it's frame of the whole image viewer. Navigation panel published permanently and put it out of the image panel. Two corners of the navigation panel rounded the rest we left without rounding to make it looks more integrated with image frame. New element of this instance of the 2JImageViwer - it's an image counter which one supports templates. Current instance of the image viewer have another color scheme, as you see all elements customizible and you can set different style for every front end element.
Case 5: Here you can see navigation panel with 100% width and height values on top of the thumbnail image. It's showing when image on hover. Navigation panel is partial transparent. In this case we didn't use rounding for any of the image viewer elements. Here you can see another new element - it's caption panel. It's showing details of the current image. Caption panel Details could consist of HTML tags. Every front end elemtent have opacity function, which you can define in component admin section. Caption panel is scalable, you can change height of the caption. If you define height of the caption smaller then size of the content you'll see scroller.
Case 6 Another demo with YouTube video in image details. Navigaetion pane have two published buttons arrow button to show next image and YouTube button to show details of the image with video. Buttons on hower background have to rounded corners and two of the without rounding.