WebsiteBaker Community Forum

General Community => Off-Topic => Topic started by: Gast on February 18, 2016, 01:16:36 AM

Title: combined img+href - W3C-Conform???
Post by: Gast on February 18, 2016, 01:16:36 AM

found a solution for clickable pics without special a-tag arund the img-tag on jsfiddle.

Code: [Select]

<img src="http://..../img/sprites.png" href="http://....../img/sprites.png" class="myImg"/>
css-class: myImg set width or height for the thumb, the other attribute is set to "auto"

with another code you open the pic with a colorbox-effect

Code: [Select]

$('img').click(function() {
    $(this).colorbox({href: $(this).attr('src')});
});
i search in the web for some descriptions, but doesnt found this combination
Is it W3C-conform??

Title: Re: combined img+href - W3C-Conform???
Post by: Ruud on February 18, 2016, 10:37:24 AM

1. Your colorbox script example does not use the href tag in the image.
It takes the src attribute and uses that to open the lightbox:   $(this).attr('src')

2. No, it is not valid to use a href attribute in an image element.
A better way would be to use a data-* attribute.
(Custom attributes prefixed with "data-" will be completely ignored by the user agent.)

Setup like:
<img src="http://..../img/sprites.png" data-myhref="http://....../img/sprites.png" class="myImg"/>

Use it like:
$('img').click(function() {
    $(this).colorbox({href: $(this).data('myhref')});
});

Title: Re: combined img+href - W3C-Conform???
Post by: Gast on February 18, 2016, 01:18:30 PM

thanks!!   (Y)

Title: Re: combined img+href - W3C-Conform???
Post by: pallavidesphande on February 24, 2016, 10:12:51 AM

Thank you Jacobi  (Y)