Utilize Various Guidelines for Clicking on Various Thumbnails (jquery)

Question

Utilize Various Guidelines for Clicking on Various Thumbnails (jquery)

I am new to the world of HTML/CSS and have been struggling with a jQuery challenge while building my first website. My goal is to create a jQuery-powered image gallery using thumbnails. I found a tutorial by Ivan Lazarevic () and also sought help from Stackoverflow's forum via this thread: .

The code provided replaces the displayed large image with a larger version of the thumbnail when clicked. However, this works smoothly only for pictures with the same orientation. To address this, I have separate code snippets in two different files for horizontal and vertical images:

   <div id="mainImage">
     <img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
   </div>

AND:

   <div id="mainImageVERTICAL">
     <img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
   </div>

I have created different CSS rules for largeImage and largeImageVERTICAL based on portrait or landscape orientation of the images.

   #largeImage { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 5%;
   }

AND:

   #largeImageVERTICAL { 
   position: fixed;
   height: 83%;
   width:auto;
   top: 15%;
   left: 36.36%;
   }

These rules position the images differently on the screen. However, I am seeking guidance on how to modify my code so that I can handle both portrait and landscape-oriented images by applying the correct CSS rule to each. Currently, I am following Lazarevic's approach which includes:

   $('#thumbs img').click(function(){
   $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
   });

This code simply swaps the thumbnails with larger images. I want to dynamically apply the appropriate CSS rule based on the orientation of the image clicked. I believe this requires some JavaScript coding, which I am not familiar with.

I would greatly appreciate any assistance to move forward with this project. Any suggestions on how to achieve this? Perhaps a JS function that determines which CSS rule to use based on the clicked image? I am currently stuck and in need of guidance...

Thank you in advance!

javascript jquery css image gallery

Answer 1

Answer №1

There are a few different ways you can accomplish this task.

One method is to utilize the HTML5 data- attribute to indicate which specific <img> elements should be modified. For example:

<div id="thumbs">
    <img src="img.jpg" data-large="largeImage"/>
    <img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>

Then, you can implement the following code:

$('#thumbs img').click(function(e) {
    var imageId = $(this).attr('data-large'),
        newSrc = this.src.replace('thumb', 'large');
    $('#' + imageId).attr('src', newSrc);
});

Alternatively, you can determine whether an image is portrait or landscape based on its thumbnail dimensions:

$('#thumbs img').click(function(e) {
    var $this = $(this),
        height = $this.height(),
        width = $this.width(),
        newSrc = this.src.replace('thumb', 'large');
    var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
    $('#' + imageId).attr('src', newSrc);
});

In either scenario, it's important to hide the other unused <img> element to prevent displaying the previously selected image for the alternate orientation.

One approach to accomplishing this could involve:

var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();

You can include the above lines within the click event handler and use .show() after updating the source with .attr('src', ...).

Answer 2

There are a few different ways you can accomplish this task.

One method is to utilize the HTML5 data- attribute to indicate which specific <img> elements should be modified. For example:

<div id="thumbs">
    <img src="img.jpg" data-large="largeImage"/>
    <img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>

Then, you can implement the following code:

$('#thumbs img').click(function(e) {
    var imageId = $(this).attr('data-large'),
        newSrc = this.src.replace('thumb', 'large');
    $('#' + imageId).attr('src', newSrc);
});

Alternatively, you can determine whether an image is portrait or landscape based on its thumbnail dimensions:

$('#thumbs img').click(function(e) {
    var $this = $(this),
        height = $this.height(),
        width = $this.width(),
        newSrc = this.src.replace('thumb', 'large');
    var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
    $('#' + imageId).attr('src', newSrc);
});

In either scenario, it's important to hide the other unused <img> element to prevent displaying the previously selected image for the alternate orientation.

One approach to accomplishing this could involve:

var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();

You can include the above lines within the click event handler and use .show() after updating the source with .attr('src', ...).

Answer 3

Answer №2

Utilize classes instead of ids for styling.

.large-image{ 
   top: 15%;
   width:auto;
   height: 83%;
   position: fixed;
}
.portrait{ 
   left: 36.36%;
}
.landscape{ 
   left: 5%;
}

JavaScript

$('.large-image').on('load', function () {
    var that = $(this);
    if (that.width() < that.height()) {
        that.addClass('portrait');
    } else {
        that.addClass('landscape');
    }
});
$('#thumbs').on('click', 'img', function () {
    $('.large-image').attr('src',$(this).attr('src').replace('thumb','large'));
});

Answer 4

Utilize classes instead of ids for styling.

.large-image{ 
   top: 15%;
   width:auto;
   height: 83%;
   position: fixed;
}
.portrait{ 
   left: 36.36%;
}
.landscape{ 
   left: 5%;
}

JavaScript

$('.large-image').on('load', function () {
    var that = $(this);
    if (that.width() < that.height()) {
        that.addClass('portrait');
    } else {
        that.addClass('landscape');
    }
});
$('#thumbs').on('click', 'img', function () {
    $('.large-image').attr('src',$(this).attr('src').replace('thumb','large'));
});

Utilize Various Guidelines for Clicking on Various Thumbnails (jquery)

Answer №1

Answer №2

Similar questions

Ensure that video controls remain visible for 3 seconds after hovering over them

What is the best method for sending a DbGeography parameter to MVC?

I'm having trouble getting the drag event to work for Three.js trackball controls within a UIkit

What is the most effective method for enlarging an image based on its position within a larger image?

What are the steps to update content by referencing an id in the hash URL?

What exactly is the purpose of the double ampersand selector, '&&', when it comes to overriding the root class with makeStyles within Material-UI React?

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Eliminate borders surrounding WordPress text widgets

Retrieve webpage content using an ajax request in JavaScript

Increase the size of a div to equal the combined width of two divs located directly below it

Text Appearing in Bold Typeface

Create an event that binds to the immediate parent element and triggers upon the element's close

In need of a solution for the blank space issue in my HTML/CSS slideshow. How can I

Tips for integrating Bootstrap JavaScript into a React project

Mouse click failing to trigger CSS property update

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

Utilize paperclip and angularjs to easily upload files

Incorporate a generic type into a React Functional Component

When the page is refreshed, the route fails to load the data

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"