Workaround for missing "randomw-play-gallery-slideshow" feature

phaserbeam

I reported the missing random play feature for the gallery-slideshow here... Still no change on that.

After i got some feedback from friends i tried to create a workaround for that missing feature. If some one is interested, here is how i solved it for myself:

First of all i created an empty page with a slideshow gallery widget which plays photos from the selected gallery... in random order.

I changed the layout to "Stretchy" and disabled all margins. Then i added a CSS content block to customize the slideshow:

/* Disable scrollbar */
body {
  overflow:hidden;
}
/* Disable pinned header */
.sm-page-layout-region-header {
  display:none!important;
}
/* Change background color */
.sm-page-layout {
    background-color:black;
}
/* background color for navigation icons next/previous */
.sm-slideshow-nav button {
    background-color: rgba(40, 46, 50, 0.65)!important;
}
.sm-button-skin-default .sm-fonticon {
    color:rgba(200,200,200,0.6)!important
}
.sm-button-skin-default:hover .sm-fonticon {
    color:rgba(255,255,255,1.0)!important;
    font-weight:bold;
}

For the slideshow widget i disabled the expand and play buttons, i just enabled the navigation-buttons. Since there is no "X" to exit the slideshow if it plays i added a HTML-content block:

<div class="EXIT">
  <a href="[B][COLOR=Red]***LINK***[/COLOR][/B]" title="Exit slideshow">
    <div class="sm-button sm-button-size-large sm-button-skin-default sm-button-nochrome">
      <p>X</p>
    </div>
  </a>
</div>

***LINK*** points to the original gallery which is in collage landscape format.
The HTML-Content block also needs some CSS:

/* ================================================
   =         Format "Back to top"-button          =
   ================================================ */
.EXIT {
  opacity: .3;
  -moz-opacity: .3;
  -webkit-opacity: .3;
  z-index: 9999!important;
}

.EXIT:hover {
  opacity: 1.0;
  -moz-opacity: 1.0;
  -webkit-opacity: 1.0;
}

.sm-fonticon {
  color: white!important;
}

.EXIT p {
  font-size: 2em!important;
  color: white!important;
  padding: 0.1em;
}

.EXIT a {
  background-color: rgba(175, 170, 210, 0.7)!important;
  border-radius: 6px;
  position: absolute;
  top: .5em;
  right: .5em;
}

.EXIT a:hover {
  background-color: rgba(40, 46, 50, 0.65)!important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

The random slideshow is now created, i just need to point the gallery to my custom slideshow instead to play the default gallery slideshow which does not support random play.

I was using "CUSTOMIZE SITE" and made the gallery individual. I added a HTML-content block:

<div class="random_slideshow" style="text-align: right;">
  <a href="[B][COLOR="Red"]***LINK***[/COLOR][/B]">
    <p class="sm-gallery-slideshow-button">
      <span class="sm-button sm-button-size-small sm-button-skin-default" data-value="slideshow">SLIDESHOW</span>
    </p>
  </a>
</div>

***LINK*** points to the custom slideshow page.

Now i just needed to disable the original gallery-slideshow button for this gallery only (i don't mind about my other galleries right now and will keep the default slideshow on these galleries for now)

.sm-gallery-headerbuttons .sm-gallery-slideshow-button {
  display: none!important;
}

If someone is now visiting my gallery and pushes the "SLIDESHOW" button he will be redirected to my custom random-play-slideshow. If the guest is using the "X" in the upper right corner he will be redirected back to the original gallery.
Bonus feature: The slideshow shows title+captions.

Works for me...but hopefully SM will finally add the "Play random" feature to the default slideshow gallery. If you are interested: here is the gallery. Feedback is welcome.