Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to config left and right arrow #624

Open
html580 opened this issue Jan 12, 2024 · 3 comments
Open

how to config left and right arrow #624

html580 opened this issue Jan 12, 2024 · 3 comments

Comments

@html580
Copy link

html580 commented Jan 12, 2024

image

how to config left and right arrow like the image example

@fengyuanchen
Copy link
Owner

Unsupported.

@Xavlight
Copy link

Xavlight commented Apr 30, 2024

Hi,

If it's not too late.
I've added arrows to the left and right for greater simplicity.

You'll need the 'https://fontawesome.com/' library that I used for the arrows.
I also used it to replace the pictos at the bottom (images) with 'fontaweasome' to get much better quality icons.

But there may be other possibilities in CSS.

in 'viewer = new Viewer(imagesviewer[0], {
ready() {
...//Here
}'

var gallery = $("#gallery img");
var viewer_arrows = '<div id="viewer-arrows" class="hidden">' +
'<a id="viewer-prev" class="fas fa-chevron-left" onclick="viewer.prev(loop=1);"></a>' +
'<a id="viewer-next" class="fas fa-chevron-right" onclick="viewer.next(loop=1);"></a>' +
'</div>';
$('.viewer-footer').append(viewer_arrows);
if (gallery.length > 1) $("#viewer-arrows").removeClass("hidden");

css

#viewer-prev, #viewer-next {
    position: absolute;
    z-index: 2020;
    font-size: 60px;
    bottom: 52px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: white;
}

#viewer-prev {
    left: 2px;
}

#viewer-next {
    right: 2px;
}

#viewer-prev:hover, #viewer-next:hover {
    color: white;
    -webkit-text-stroke-color: black;
}

That's one aspect of the rendering.
Capture d’écran 2024-04-30 110813

If it helps anyone.
It would be great if this could be integrated into a future version.

Xav

@XinChou16
Copy link

prev and next button in the bottom toolbar is not convenient, look forward to have left and right arrow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants