Member Avatar for millsy007

Hi

I am using the css image gallery I got from:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click.

Is this possible using some javascript?

  • 2 Contributors
  • 2 Replies
  • 90 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by millsy007
Member Avatar for JugglerDrummer

Its definitely possible using javascript. If you want to change the effect, if you are a code monkey you can just edit the library's code. Otherwise, I would advise you google the library's features, and if it doesn't let you change what you want, try a new library. :D (jquery's great)

Member Avatar for millsy007

thanks
at the moment there is no javascript at all, it doesnt work by a mouseover but css hover:

.thumbnail:hover span
visibility: visible;
top: 0;
top:73px;
width:30%;
left:35%;
right:35%;
text-align:center; /*position where enlarged image should offset horizontally */
z-index: 50;
text-decoration: none;
}

<a class="thumbnail" href="#thumb">1<span><img src="images/1.jpg" /><br />Venitian Moonlight</span></a>

So how can I make this css behaviour a javascript onlick event?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.