Jump to content

making edits/tweaks to w3schools' CSS Image Gallery


bartonlewis
 Share

Recommended Posts

Hello, I want to use w3schools' CSS Image Gallery found here https://www.w3schools.com/CSS/css_image_gallery.asp but I want to change the background color of the full sized image (when clicked on) to white instead of black.  Is that possible and if so can anyone tell me how to do it?  Thank you.

Link to comment
Share on other sites

Hi there,

This actually seems like a browser feature. I just checked my other browsers and they have different behaviours for how they treat image requests.

Edge takes the image, top right corner, as if the image was the only thing on the  page.

Chrome, Opera and Firefox centres the image and darkens the rest of the screen to see the image easier.

Link to comment
Share on other sites

Thank you both.  Using _self did not work as the screen surround was still black and when I closed the image, it closed the site.

I checked out the w3css modal at https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_gallery

Isn't it true that this relies upon an external css stylesheet and so one does not have control or has limited control over the css?  For example, in the link cited above, 3 images are shown in an image gallery in a row.  How would one change that to 4 if desired, or could one?  

Link to comment
Share on other sites

Thanks for the link to the modal tutorial.  I have many images I want to put in a thumbnail gallery.  I assume I can add my own css to this code to create the layout I need.  My concern is that I see hard numbers for width and height and the code I had found in the CSS image gallery link did not require that, and the images scaled perfectly.  For that reason, I may also try Funce's suggestion to change the class from w3-third to w3-quarter in the W3.CSS Modal Image Gallery.  It looks like that code will open the thumbnail with a light gray background which is at least closer to white than the black background I was getting in the CSS Image Gallery land the images scales well, even changing layout to column in the smallest viewports.  This may be the best option.  Thanks Funce for alerting me to the W3.CSS.Modal - I did not know about this.

Link to comment
Share on other sites

But that's for the Modal image only.  The code for the W3.CSS Modal Image Gallery relies upon an external stylesheet and I could not change the background color.  I assume I can write css for the Modal Image but my concern  was with the hard height and width values in that code, which I assume can be tweaked to make the images scale correctly but it's nice that that is already written into the W3.CSS Modal Image Gallery code.

Link to comment
Share on other sites

I'm running up against a problem creating an image gallery using the code at W3schools for Modal Images.  The code for the Modal Image Gallery relies on an external stylesheet, so I can't tweak things like background color or padding between images.  That's unfortunate because the code works well for scaling images in different browser sizes, which is important to me.  On the flip side, the code for a single image in the tutorial here https://www.w3schools.com/howto/howto_css_modal_images.asp only works for one image.  I tried creating a gallery but the modal only worked on the first of the images.  I suspect it's because of the js which relies on id's and not classes.  Not being conversant with js, I don't know how to tweak this.  But since the js and css are provided and not in an external style sheet, I suspect I could modify this code for a gallery.  Is that so?  If so, can anyone tell me show me an example of the code I'd need to make this work for at least 2 images side by side?  Thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...