Versions Compared

Old Version 10

changes.mady.by.user Creativas adminstrator

Saved on

compared with

New Version Current

changes.mady.by.user Creativas adminstrator

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

This module is disabled for a single image set. Once two or more images are added to the set, Smart Images will provide automatically a Slider / Gallery configuration to customize the image set display mode.

Tip

A real-time preview is automatically displayed, while you configure the slider/gallery options, so you can easily finetune and customize the image set.


1. Slider options


Smart Images
imgSet{"options":{"skin":"dark","display":"slider","isVisibleNearby":false,"enableFullScreen":true,"enableKeyboardNav":true,"showCaption":true,"showArrows":true,"autoHideArrows":false,"randomizeSlides":false,"loop":true,"controlNav":"bullets","imageScaleMode":"fit-if-smaller","thumbs":{"orientation":"horizontal","showArrows":true,"autoHideArrows":false,"transitionSpeed":600},"transition":{"enabled":true,"type":"fade","effect":"easeInOutSine","speed":200},"size":{"type":"responsive","width":800,"height":400},"autoPlay":{"enabled":true,"stopAtAction":false,"pauseOnHover":true,"delay":1000},"gallery":{"type":"grid","grid":{"size":{"type":"responsive","width":100,"height":100},"imageScaleMode":"fill"},"masonry":{"size":{"width":200}}}},"elements":[{"id":"33882138","name":"slider_options-cvs754839.png","version":null,"options":{"title":"slider_options","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/slider_options-cvs754839.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"33882139","name":"image_maps-cvs487802.png","version":null,"options":{"title":"image_maps","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/image_maps-cvs487802.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"33882140","name":"image_editor_filters-cvs972296.png","version":null,"options":{"title":"image_editor_filters","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/image_editor_filters-cvs972296.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]}]}





Appearance 


  • Skin: Light, White or Dark
  • Visible nearby: show visible nearby images, or show a single image by slide
  • Show titles: show images captions in the slider

Navigation


  • Show navigation arrows
  • Autohide navigation arrows
  • Loop when the last image is reached
  • Randomize images
  • Additional navigation controls
    • Bullets
    • Thumbnails
      • Thumbnails orientation (Vertical / Horizontal)

Sizing


  • Slider size
    • Responsive: Smart Images will dynamically calculate the height ratio according to the Confluence page width
    • Custom: you can set custom width and height for the slider
  • Image scaling
    • Fill: Resize the image to cover the entire container, even if it has to stretch the image or cut a bit of one of the edges
    • Fit: Resize the image to make sure that the image is fully visible
    • Fit if smaller

Transitions


  • Enable slides transitions
    • Transition Type (Fade, Move)
    • Transition effect (Ease in Out / Ease Out / Linear)
    • Speed (in seconds)
  • Enable slides autoplay
    • Stop at action: stop autoplay at first user action
    • Pause autoplay on mouse over
    • Delay (in seconds)

2. Gallery options


Smart Images
imgSet{"options":{"skin":"dark","display":"gallery","isVisibleNearby":false,"enableFullScreen":true,"enableKeyboardNav":true,"showCaption":false,"showArrows":true,"autoHideArrows":false,"randomizeSlides":false,"loop":true,"controlNav":"bullets","imageScaleMode":"fit-if-smaller","thumbs":{"orientation":"horizontal","showArrows":true,"autoHideArrows":false,"transitionSpeed":600},"transition":{"enabled":true,"type":"fade","effect":"easeInOutSine","speed":400},"size":{"type":"responsive","width":800,"height":400},"autoPlay":{"enabled":false,"stopAtAction":false,"pauseOnHover":true,"delay":4000},"gallery":{"type":"grid","grid":{"size":{"type":"custom","width":200,"height":200},"imageScaleMode":"fill"},"masonry":{"size":{"width":200}}}},"elements":[{"id":"33882143","name":"gallery_options-cvs367579.png","version":null,"options":{"title":"gallery_options","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/gallery_options-cvs367579.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"33882144","name":"image_editor_crop-cvs232197.png","version":null,"options":{"title":"image_editor_crop","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/image_editor_crop-cvs232197.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"33882145","name":"image_editor_finetune-cvs137839.png","version":null,"options":{"title":"image_editor_finetune","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/image_editor_finetune-cvs137839.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]},{"id":"33882146","name":"image_editor_annotate-cvs766685.png","version":null,"options":{"title":"image_editor_annotate","target":{"enabled":false,"link":"https://demo.creativas.io/wiki/download/attachments/33882119/image_editor_annotate-cvs766685.png","option":"linkToImage"},"size":""},"pinturaData":{},"mapAreas":[]}]}


Appearance


  • Skin:  Light, White, Dark

Sizing


  • Thumbnails size
    • Responsive: Smart Images will dynamically calculate the grid size according to the available space
    • Custom: you can set custom width and height for the grid thumbnails
  • Image scaling
    • Fill: Resize the image to cover the entire container, even if it has to stretch the image or cut a bit of one of the edges
    • Fit: Resize the image to make sure that the image is fully visible