bartonlewis Posted April 25, 2019 Share Posted April 25, 2019 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 More sharing options...
Funce Posted April 25, 2019 Share Posted April 25, 2019 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 More sharing options...
dsonesuk Posted April 26, 2019 Share Posted April 26, 2019 You could try '_self' instead, but the better option would be to use the w3css modal. Link to comment Share on other sites More sharing options...
bartonlewis Posted April 26, 2019 Author Share Posted April 26, 2019 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 More sharing options...
Funce Posted April 26, 2019 Share Posted April 26, 2019 In the example linked, you would need to change the classes from w3-third to w3-quarter. https://www.w3schools.com/w3css/w3css_responsive.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2019 Share Posted April 26, 2019 Sorry, I thought it was a w3css gallery, there is a tutorial that does not use any css framework for creating a modal for images. Just search for 'Modal Images' at w3schools.com. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2019 Share Posted April 26, 2019 https://www.w3schools.com/howto/howto_css_modal_images.asp Link to comment Share on other sites More sharing options...
bartonlewis Posted April 26, 2019 Author Share Posted April 26, 2019 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 More sharing options...
dsonesuk Posted April 26, 2019 Share Posted April 26, 2019 That is not a big deal as all you have to do is change background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ To whiter rgb colour. Link to comment Share on other sites More sharing options...
bartonlewis Posted April 26, 2019 Author Share Posted April 26, 2019 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 More sharing options...
bartonlewis Posted April 27, 2019 Author Share Posted April 27, 2019 For the W3.CSS Modal Image Gallery here https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_gallery, there's no way of adding padding to the images, is there? Since this is an external stylesheet? Thanks. Link to comment Share on other sites More sharing options...
bartonlewis Posted April 27, 2019 Author Share Posted April 27, 2019 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 More sharing options...
dsonesuk Posted April 27, 2019 Share Posted April 27, 2019 (edited) https://www.w3schools.com/code/tryit.asp?filename=G3H9N1MTA9MT https://www.w3schools.com/code/tryit.asp?filename=G3H9TSDK80Q1 Edited April 27, 2019 by dsonesuk absolute img src path required for images to show 1 Link to comment Share on other sites More sharing options...
bartonlewis Posted April 28, 2019 Author Share Posted April 28, 2019 Thank you!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now