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.6 is now available!


Will it continue with WB? It goes on! | Geht es mit WB weiter? Es geht weiter!
https://forum.websitebaker.org/index.php/topic,32340.msg226702.html#msg226702


The forum email address board@websitebaker.org is working again
https://forum.websitebaker.org/index.php/topic,32358.0.html


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


  • 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 5363 times)

Offline jacobi22

  • Betatester
  • **
  • Posts: 5920
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: 5920
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