Tips for enlarging an image by tapping on it in handlebars

Question

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in order to view a larger version, without making them bigger by default?

Since I am using handlebars, I would appreciate a solution that doesn't involve the "onClick" method, as it is not compatible with my setup that relies on node.js.

<style>
img.std {
    height: 10%;
}
img.big {
    height: 40%;
}
</style>

<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">

javascript jquery css node.js handlebars.js

Answer 1

Answer №1

One way to achieve this is by incorporating an IIFE (Immediately Invoked Function Expression) and utilizing an arrow function that allows the this keyword to reference the image element:

.container{
   height: 200px;
   border: solid 1px gray;
}

img.std {
  height: 60%;
}

img.big {
  height: 80%;
}

<div class="container">
  <img id="img" class="std" onClick="(() => {
      this.className = this.className === 'std' ? 'big' : 'std';
    })(); return false;" src="http://placekitten.com/200/200">
</div>

Answer 2

One way to achieve this is by incorporating an IIFE (Immediately Invoked Function Expression) and utilizing an arrow function that allows the this keyword to reference the image element:

.container{
   height: 200px;
   border: solid 1px gray;
}

img.std {
  height: 60%;
}

img.big {
  height: 80%;
}

<div class="container">
  <img id="img" class="std" onClick="(() => {
      this.className = this.className === 'std' ? 'big' : 'std';
    })(); return false;" src="http://placekitten.com/200/200">
</div>

Answer 3

Answer №2

If you're looking to achieve this with jQuery, it can be done quite simply by using the following code:

$(document).on('click','img',function(){
   if (this.id == "img") {
       this.className=='std' ? this.className = 'big' : this.className='std';
   }
});

<img id="img" class="std" src="/uploads/{{photo_image}}">

To prevent any potential issues in the future, I recommend using a unique id for the tag to avoid ambiguity and bugs.

Answer 4

If you're looking to achieve this with jQuery, it can be done quite simply by using the following code:

$(document).on('click','img',function(){
   if (this.id == "img") {
       this.className=='std' ? this.className = 'big' : this.className='std';
   }
});

<img id="img" class="std" src="/uploads/{{photo_image}}">

To prevent any potential issues in the future, I recommend using a unique id for the tag to avoid ambiguity and bugs.

Answer 5

Answer №3

Below is the checkbox trick added to your code:

.imgcontainer {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
}

.imgcontainer input[type='radio'] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.imgcontainer input[type='radio'] + img.std  {
  height: auto;  
  width: 100px;  
}

.imgcontainer input[type='radio']:checked + img.std {  
  width: 200px;
}

<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>

Answer 6

Below is the checkbox trick added to your code:

.imgcontainer {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
}

.imgcontainer input[type='radio'] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.imgcontainer input[type='radio'] + img.std  {
  height: auto;  
  width: 100px;  
}

.imgcontainer input[type='radio']:checked + img.std {  
  width: 200px;
}

<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
  <input type="radio" name="imgcontainerradio">
  <img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>

Tips for enlarging an image by tapping on it in handlebars

Answer №1

Answer №2

Answer №3

Similar questions

What is causing jsdom.env to malfunction with the 'base' tag?

Adding custom JSON objects to enhance logging in Node.js using Bunyan

Is there a way to determine whether all fields in a schema have been populated or remain empty?

What is the best way to hide the input field when there are multiple parent classes present?

Using ng-pattern to validate that a text field does not conclude with a particular term

How to alter row colors in SQL/PHP tables

Every time I attempt to compile NodeJS, I encounter a compilation error

Decapitalizing URL string in jQuery GET request

Preventing the triggering of events or functions while utilizing angular-gantt

During XML parsing, the emission from socket.io will be blocked until the processing is complete

Update the 'selected' text with the JQuery fnGetColumnData Plugin

An error occurs in TypeScript when attempting to reduce a loop on an array

Encountering an issue with Vuex action dispatch when using electron

Exploring the capabilities of the Next.js router and the useRouter

Implementing mysqli_num_rows in conjunction with a while loop and an onclick event

Finding the Attachment ID on a JIRA Issue Page with JavaScript

Error: Property cannot be read after page refresh or modification

The image being displayed is significantly wider than the corresponding HTML element

Expandable menu featuring visual icons and a toggle symbol

The dimensions of the window - creating divs within td elements - the appearance of scroll