Here in demo section you can see some variants to setup 2JImagesViewer. Just read our comments and explanations below every demo case to understand it better. All demo skins pre-installed in package. After extension download you just need to upload images to the gallery and select one of the pre-installed skins.

Case 1:  Here you can see demo with single blue border, custom navigation buttons and custom description of the images with HTML inside it. Just click enlarge button and you'll see big image with description. Description panel located out of the image panel and have custom HTML with images, and button with the link to some other location. It's fully customizible, so everything depend of your imagination.

Case 2:  Here you can see another modification of the theme. For this demo we have selected buttom location of the navigation panel outside of the image panel block. Navigation panel permanently visible. As you see every gallery on page could consist of different set of the images and every instance could have different configuration settings personal for every instance. In 2JImagesViewer possible to add individual CSS code for some instance and this CSS will affect only for selected item. For every front end interface element you can change poisition of the whole block or some separate element, styles, colors, fonts and etc. For every element possible to define different borders on hover and in static state. Implemented gradient support for every element with CSS3.

Case 3:  Here you can see border around thumbnail image and on hover shadow effect when thumbnail image on hover. Every corner of the front end elements have rounding option with custom radius. Every corner could have different rounding radius. For Example left top corner don't have rounding, but the rest of them rounded. All front end image viewer elements have rounding. It's implemented with CSS3. When thumbnail image on hover you'll see navigation panel with left, right and enlarge buttons. Location, CSS style of the navigation fully customizable. When you click enlarge button you'll see big image. Size of the thumbnails and bigger images could be defined in component admin section / slideshow manager.

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 2JImageViewer - 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.

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.