Feature proposals for perfect interactions + immersion factor customizable

  • Hi,

    great plugin, reviewed it as: Clean, elegant and timeless look & feel. ??

    Here I have some feature proposals, which would make the plugin perfect IMHO, and causing me to give it a 5 star rating and going for the Pro version then.

    I’d love the following customization options (and the corresponding feature changes/additions to make them happen)

    Initial zoom factor
    – With safe margin -> this is the default, as it is now
    – Fit -> The image touches two sides of the viewport
    – Fill -> The image touches all sides of the viewport

    Styling of the prev/next/close icon-buttons:

    – Notes
    — These customizations are not gimmicky but necessary for galleries where you want a more immersive feel (hide the background more or completely + using a initial fit or fill zoom factor, where the controls and visibility with fullscreen visuals is important)
    — In this context color always the possibility to specify both color + alpha (i.e. as RGBA or HSLA). Set opacity to 0% as a simple means to disables a certain style attribute.

    – Options
    — Icon color (easy, as they are glyph-font-characters already, not bitmaps)
    — Icon outline stroke: In pixel. 0 by default, therefore disabled.
    — Icon outline color: By default the opposite color of the Icon color, that way you guarantee visibility with any gallery visuals.
    — Icon margin -> this defines the container size
    — Icon container corner-radius: Default 0 -> a square. Set something huge -> You get a circle. Set something small -> You get a square with rounded edges.
    — Icon container bg-color: This is necessary for touch devices to for visibility porpuses with full screen imagery.
    — Icon container bg-color-hover: This is already implemented.
    — Lightbox bg-color: Currently a white with ca 50% opacity.

    Interactions:
    – More native touch gestures (as common on iOS since ca. 2019)
    — Close gesture: Move image out of viewport to the bottom to close it. During moving down, it gets scaled down and the background fades in (bg-color opacity towards 0%). That should be do-able with CSS/JS. And the image snaps back in place to its origin. -> That might be too complex for a web gallery, but would be cool.
    — Move image out of viewport to the top usually reveals more, could show the Captions + Description in block below.

    Image transitions:
    – Transition effect
    — None, just linear moving (requires pre-fetching of 1 detail image in each direction): A fast “flick-through mode”.
    — Fade out/in: The current effect. Possible downside: You shortly focus on the gallery in the background, then again focus on the image which meanwhile faded in. Can be an experience you want or not. We could already mitigate that if we can set Lightbox bg-color to a degree where the background is fully or merely invisible.
    — I don’t not need any other FX, as I like the minimalism of Responsible Gallery Grid. But it is thinkable to may extend that over time.
    – Transition speed: In milliseconds. Current fade out/in I estimate as 250-500ms.

    Regards, abitofmind

    • This topic was modified 3 years, 3 months ago by abitofmind.
    • This topic was modified 3 years, 3 months ago by abitofmind.
    • This topic was modified 3 years, 3 months ago by abitofmind.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter abitofmind

    (@abitofmind)

    Looked up https://simplelightbox.com/#documentation
    – Some of my proposals seem to be possible already!
    — So it’s only a matter of integrating the configuration properly ??
    – Note: As a UX designer I know technologies well enough do very rough first feasability assessments and understand developers, but are no developer myself)

    This is what I saw at first glance:

    Ad Interactions:
    ? swipeClose – swipe up or down to close gallery

    Ad Image transitions:
    ? animationSpeed – how long takes the slide animation
    ? animationSlide – weather to slide in new photos or not, disable to fade
    ? preloading – allows preloading next und previous images
    # So the linear mode for “quick flicking” is possible

    Ad Initial Zoom
    ? Found options doubleTapZoom and maxZoom which achieve the great interaction experience I praised.
    ? Found no options which would easily allow my initial zoom settings of “fit” or “fill”.
    ? I have invited the SimpleLightBox author to have a look at this thread here, whether this “Initial Zoom” feature could be added.
    ? Alternatively maybe a custom tailored combination of events and setting zoom factor could achieve this.

    • This reply was modified 3 years, 3 months ago by abitofmind.
    alexandrost

    (@alexandrost)

    If you allow, I can propose a solution fro what you ask, combining two excellent plugins. Responsive Gallery Grid (for the gallery) and Ari Fancy lightbox (for the lightbox). I am pro user in both for my website and haven’t found any faster and better gallery functionality.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Feature proposals for perfect interactions + immersion factor customizable’ is closed to new replies.