-1

I have this type of markup: 

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>

Now as I am going to validate this it is showing error as href inside a div is not allowed. So how to validate this error? I had used: 

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

but it is not opening the image as picture is coming through the fancybox. So please help me out. Any help and suggestions will be highly appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
NewUser
  • 12,713
  • 39
  • 142
  • 236

5 Answers5

5

href isn't a valid attribute for div, just a and area. Your best bet is to use an actual link (an a element). You can use styling (display: block) to make it shown as a block on modern browsers (not, sadly, on some older versions of IE), and since its content model is transparent, you could put a div inside it. All of the examples on the Fancybox howto page show using an a element, not a div.

So perhaps

<a class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</a>

...where the "box" class includes display: block. Or if you use that class places where you don't want block display, break out the display: block and apply it separately (via another class or inline style attribute).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • ya I used that but as the image is coming in a lightbox through fancybox it is not coming like that. It is simply opening the image without lightbox.I want that lightbox. – NewUser Dec 19 '11 at 11:19
  • i'd upvote this twice if i could. use the right tool for the job - with a simple display:block applied, an tag can be made to act exactly like a div, styled however you like, and give you the attributes you need to use. – totallyNotLizards Dec 19 '11 at 11:20
  • @newuser: I didn't catch that this was a fancybox-specific question. I've corrected your tags. – T.J. Crowder Dec 19 '11 at 11:20
  • @newuser: Sure it is, follow the link on the word "transparent" above. The content model of `a` (what it's allowed to contain) is whatever the content model of its container is (with a couple of caveats around interactive elements like `audio`). So if the `a` is within a `div`, it has the same content model as a `div` and you can put another `div` inside it. If the `a` is in a `p`, which has the *[phrasing](http://www.w3.org/TR/html5/content-models.html#phrasing-content)* content model, then you can't put it `div` in it (because you can't put a `div` in a `p`). – T.J. Crowder Dec 19 '11 at 18:45
1

With fancybox, you can show your images by putting their path inside links:

<a class="box" href="pic-gallery/img01.jpg"></a>

This will be identified by fancybox based on link's class eg box and will be opened by fancybox.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
0

This is expected - the href attribute is not valid on a <div> element. As T.J. said above, it would be best to use an actual <a> element to do this - it makes more semantic sense. You could even nest the <a> inside the outer <div> and hide it with CSS, so non-JS enabled users don't see redundant markup.

chrisfrancis27
  • 4,516
  • 1
  • 24
  • 32
0

Instead of this code.

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

Try this 

<script type="text/javascript">function open_win(){window.open("pic-gallery/img01.jpg");}</script><div class="box" onclick="javascript:open_win();"></div>

But how do you want to open the image?

Learner_bangalore
  • 34
  • 4
  • Actually I want the image should open in a lightbox and for lightbox I have used Fancybox. – NewUser Dec 19 '11 at 12:04
  • I do not have much idea about the Lightbox or Fancybox. But, I have just provided an alternative of redirecting to a page by using the javascript onclick method instead of anchor tag like hello. It must work for any html/javascript combo. – Learner_bangalore Dec 19 '11 at 13:14
0

I know this is unusual but you could still open an image (or any other type of content) in fancybox adding the onclick attribute to the <div> (or any other tag other than the <a> tag) and without using the href attribute.

You may have this (valid) html:

<div class="box" onclick="openFancybox('pic-gallery/img01.jpg');">
  <div>whatever here</div>
</div>

and use this script:

<script type="text/javascript">
function openFancybox(url){
 $.fancybox({
  'href': url,
  'type': 'image' //select the proper type of content
 });
}
</script>

what you are doing is passing the url to the function instead of using href

JFK
  • 40,963
  • 31
  • 133
  • 306