CODEWITHSUNDEEP
javascriptcssgallery
Noob Coder
Noob Coder

Reputation: 84

Can this be achieved without js?

I have this image gallery which I want to do without the javascript. Can this be done without using the javascript ?? Just need the big picture to change when mouseover or something similar.

function myFunction(imgs) {
  var expandImg = document.getElementById('expandedImg')
  var imgText = document.getElementById('imgtext')
  expandImg.src = imgs.src
  imgText.innerHTML = imgs.alt
  expandImg.parentElement.style.display = 'block'
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}


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

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: '';
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
}


/* 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;
}
<div style="text-align: center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width: 100%" onclick="myFunction(this);" />
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width: 100%" onclick="myFunction(this);" />
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width: 100%" onclick="myFunction(this);" />
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width: 100%" onclick="myFunction(this);" />
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span
  >
  <img id="expandedImg" style="width: 100%" />
  <div id="imgtext"></div>
</div>

Any help is appreciated. Sorry for adding this text as StackOverflow won't let me post this without adding more text.

Thanks in advance.

Upvotes: 0

Views: 107

Answers (2)

Oskar Grosser
Oskar Grosser

Reputation: 3454

Preface

Though not impossible, I nonetheless highly recommend using JavaScript instead of CSS for this task. You should not see the following content of this answer as an alternative to JavaScript's intended purpose, but see this as a playful "solution".

Another big point to use JavaScript instead of CSS is: Using CSS for this task is not accessible at all. You should always strive to make good, easy-to-use and accessible websites.

You should especially refrain from using this in a business environment for the aforementioned reason.

CSS-only solution

Necessary HTML changes

Since CSS is cascading, the image-previews need to come before either the big image itself or its ancestor. You can imagine this like this: The HTML is a tree, and effects are only carried through down to the leaves, but cannot affect neighbouring branches as that would require backtracking at some point.

In code, this could look like this:

<!-- Either this (case 1): -->
<img class="img-preview">
<img class="big-img">

<!-- Or this (case 2): -->
<img class="img-preview">
<div>
  <img class="big-img"> <!-- May be nested deeper -->
</div>

The CSS

The CSS should be relatively simple. The only issue is, that for each image-preview, a new CSS-rule needs to be added. This makes adding a new image-preview a bit more work in the future, but more importantly: It crams your CSS full with unnecessary rules! This will probably result in unused CSS-rules in case you'll rewrite some, and will hinder maintenance and readability heavily.

Friendly reminder: This should better be done by using JavaScript!

CSS' :hover-pseudo-class is effectively the same as JS' mouseover. Using this and the general sibling-combinator ~ (and potentially the descendant combinator ), we can override the big image's background-image-property depending on the image-preview that is hovered:

/* Either this (case 1): */
.img-preview:hover~.big-img {/* ... */}

/* Or this (case 2): */
.img-preview:hover~* .big-img {/* ... */}

As I have already mentioned, every image-preview requires its own CSS-rule. This is because CSS cannot use HTML-attributes for its properties (except for pseudo-elements and their content-property, I think).

This means, the CSS could look like this for the current HTML:

/* The CSS */
.img-preview[data-src="https://picsum.photos/id/10/64/64"]:hover~.big-img {
  background-image: url("https://picsum.photos/id/10/64/64");
}
.img-preview[data-src="https://picsum.photos/id/1002/64/64"]:hover~.big-img {
  background-image: url("https://picsum.photos/id/1002/64/64");
}
/* etc. */

/* Ignore; for styling only */
img {border: 1px solid black}
.img-preview {
  width: 2rem;
  height: 2rem;
}
.big-img {
  width: 4rem;
  height: 4rem;
}
<img class="img-preview"
     src="https://picsum.photos/id/10/32/32"
     data-src="https://picsum.photos/id/10/64/64">
<img class="img-preview"
     src="https://picsum.photos/id/1002/32/32"
     data-src="https://picsum.photos/id/1002/64/64">
<!-- etc. -->

<img class="big-img">

