Code snippet for CSS image gallery

Creating something similar to this is my goal.

https://i.sstatic.net/tMUEe.png

I attempted to create a sample on my own, but it didn't turn out very well. That's why I'm looking for a code base example for this type of image gallery.

javascripthtmlcss

Answer №1

When considering solutions for container layout, most people tend to suggest using flexbox. However, I propose an alternative solution utilizing display: inline-block. Nevertheless, it's important to consider how images that don't fit the container should be handled.

window.onload = function() {
  var par = $('.galleryRightBottomRow:last-child');
  var img = $('.galleryRightBottomRow:last-child img:last-child');
  var layer = $('<div>+5</div>');
  layer.css({
    'position': 'relative',
    'left': img.offset().left - par.offset().left,
    'top': '-' + img.outerHeight() + 'px',
    'width': img.outerWidth(),
    'height': img.outerHeight(),
    'display': 'block',
    'background-color': 'rgba(0, 0, 0, 0.7)',
    'color': '#fff',
    'font-size': '3rem',
    'line-height': img.outerHeight() + 'px',
    'text-align': 'center',
    'cursor': 'pointer'
  });
  img.after(layer);
};
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html,
body {
  width: 100%;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  font: 1.6rem/1.4 arial, sans-serif;
  padding: 2rem;
}

.gallery {
  height: calc(100vh - 4rem);
  position: relative;
}

.gallery > div {
  position: absolute;
}

.gallery div {
  display: inline-block;
  background-color: #f00;
  outline: 1px solid #000;
}

.gallery img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}

.galleryLeft {
  width: 66.67%;
  height: 100%;
  padding-right: 0.5rem;
}

.galleryButtonLeft,
.galleryButtonRight {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 5rem;
  height: 5rem;
  background-color: #000;
  color: #fff;
  line-height: 5rem;
  text-align: center;
  font-size: 4rem;
  border: none;
  outline: none;
  cursor: pointer;
}

.galleryButtonRight {
  left: 5rem;
  background-color: #333
}

.galleryRight {
  width: 33.33%;
  height: 100%;
  padding-left: 0.5rem;
  left: 66.66%;
}

.galleryRightTop {
  height: 50%;
  padding-bottom: 0.5rem;
}

.galleryRightBottom {
  height: 50%;
  padding-top: 0.5rem;
}

.galleryRightBottom img {
  max-width: calc(50% - 0.5rem);
}

.galleryRightBottom img:nth-child(2n) {
  margin-left: 1rem;
}

.galleryRightBottomRow {
  width: 100%;
  height: calc(50% - 0.5rem);
}

.galleryRightBottomRow:first-child {
  margin-bottom: 1rem;
}

.galleryRightBottomRow:last-child img:last-child:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gallery">
  <div class="galleryLeft">
    <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
    <input class="galleryButtonLeft" type="button" value="←" />
    <input class="galleryButtonRight" type="button" value="→" />
  </div>
  <div class="galleryRight">
    <div class="galleryRightTop">
      <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
    </div>
    <div class="galleryRightBottom">
      <div class="galleryRightBottomRow">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage"
        /><img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage">
      </div>
      <div class="galleryRightBottomRow">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage"
        /><img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to set a background image that fits the screen resolution

As I work on building a website, I have encountered an issue. I am using an img in my HTML file with dimensions of 1466x530. The image displays correctly on my laptop (1366x768), but appears zoomed in on my desktop (1024x768). Additionally, the pages tha ...

htmlcssimageresolution

After deploying to an FTP server, React Router fails to render components

I successfully created a React app using the command yarn build. To run the app on my server, I included "homepage": "./" in the package.json file. The app is stored in a specific folder on the server, and I access it through Although ...

javascriptreactjsreact-router-dom

Improving the form fields and Stimulus JS by eliminating the need to repeat the :data-action attribute for each individual field

I'm working with the following form <%= form_for( model, html: { :'data-controller' => 'enable-submit-button-if-fields-changed' } ) do |form| %> <%= form.text_field(:title, :'data-action&ap ...

javascriptruby-on-railsformssubmitstimulusjs

Steps to retrieve component values within the same component

I am currently working on developing a React component where I need to manage the checked status of checkboxes and select options when a change event occurs. However, I am unsure of how to retrieve the value of the checked checkboxes and update the state a ...

javascriptreactjs

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

