The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Help - Pop up to Lightbox or similar, Novice web builder
sleightlydavid
post Apr 4 2018, 07:48 PM
Post #1





Group: Members
Posts: 1
Joined: 4-April 18
Member No.: 26,627



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

This post has been edited by sleightlydavid: Apr 4 2018, 07:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 5 2018, 10:57 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,837
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st June 2018 - 10:20 PM