Help - Search - Members - Calendar
Full Version: HTML Help - Pop up to Lightbox or similar
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
sleightlydavid
Hi All,

I need some help please, and I'm sure it's simple to a lot of you out there!

I am a novice when it comes to web design etc, and I use wordpress for my own website I am developing myself.

I haven't used HTML, CSS before, as mainly used page builders etc.

However, I have been trying to do something as simple as Have an Image of a Colour, & then when you hover over it changes the image to a piece of furniture in that colour. Well tonight I finally managed it, and also gave a caption.

What I would like to do now is enable the user to click on the image to Enlarge it in lightbox (or similar) so they can view both images bigger to see the detail & also enable me to write a bigger caption. Is this possible?

Every time I try to add something, it creates another image below my original, but the click through doesn't work.......HELP!

This is what I have so far:

<a href="URL ADDRESS"><img src="http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png" onmouseover="this.src='http://thewagtailway.co.uk/wp-content/uploads/2017/04/Lady-Grey-Dog-Bed-Medium.jpg'" onmouseout="this.src='http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png'" /></a>

<figcaption>
WALNUT
</figcaption>

Finally I also require the hover to work on mobile or touch devices....any ideas how I can amend to include this?

Thanks all in advance for your help
Christian J
QUOTE(sleightlydavid @ Apr 5 2018, 02:48 AM) *

Every time I try to add something, it creates another image below my original, but the click through doesn't work.......HELP!

This is what I have so far:

<a href="URL ADDRESS"><img src="http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png" onmouseover="this.src='http://thewagtailway.co.uk/wp-content/uploads/2017/04/Lady-Grey-Dog-Bed-Medium.jpg'" onmouseout="this.src='http://thewagtailway.co.uk/wp-content/uploads/2018/04/Neptune-Walnut.png'" /></a>

<figcaption>
WALNUT
</figcaption>

You need to install the Lightbox library first of all, have you done that? Also there is no onclick to call the Lightbox script.

QUOTE
Finally I also require the hover to work on mobile or touch devices....any ideas how I can amend to include this?

Alas hover events don't work on touch screens, since touching the screen fires an onclick event right away.

Instead you might make a click on an Image of a Color change the furniture image permanently, while clicking the furniture image enlarges it.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.