Fancybox link in link tag

Question

On my website users can favorite images (user hovers over image, option to favorite an image shows). My current code (in a foreach loop):

    <a class="fancybox" title="Titel {{ $afbeelding }}" rel="group" href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </a>

As you see there is an <a> tag in an <a> tag and what happens is fancybox adds all the inner <a> tags as an image to the gallery of fancybox. So if I click on an image there is 3 of them in the gallery. What can I do to keep the tags like this but avoid having the same image 3 times in one gallery.

edit : the a tags work perfectly they link to the right action, the only problem is that all images appear 3 times in the fancybox gallery.

Answer 1

Since nesting <a> tags inside another <a> tag leads to an almost impossible solution, as a workaround you can use another element (as suggested by MauricioCarnieletto ) to wrap your nested <a> tags.

Then bind that wrapper ( class="fancybox" ) element to fancybox BUT using the special fancybox's data attributes :

• data-fancybox-href
• data-fancybox-title
• data-fancybox-group

Like :

<div class="fancybox" data-fancybox-title="Titel {{ $afbeelding }}" data-fancybox-group="group" data-fancybox-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
    <div class="favorieten-hover-box">
        <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}" alt="" />  
        <div>
            <span>                               
                <a href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                <a href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
            </span>
        </div>
    </div>
</div>

Then your script can be as simple as :

$(".fancybox").fancybox();

See JSFIDDLE

Notice I removed the rel="group" attributes from the nested links since you don't need them unless you are using them for another purpose other than fancybox.

---

EDIT : since you have nested links inside the wrapper, you may want them to have a separated action without firing fancybox as well as showing them on hover as you previously stated in one of your comments so

first you may need to tweak your css like

.fancybox:hover .fa {
    display: block;
    /* other css properties */
}

notice I am targeting the class .fa , which is common to both nested links.

Then tweak your fancybox initialization code like

$(".fancybox").on("click", ".fa", function (e) {
    e.stopPropagation(); // don't fire fancybox
}).fancybox();

notice we used .stopPropagation() to prevent selectors .fa from firing fancybox but still perform their default actions.

See updated JSFIDDLE

Answer 2

As per the W3C specifications: Nested Links are Illegal .

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

As such, there's no correct way to "fix" your issue short of complying with the standards and not putting anchor tags inside other anchor tags - that doesn't make sense and isn't going to play nicely, as you're discovering. You need to figure out how to structure your HTML differently to fit within the standards for the elements you're using.

Answer 3

Like sphanley said, you can't nest two links, but, you can solve this with js, and changing the element.

Change your HTML to this firs:

<span class="callthisanewclass" title="Titel {{ $afbeelding }}" rel="group" data-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </span>

Then, add this to your JS (in this case, Jquery)

$('.callthisanewclass').on('click', function () {

    var ths = $(this),
        href = ths.data('href');

    ths.fancybox({

       href: href

    });

}