2J Image Viewer Demo1, Demo2, Demo3
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. For every element possible to define different borders on hover and in static state. Implemented CSS3 gradient support for all element.
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.
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 right 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.