(Sidenote: I used attribute-selectors here, but the same thing could be done using IDs or similar, as long as every image-preview can be selected individually.)

Endnote

Adding text-descriptions while hovering may be solved in a similar fashion, but is left as a task.

Unfortunately, the big image won't stay when using this approach. If you want it to stay, you should take a look at Abd Elbeltaji's answer. They use <input>- and <label>-tags to accomplish that, together with CSS' :checked-pseudo-class.

Despite looking so, changing the HTML as shown does not restrict you in how you can style your elements, especially when using FlexBox or CSS Grid. Not only do they make styling easier, they are also meant to easily make a website responsive.

Accessibility

Again: This is not an accessible solution! This whole task should certainly be handled by JavaScript.

Should this be a public website, then I advise adding alt-descriptions for every image, even the previews. Unfortunately updating the big image's alt-attribute via CSS is impossible, making it inaccessible, which in turn harms your SEO. This being said, I commend your effort in displaying the image's alt-attribute in your original code, though not perfect. You might want to take a look at <figure>.

While we're at it: I'd also advise learning some semantic HTML-tags for the purpose of accessibility.

Pseudo-elements (::after, ::before, etc.) are also inaccessible. You should not use them to contain any relevant information/text. Though they may be used for styling-purposes in every imaginable way.

Upvotes: 2

Abd Elbeltaji
Abd Elbeltaji

Reputation: 473

Yes, you can achieve the same behavior without the use of javascript, you may use the concept of input elements (checkbox for single toggle value, radio for multiple select values) as adjacent siblings to your elements that they should be affected of the input, and by utilizing the :checked pseudo selector for inputs in css, in a compination with the adjacent sibling selector ~ you can affect the desired elements when the input is checked. You can also use labels which will allow you to hide your inputs and trigger their values with whatever is inside your label.

// No JS!
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
}

/* Expanding image text */
#imgtext::after {
  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;
}

.container .img {
  height: 500px;
  width: 100%;
  background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
}

/* Tab select */
input[name=tabSelect],
#hideImage {
  display: none;
}

#tabSelect1:checked~div.container .img {
  background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}

#tabSelect2:checked~div.container .img {
  background-image: url(https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}

#tabSelect3:checked~div.container .img {
  background-image: url(https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}

#tabSelect4:checked~div.container .img {
  background-image: url(https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}

#tabSelect1:checked~div.container #imgtext::after {
  content: "Nature";
}

#tabSelect2:checked~div.container #imgtext::after {
  content: "Snow";
}

#tabSelect3:checked~div.container #imgtext::after {
  content: "Mountains";
}

#tabSelect4:checked~div.container #imgtext::after {
  content: "Lights";
}

/* image hide btn */
#hideImage:checked~div.container {
  display: none;
}
<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<input type="radio" name="tabSelect" id="tabSelect1">
<input type="radio" name="tabSelect" id="tabSelect2">
<input type="radio" name="tabSelect" id="tabSelect3">
<input type="radio" name="tabSelect" id="tabSelect4">
<!-- The four columns -->
<div class="row">
  <div class="column">
    <label for="tabSelect1">
      <img src="https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Nature" style="width:100%">
    </label>
  </div>
  <div class="column">
    <label for="tabSelect2">
      <img src="https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Snow" style="width:100%">
    </label>
  </div>
  <div class="column">
    <label for="tabSelect3">
      <img src="https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Mountains" style="width:100%">
    </label>
  </div>
  <div class="column">
    <label for="tabSelect4">
      <img src="https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Lights" style="width:100%">
    </label>
  </div>
</div>

<input type="checkbox" id="hideImage">
<div class="container">
  <label for="hideImage" class="closebtn">&times;</label>
  <div class="img"></div>
  <div id="imgtext"></div>
</div>
Here is a working example in: JSFiddle

Note! this approach is not optimal and would be tricky to expand in case you need to add more values.

PS: I had to change the images since the ones provided in your code do not exist.

Upvotes: 1

Related Questions