Tabbed image gallery

[default0vaokg78cv42]

I found interesting code for a "tabbed image gallery":  https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

The code was not complete, and I did my best to make it work. It did work, but it doesn't look great. The worst issue is that the large dispay photo is way too far from the thumbnails. Does anyone have any suggestions? Here is my attempt:

https://www.drct.com/MCA/u.html

Thanks again.

[osgood_]

The code was not complete, and I did my best to make it work. It did work, but it doesn't look great. The worst issue is that the large dispay photo is way too far from the thumbnails. Does anyone have any suggestions? Here is my attempt:

I think you will find that there is a class name conflict with the Bootstrap library you are using.

The tabbed image gallery that you are using uses the css class name of 'container' see below in bold. Bootstrap also uses that class name for its container div.

Change the tabbed gallery class name to something else.

<!-- The expanding image container -->

<div class="container">

<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

<img id="expandedImg" src="../images/nuclear/URSA/URSA-MCA.jpg" style="width:90%" alt="Ursa II photos">

<div id="imgtext"></div>

</div>

If you are using the css from the w3 schools example make sure you change the container name to the revised name.

See if that works. 

Post back if you dont understand or require further instructions. If you are not happy with the tabbed gallery what else would you like it to do?

[default0vaokg78cv42]

oh thanks. I changed "container" to "xcontainer" and the huge space disappeared. Does the src url in the above code look correct? I guessed on that one, because W3 had nothing there, and it came up wiht an error without the src"".

This is what I have:

https://www.drct.com/MCA/u.html

It looks better, but is there any way to line up the thumbnails more evenly and center the large display photo? Perhaps I should rename more classes. Please advise if you have any ideas. thanks. 

[Nancy OShea]

Bootstrap uses Flexbox layouts.  That tab gallery uses old fashioned floats which complicates things. 😞

[default0vaokg78cv42]

I hear ya. Do you have a link to something similar in flexbox? 

[osgood_]

I don't think flexbox will help. The problem you have is the thumbnail images occupy various size spaces so getting them to sit side by side in a visual pleasing way is quite difficult. 

I think your second attempt is about as good as it might get whichever workflow you use, float, flex or grid.

Obviously the tabbed gallery is a bit basic. For a subtle inhancement you might investigate the larger images fading in when the thumbnails are clicked on.

Instrumentation content isn't always the most inspiring of projects to work on. I've done a few myself which left me somewhat suicidall given the dullness which often accompanies such projects.

[default0vaokg78cv42]

I improved it somewhat by editing the left image with Gimp, and by toggling margins and padding. Not sure if that's improper but here is the improved version:

https://www.drct.com/MCA/u.html

CSS code:

* {

  box-sizing: border-box;

}

xbody {

  margin-left: auto;

margin-right: auto;

  font-family: Arial;

}

/* The grid: Four equal columns that floats next to each other */

.xcolumn {

  float: left;

  width: 25%;

  padding: 10px;

}

/* Style the images inside the grid */

.xcolumn img {

  opacity: 0.8; 

  cursor: pointer; 

}

.xcolumn img:hover {

  opacity: 1;

}

/* Clear floats after the columns */

.xrow:after {

  content: "";

  display: table;

  clear: both;

}

/* The expanding image container */

.xcontainer {

  position: relative;

  display: block;

margin-left : auto;

margin-right : auto;

max-width: 600px;

padding : 0 0 0 40px;

}

/* Expanding image text */

#imgtext {

  position: absolute;

  bottom: 15px;

  left: 15px;

  color: white;

  font-size: 20px;

}

/* Closable button inside the expanded image */

.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}

[L e n a · Accepted solution]

well, in your main.css, line 88 remove the padding-top: 56.25%; property, in the .container rule.

at least I didn't verify, if you need it other way.

[L e n a · Accepted solution]

@osgood_ 's answer crossed with mine. I completly agree to the fact that you should verify, why using the .container class name, if you need it further away in your code, cool, keep with it... but if not, be aware of an eventual conflict with BS.

By the way I still think that your problem appear with the extra padding applied to your container definition

[osgood_]

By the way I still think that your problem appear with the extra padding applied to your container definition

By @L e n a

I think that is correct. I just saw the 'container' class being used for the tabbed gallery and immediately thought it could be a conflict issue with Bootstrap which also uses the container class, given the code was copied from a source which was not using Bootstrap. For all I know using the container class may be ok but there might be a conflict with the Bootstrap css and If you're using additional css which styles the container well that may affect any Bootstrap 'container' which may be used in the build process.

One needs to be very aware of what you are copying and pasting if you don't write the code yourself.

[default0vaokg78cv42]

You were both correct. 

oh thanks. I changed "container" to "xcontainer" and the huge space disappeared. Does the src url in the above code look correct? I guessed on that one, because W3 had nothing there, and it came up with an error without the src"".

This is what I have:

https://www.drct.com/MCA/u.html

It looks better, but is there any way to line up the thumbnails more evenly and center the large display photo? Perhaps I should rename more classes. Please advise if you have any ideas. thanks.