WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • General Community »
  • Off-Topic »
  • combined img+href - W3C-Conform???
  • Print
Pages: [1]   Go Down

Author Topic: combined img+href - W3C-Conform???  (Read 6409 times)

Offline jacobi22

  • Betatester
  • **
  • Posts: 5921
combined img+href - W3C-Conform???
« 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??
Logged

Offline Ruud

  • Posts: 3671
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: combined img+href - W3C-Conform???
« Reply #1 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')});
});
Logged
Dev4me - WebsiteBaker modules - WBhelp.org

Offline jacobi22

  • Betatester
  • **
  • Posts: 5921
Re: combined img+href - W3C-Conform???
« Reply #2 on: February 18, 2016, 01:18:30 PM »
thanks!!   (Y)
Logged

Offline pallavidesphande

  • Posts: 1
    • Muscle Building
Re: combined img+href - W3C-Conform???
« Reply #3 on: February 24, 2016, 10:12:51 AM »
Thank you Jacobi  (Y)
Logged
Fitness Freaks | Web: http://www.musclestyles.com

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • General Community »
  • Off-Topic »
  • combined img+href - W3C-Conform???
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2