CODEWITHSUNDEEP
jquerycssimagexhtmlgallery
user1139382
user1139382

Reputation: 1

CSS Image Gallery modification

I'm creating an event website which would, obviously, include an event calendar. I'm using this example http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ for the gallery, hover effects, etc.

However, I'd like to modify the above example so that when you click the thumbnail, the enlarged image stays until you click another thumbnail etc.

How would I go about doing this given the code in the example? Is it possible without jQuery/Javascript?

Upvotes: 0

Views: 306

Answers (2)

Blazemonger
Blazemonger

Reputation: 92943

Change the .thumbnail:hover span style in the CSS to something like .thumbnail_clicked span and add this jQuery code:

$(document).ready(function() {
    $('.thumbnail').click(function() {
        var cname = 'thumbnail_clicked';
        $(this).addClass(cname).siblings().removeClass(cname);
    });
});

http://jsfiddle.net/mblase75/DxArs/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114407

You need to use JavaScript to do this.

The example uses :hover to achieve this effect. Unfortunately to need the page to "remember" something. CSS can't do that by itself.

You'd need to copy the styles contained in the :hover declaration to a class, then assign that class to the element on mouse-over. This also means you have to remove that class from this item when another item is hovered.

Upvotes: 1

Related Questions