Slideshow is "empty" initially

HTML & CSS
#1

Hi,

I am trying to implement the slideshow found here: https://www.w3schools.com/howto/howto_js_slideshow.asp

It mostly works, but on the initial load of the page, the first image of the slideshow does not show up, I need to click the arrows or the circles once first. What could be causing that?

My implementation can be seen here: https://www.hippoiathanatoi.com/Bestiary/Entry/Ringo

I would also like to tweak it to move the caption text to either above or below the image, so I can allow it to be a bit longer. Would that be feasible with this style of slideshow?

#2

It’s probably because you put the script in the head and the slideshow doesn’t exist yet until the body has loaded. Put the script before the closing body tag and re-test.

You won’t be able to put it above the image and have it a fluid height but you should be able to have it below the image by removing the position:absolute from .text (although you may need to give it a background colour to see it properly.)

2 Likes
#3

Both of those changes did the trick, thank you. I thought it wasn’t the placement of the script since it worked partially, but of course that makes sense.

2 Likes
#4

I have, somewhat belatedly, realised that the slideshow is sizing up the photos used to the full width of the page. I can see why, of course. The image, in following the original implementation, has "style=“width:100%” applied in order for it to get the previous & next arrows lined up with the edge of the image.

I can use a larger version of the image, but on a large enough screen that will still mean it gets sized up. Is there a better solution where I still could get image centered and the arrows at the edge of the image even if the image doesn’t fill the whole page?

#5

I’m not sure I’m seeing an issue as the slideshow is in the middle column and the slideshow has a max-width set of 1000px so the image will never be larger than 1000px on any size screen.

If 1000px is too wide for you (although it seems fine to me) then just reduce the max-width of the slideshow.

e.g.

.SlideshowWrapper{max-width:760px;}

1 Like
#6

That’s what I get for finding “errors” at midnight and not thinking any further about it next morning. Thank you.

1 Like
#7

A more relevant question, now that I’ve looked more closely at it, would be whether I could constrain it both in terms of width and height in order to mix landscape and portrait images? Since the landscapes are 500x334 and the portraits 334x500, a max-width of 500 still means portraits show up overall larger than landscapes. But since the wrapper also includes the navigation, I am not quite sure how I would impose a max-height for just the image.

#8

Imagine a picture of a whole person.:slight_smile:

If you want the whole person to display at full width but you want to limit the height of the person do you change the person to be short and fat rather than tall and slim ? :slight_smile:

If you want the person to stay the same shape but you still only want the image to be half as tall then you have to crop the persons legs or head out of the picture. It can’t remain a picture of the same person without being cropped in some way.

The above is a real life and follows the laws of physics.:wink:

So, what I am getting at is you cannot simply stretch a picture to fit a certain width and height unless you either stretch or squash one or both directions. That obviously distorts the image and cannot be used for real world images. On the other hand you can maintain the image’s aspect ratio but as in the example of the person you would either have to cut the head or the legs off the person in order to make it fit the space available.

You can set the width and height of the image to a value that you think is best (or a max-height) but you would need to add object-fit:cover to the image so that it maintains its aspect ratio. This will result in the image filling the space but either the width of the height will be cropped in order for it to fit. If its a landscape image it may not make much difference but if it was a picture of a person you may lose the head, legs or the arms in the photo.

To see the whole image you could apply object-fit:contain to the image which ensures that the whole image is available within the space that you require but of course will not fill the whole space as either width or length will have a gap at the edges unless the space available happens to be the exact same aspect ratio as the image (very unlikely).

So to answer your question yes you can limit the height of the image but you will need to use one of the methods above. I should point out this is not a css issue as such but simply that real world things have fixed aspect ratios that need t be maintained if you want them to look real :slight_smile:

Sorry for the long winded answer but its a question that gets asked often.

1 Like
#9

Apply the max-height to the image itself but bear in mind the points above.

1 Like
#10

I sort of follow, and I sort of don’t. Lets say my goal is that an image is allowed to occupy a maximum space of 500 x 500. However, I am fine with the image being 500 x 350 or 350 x 500, a landscape picture doesn’t have to fill the full height and a portrait image doesn’t have to fill the full width.

So, it sounds as if object-fit:contain would work for me, is that correct? But I am guessing the issue then becomes the next/previous arrows – they will always be at the edge of the container, I imagine? Apart from that, I don’t have an issue with the image not filling the whole space, whether that is heightwise or widthwise. Though given that the arrows will display oddly, I should perhaps stick with just one aspect ratio for images in the slideshow.

#11

Yes that’s correct.

The arrows won’t know what size the image occupies and won’t have a point of reference. I don’t believe there is an easy solution to that.

I’ll have to have a think about that :slight_smile:

1 Like
#12

Probably a good deal easier to simply settle for images of the same aspect ratio. Or, I just realised, have a background colour that occupies the whole 500 x 500 space, sort of like a frame. I’ll have to experiment with how that looks. :slight_smile:

1 Like
#13

Yes you can do something like this which forces a 400px height.


.SlideshowWrapper{
max-width:800px;
height:400px;
margin:auto;
background:black;
}

.SlideshowWrapper img{
width:100%;
height:400px;
object-fit:contain;
}

That will then look like this:

Screen Shot 2021-03-27 at 13.31.59
Screen Shot 2021-03-27 at 13.31.591346Ă—702 312 KB

#14

Belatedly, I got around to testing this. It works as you suggested, of course, but then I wanted to try and see if I could avoid any alteration of the image ratios (they’re either 500x375 or 375x500). That has so far resulted in the image no longer being centered within the “frame” and the next/prev arrows having gone missing, which I don’t quite get as I see those in your example.

For a test with images of two different orientations, see here: https://www.hippoiathanatoi.com/Blog/Entry/Phases

#15

You don’t seem to have used the code I gave as there were no max-widths or heights in my code for the image?

You limited the width of the image with max-width and max-height when it should have been width:100% and height:500px. Max-width does not force the width to be full width it only stops it getting bigger.

.SlideshowWrapper img{
max-width:none;
width:100%;
height:500px;
margin:auto;
display:block;
object-fit:contain;
}

For the pagination you missed out the position:relative on .SlideshowWrapper.

#16

Sorry, I thought I explained it. I tested yours first, but then I wanted to see if I could avoid the slight resizing that happens when you set a specific height (with it set to 400px, the landscape images were stretched from 375px to 400px).

#17

To make myself clearer, what I was trying to figure it was if there’s a way to display the landscapes so that they always retain the ratio of 500 x 375 and the portraits so the always retain the ratio of 375 x 500, within that outer box of 500 x 500. And while still being able to shrink below that proportionally on smaller screens.

#18

Never mind, I am being dense. Too much experimenting back and forth. I forgot I had tried to widen the “frame”…

All is well now, with the addition of the display:block and the other changes. Thank you so much, as always.

1 Like
#19

Of course I found one more little issue. The navigation below the image, via the dots which also show the number of image and which one is active, is acting oddly in terms of what the clickable area is. On the page with the image captions (https://www.hippoiathanatoi.com/Bestiary/Entry/Ringo) I can’t click them at all, on the other page (https://www.hippoiathanatoi.com/Blog/Entry/Phases) they’re only clickable at the very base of the dot.

#20

You need position:relative on SlideshowNav as it is under the slideshow. You will then be able to click it.

Note that your previous and next buttons are still way down the screen. I’ve coloured them red in the following screenshot.

Screen Shot 2021-04-12 at 18.56.26
Screen Shot 2021-04-12 at 18.56.26938Ă—891 482 KB