Apply different rules when clicking on various thumbnails (jquery)

Question

I am pretty new to HTML / CSS and have had a jquery problem since I started building my first website. I want to create a jQuery-enabled image gallery using thumbnails. The textbook I followed was Ivan Lazarevich in this regard ( http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/ ). I also used the Stackoverflow forum through this thread: http://goo.gl/ILzsx .

The code that he provides replaces the large image on the display with the larger version of the thumbnail that was clicked. This seems to work quite smoothly, but only for images that have the same orientation. The following code appears in two different files, thereby setting the difference between 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 created different CSS rules for the largeImage and largeImageVERTICAL parameters, depending on whether the image has portrait or landscape orientation.

  #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 two rules simply place images at different points on the screen. However, I would like to know how to change my code so that I can create a page with images with a portrait and a landscape using a CSS rule that belongs to everyone. So far, I have what I got from Lazarevich’s approach, namely:

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

This code simply replaces thumbnails with large images. As said, I want to have the right to apply the correct rule to the correct image, and I suggest that this should be done using some JS coding, which I know almost nothing about.

I would appreciate some help so that I can continue this project. Any ideas how to make this work? Maybe a JS function that tells the machine to use one or the other CSS rule, depending on which image is clicked? I'm really stuck here ...

Thanks in advance!

Answer 1

There are several ways to do this.

Use the HTML5 data-* attribute to indicate which of the <img> elements should be updated. So:

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

Then:

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

Or, use the dimensions of the thumbnail to determine the portrait or landscape:

 $('#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 any case, you will probably need to hide another unused <img> element so that you do not have a previously selected image for a different orientation displayed.

One way to achieve this:

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

Add the above two lines to the click event handler above and call .show() after calling .attr('src', ...) .

Answer 2

Use the not id class.

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

Js

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