Skip to main content
D
default0vaokg78cv42
Inspiring
August 10, 2022
Answered

Tabbed image gallery

  • August 10, 2022
  • 3 replies
  • 684 views

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.

    This topic has been closed for replies.
    Correct answer L e n a

    @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

    3 replies

    L
    Community Expert
    L e n aCommunity ExpertCorrect answer
    Community Expert
    August 10, 2022

    @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

    O
    osgood_
    Legend
    August 10, 2022
    quote

     

    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.

    D
    default0vaokg78cv42Author
    Inspiring
    August 10, 2022

    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. 

     

    L
    Community Expert
    L e n aCommunity Expert
    Community Expert
    August 10, 2022

    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.

    O
    osgood_
    Legend
    August 10, 2022
    quote

     

    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?

     

    D
    default0vaokg78cv42Author
    Inspiring
    August 10, 2022

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 10, 2022

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

     

     

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices