CODEWITHSUNDEEP
jqueryimagetoggleclass
crmepham
crmepham

Reputation: 4740

Unable to toggleClass to change the main image in a gallery when a thumbnail is clicked

I am attempting to produce a simple image gallery.

Currently I have one large class with a background image containing a full size version of one of the lower 5 thumbnails. When I click on one of the 5 thumbnails I want the background image of the large class to change to a larger version of the thumbnail that was just clicked.

I have attempted to use the toggleClass() method to change the class to one with a background image that matches the thumbnail image but currently it isn't working.

I set up a JSfiddle to demonstrate with the first two thumbnails, currently changing the class should only change the background color to simplify it a bit.

So why isn't the class being changed when the second image with id thumb2 is clicked?

Thanks

Upvotes: 0

Views: 110

Answers (3)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

use 

$(".main-image1").toggleClass("main-image2");

Don't use . at the toggleClass()

Demo

Upvotes: 1

PSL
PSL

Reputation: 123739

Sytnax issue:-

Change this

$(".main-image1").toggleClass(".main-image2");

to

$(".main-image1").toggleClass("main-image2");

When providing a class selector you need to provide . but in the add/remove/toggleClass operation it should be the name of the class alone.

Fiddle

Upvotes: 2

Nicu Surdu
Nicu Surdu

Reputation: 8301

Remove the dot in main-image2

$(".main-image1").toggleClass("main-image2");

Upvotes: 3

Related Questions