What is the best way to center a navbar vertically inside a div?

I've come across some posts mentioning the need for a container with h-100 to align items using the align-self class. However, I'm facing issues aligning a navbar at the bottom of a div. When I place the navbar within another container and row, i ...

htmlcsstwitter-bootstrapbootstrap-4

The method `collectionGroup` is not recognized as a function within the context of _firebase__WEBPACK_IMPORTED_MODULE_10__.usersCollection

Having an issue similar to the title. I am encountering an error while attempting to download my 'hives' using collectionGroup, and I'm unsure of how to resolve it. view image details here Below is the code snippet: async fetchHives() { ...

javascriptvue.jsgoogle-cloud-firestore

Issue: [$compile:multidir] encountered when attempting to implement uib-tab

Here's the code snippet I was using: <uib-tabset> <uib-tab id="tab1" heading="Tab1"> <div ng-include="'partials/tab1.html'"></div> </uib-tab> <uib-tab id="tab2" heading="Tab2" ng-controller="Ta ...

javascriptangularjsangular-ui-bootstrap

Function for adding numbers in Javascript with currying

Can you help me solve this interesting problem? I need a javascript function that can return the sum of all arguments passed to it, even when called multiple times. I have identified different ways in which the function can be called - sum(1, 2, 3, 4); ...

javascriptrecursionclosures

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

javascriptjqueryhtmlcss

Tips for resizing SVG when referencing another SVG file

In my project, I have incorporated inline SVG and now I am looking to adjust the width and height to create small icons without resizing the tags. .row { display: flex; justify-content: space-between; align-items: center; border: solid 1px; } s ...

htmlcsssvg

JavaScript Regular Expressions: Naming Conventions

While many of us are familiar with naming conventions in R, regular expressions remain uncharted territory for me and the most dreaded aspect of my programming endeavors. As I dive back into JavaScript, I am grappling with creating precise RegExp to valida ...

javascriptregexrnaming-conventions

How to achieve striped columns with Bootstrap 4.0 instead of striped rows

Here is how my table currently looks with the implementation in place: https://i.sstatic.net/b7onC.png Since my data is displayed vertically, I am interested in adding stripes to the columns or implementing some CSS hovering effect when the mouse is over ...

csshtml-tablebootstrap-4

Invoke the onclick method using addEventListener

I am attempting to create a basic function that increments a counter when one of my list items is clicked on. However, I keep encountering an error message that says addEventListener is not a function. This is how the HTML looks: <ul class="boxes"&g ...

javascriptoop

Why isn't my CSS float behaving as I anticipated?

I'm currently working on a website and facing an issue. The CSS Float property is not behaving as expected. Here is my HTML Code: <div class="slider-menu"> <div class="slider-box"> <img src="agac.jpg"> & ...

htmlcss

Looking to utilize AngularJS validation in place of the default browser validation?

I am working on a form that contains two ng-forms for input validation. I have encountered two issues with my forms. 1) I am trying to implement a minlength validation for the Company input, but my current approach doesn't seem to be working. How can ...

javascriptangularjshtmlformsvalidation

The beauty of asynchronous GET requests in VueJS

As a newcomer to VueJS, I am exploring how to make a GET request to the GitHub API. Initially, I made a request to sort users by follower count, resulting in an array ordered in descending order of user logins. Following that, I sent another GET request to ...

javascriptvue.jshttpasynchronousaxios

Setting up jQuery UI

I recently downloaded jQuery UI and found myself overwhelmed with the numerous files that came with it. I am unsure if I need to use all of them or where they should be placed. Here is what I have: css/ development-bundle/ js/ index.html I moved the fol ...

javascriptjqueryjquery-ui

Utilizing React, Graphql, and Next.js, you can expect to receive an object or JSON value instead of the

Presently, I am viewing an object output of {value=1, label=USA} https://i.sstatic.net/MLeIT.png However, I would like to only access the label output USA on my-post page On the create-post page, I am able to access post.countries ? countries.label : &qu ...

javascriptreactjsjsongraphqlnext.js

Error: The function setDarkTheme is not defined

Every time I click on the Dark button to apply dark theme on my page, I encounter an error. It seems like the error lies in the onClick function of the button and I can't seem to figure it out. Error message App.js import { useState } from 'rea ...

javascriptreactjsreact-hookserror-handling