Jump to content
bartonlewis

multiple size definitions for modal images

Recommended Posts

I found code for opening thumbnails using modal images at w3schools here:  https://www.w3schools.com/howto/howto_css_modal_images.asp

This code works well for me except for one problem:  while most of the images display well on screen defining a width of 60%, which enables the image to fill the screen top to bottom, some of the images are panoramas and this 60% width restriction creates very short images top to bottom.  I would like a separate definition for the panoramas that enables them to fill 90% of the width of the screen.  I am not an experienced javascript user so I don't know how to do this.  Can anyone help?  I have attached the file with html, css and js in it.  Thank you.

so.html

Share this post


Link to post
Share on other sites

Why do you want to use Javascript for that?  If you're listing out the images yourself in the HTML, then you can assign a different CSS class to images that you want to display differently.

Share this post


Link to post
Share on other sites

Because the thumbnail image src upon clicking is copied to the single modal image src, and depending on modal content width and height determines the height and width styling for the image to use to fit proportionately. If you set the proportionate class to the individual images, you would still need JavaScript to copy that class as well to the single modal image.

By the way, this is a duplicate topic http://w3schools.invisionzone.com/topic/57790-multiple-widthheight-values-for-modal-images/?tab=comments#comment-317159

 

Share this post


Link to post
Share on other sites

Are duplicate postings not allowed?  I don't see that listed in guidelines/netiquette.  I posted it here because I didn't get an answer to my last post on the css page, which was basically to ask someone to modify the code I had provided to show me what I needed to do.  I am not sufficiently versed in javascript to do this, athough I attempted it.  I thought perhaps the query was more suited to the JavaScript page, which is why I duplicated it here.

Share this post


Link to post
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

×