Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ HTML Help - Pop up to Lightbox or similar

Posted by: sleightlydavid Apr 4 2018, 07:48 PM

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

Posted by: Christian J Apr 5 2018, 10:57 AM

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.