blueimp gallery set indicator on by default

Question

I am using blueimp gallery http://blueimp.github.io/Gallery/ as a lightbox in my website. Is there an easy way to keep the indicator on by default? Right now, after you open a gallery in a lightbox you need to click on an image for it to show navigation buttons and indicator options.

Tormoria

Answer 1

Add blueimp-gallery-controls class to gallery container:

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

Redroot

On their example HTML, there's no blueimp-gallery-controls class on the container by default, but now I see they add it using jQuery in demo.js ;) Thx ! – Tarkany

Version 3+ requires the addition of another javascript file blueimp-gallery-indicator.js. I have yet to figure out if it can be correctly imported and compiled with Webpack though. – Precognition

Answer 2

Edit the blueimp-gallery.css. Set the elements you want shown to display:block instead of display:none.

Garrettgarrick