Forum:HELP: Image frame on top of slideshow gallery?

Forums: Index → Community help

Hello!

On my wiki, I'm trying to figure out how to make a slideshow gallery with an image overlay on top of it. Specifically on this page.

I want there to be a slideshow with square images on the page (Already done), but with a PNG image (with a transparent centre) displayed above this slideshow, so it looks like that PNG is a frame. This is the image for the frame. And this is what my ideal end result would be.

Also, if it's possible. I'd want those two buttons on either side of the frame image to essentially replace the normal arrows above the normal slideshow galleries. Is this possible? Maybe with some sort of imagemap? I'd also want it so the images themselves link to a page on the wiki when clicked, but I'm not sure how to do that, either.

I have no idea where to begin with this, so any help would be great.

Jaswacker (talk) 19:29, 4 June 2020 (UTC)

Sounds complicated, but it's probably doable with CSS. Will all images in the slideshow be same size? For linking you can use link= as you would with normal images. --miki-- (talk) 19:47, 4 June 2020 (UTC)

Yep, all of the images would be the same size. Jaswacker (talk) 19:50, 4 June 2020 (UTC)

Okay, I suppose you could use something like this for overlay:

<div style="align:center; width:500px; height:500px; overflow:visible"> [use width and height of overlay image]
<div style="align:center; z-index:1">[gallery goes here]</div>
<div style="position:absolute; left:0px; top:0px; z-index:2">[overlay image goes here]</div>
</div>

You may need to adjust the z-index. Replacing the arrows is more complicated, you could remove them from the overlay image and use them as separate images, to replace default arrows and then moving them to proper location using CSS. --miki-- (talk) 20:07, 4 June 2020 (UTC)

EDIT: On second thought, you wouldn't be able to click the slideshow image due to overlay, and I have no idea how to fix that. --miki-- (talk) 20:10, 4 June 2020 (UTC)

Is there a way to counter that by maybe having the slideshow appear on top? Then maybe also, the arrows could be moved to be on top of the buttons in the overlay imageJaswacker (talk) 20:18, 4 June 2020 (UTC)

Yes, because now I got a better idea. Wrap the slideshow in a div with unique id, for example <div id="transformation-slideshow">[slideshow here]</div>, and then add following to common.css:

#transformation-slideshow .mw-gallery-slideshow-img-container {
	background-image: url(https://i.imgur.com/EsDQKNN.png\)); <-- upload to your wiki and replace with its URL
	background-position: center;
	background-repeat: no-repeat;
}
#transformation-slideshow .mw-gallery-slideshow-img-container img {
	position: relative;
	z-index: -1;
}

--miki-- (talk) 20:23, 4 June 2020 (UTC)

That almost worked perfectly! The only issue is that the top and bottom of the image are cropped out by the navigation parts of the slideshow: http://omnipedia.shoutwiki.com/wiki/Sandbox Jaswacker (talk) 20:28, 4 June 2020 (UTC)

Try replacing .mw-gallery-slideshow-img-container with .mw-gallery-slideshow, that should fix it. --miki-- (talk) 20:32, 4 June 2020 (UTC)

That worked!! Thank you!! Now how could I move the arrows of the slideshow/entirely get rid of the gallery button between the arrows?Jaswacker (talk) 20:45, 4 June 2020 (UTC)

This should remove the gallery button:

#transformation-slideshow .oo-ui-buttonElement-button[title="Toggle thumbnails"] {
	display: none !important;
}

--miki-- (talk) 20:47, 4 June 2020 (UTC)

Awesome. Is there a way I can move the overlay image like, 5 pixels downward? or maybe move the gallery up a tiny bit Jaswacker (talk) 20:54, 4 June 2020 (UTC)

Of course, padding-bottom: 5px; in the first set of styles should do the trick. --miki-- (talk) 20:58, 4 June 2020 (UTC)

Have you figured out how to move the arrows, yet? Jaswacker (talk) 22:02, 4 June 2020 (UTC)

I was able to move the arrows, but clicking them would go to the page linked in the image. I'll try to make it work tomorrow. --miki-- (talk) 22:20, 4 June 2020 (UTC)

No matter what I tried, I couldn't move the arrows on the buttons and make them clickable. --miki-- (talk) 16:27, 5 June 2020 (UTC)

Is there a way to change the default imagemap for the slideshow? if you can change that, and make it not as wide, then the arrows should work, right?Jaswacker (talk) 16:36, 5 June 2020 (UTC)

I tried it, didn't work. Probably because all my "hacks" involved using negative margin, thus moving the arrows outside its actual parent element, but it was the only solution to move the arrows. Maybe someone with more skills in CSS could help you with this. --miki-- (talk) 16:42, 5 June 2020 (UTC)

What was the code you used to move the arrows? Jaswacker (talk) 17:16, 5 June 2020 (UTC)

This:

#transformation-slideshow .oo-ui-buttonElement {
	margin: 10.5em 8.5em -10.5em 8.5em;
}

--miki-- (talk) 17:24, 5 June 2020 (UTC)

I got it working!

#transformation-slideshow > ul > li > div > .oo-ui-panelLayout:nth-child(2) {
    display:inline-block;
}

Jaswacker (talk) 18:07, 5 June 2020 (UTC)

Great! By the way, the Discord link in your wiki's sidebar has no invite, it only leads to Discord main page. --miki-- (talk) 18:26, 5 June 2020 (UTC)

Yep, I know ha. That's just a placeholder for now ^^ Jaswacker (talk)