Modify gallery width to fill whole page

Hi, I'm working on a site and I saw a cool "gallery" on splitshire (at the bottom) that I wanted to replicate. It is a full width photo grid footer, when you hover it the photo lights up.

I achieve the light up effect with pseudo elements, and forceed the width to 200% and 50% left with a fixed height and hidden overflow.

But I would really like to make it cleaner by adjusting the width to 100% of the body and the thumb sizes in percentage , and maybe add something that would make the nth photo at twice the size while the other photos float around it.

What class or id should I modify to do that?
by now, a have:

http://organzza.mx

#ugallery-object-1443555082624-1815 {
padding: 0;
}
.ugallery {
width:200%;
position:relative;
left:-50%;
height:500px !important;
padding:0;
margin:0px;
overflow:hidden;
}
.ugallery_item {
overflow:hidden;
}
.ugallery_link.ugallery_lightbox_link::after {
content: " ";
left:0;
top:0;
width:100%;
height:100%;
background:black;
position:absolute;
display:block;
opacity:.7;
transition:.5s ease;
z-index:999;
}
.ugallery_link.ugallery_lightbox_link:hover::after {
opacity:0;
}

  • Sajid

    Hi @dan

    Hope you are doing good today :slight_smile:

    To make this gallery fullwidht you must make this region fullwidth. Below code will make this region fullwidth of the screen.

    #upfront-region-container-slider .upfront-grid-layout{ width:100% !important;}

    Now replace you existing code:

    .ugallery {
    width:200%;
    position:relative;
    left:-50%;
    height:500px !important;
    padding:0;
    margin:0px;
    overflow:hidden;
    }

    With this one:

    .ugallery {
    width:100%;
    position:relative;
    padding:0;
    margin:0px;
    }

    Let me know how it goes :slight_smile:

    Cheers, Sajid

    • Dan

      Great, thank you.

      I had already try that in the chrome inspector, and even thought it seemed to work.... while working in the upfront editor, that didn't do anything (apparently) but since you told me to do it, I hit the save button and it worked perfectly on the actual page (because in the editor mode the gallery still displays at the 1080 original width).

      Now, with that the gallery fills the 100% of the page but the thumbs are fixed with pixels, how could I change that to percentage so i always fill the page with images.

      The with I think its controlled within a funtion in the php right? because the px dimensions are in style, directly in the html

      <div class="ugallery_items ugallery_grid" rel="ugallery-object-1443562098073-1112">
      <div class="ugallery_item ugallery_item_image " style="position:relative; width:250px;" rel="243" data-groups='["label_0"]'>

      Would it be possible to change that? so I get something like in the screenshots attached, and if it is could it specify that the (2n) and (15n) image be bigger than the rest?

  • Sajid

    Hi @dan

    Hope you are doing good today :slight_smile:

    I can see you have again added fixed width to the container of gallery. If you want to make it full width then you have to remove fixed width of container.

    However, I assumed you want a masonary style images. For this style the following or similar plugin will help you achieve.
    https://wordpress.org/plugins/jquery-masonry-image-gallery/

    Let me know if that does not work.

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.